ajomuch92

Vue breakpoint mixin

Package to use as a watcher for breakpoints

Version Version: 1.2.0 Version Updated: 05/23/2022 By: ajomuch92 License: MIT

DownloadsLast30Days: 7

https://github.com/ajomuch92/vue-breakpoint-mixin

npm i vue-breakpoint-mixin
yarn add vue-breakpoint-mixin

Vue Breakpoint Mixin

This package contains a mixin to watch the different breakpoints for responsiveness.

Instalation

NPM:

npm install --save vue-breakpoint-mixin

Import into your Vue component and use it:

import VueBreakpointMixin from'vue-breakpoint-mixin';

export default {
  ...
  mixins: [VueBreakpointMixin],
  ...
}

Data | Name | Value | | ------------ | ------------ | | xlBreakpoint | 1408 | | lBreakpoint | 1216 | | mBreakpoint | 1024 | | smBreakpoint | 768 | | sizeType | xsm, sm, m, l or xl values (depending of the window size) |

You can change any of these values on created or mounted method to custom the watcher.

Computed | Name | Description | | ------------ | ------------ | | isMobile | Compares screen width with smBreakpoint (as max-width smBreakpoint) | | isTablet | Compares screen width with mBreakpoint and lBreakpoint (as min-width mBreakpoint or lBreakpoint) | | isDesktop | Compares screen width with lBreakpoint and xlBreakpoint (as min-width lBreakpoint or xlBreakpoint) |

Author

This library is created by Aarón Montes.

License

MIT

Contributors


Dependencies


DevDependencies


Copyright © 2020 vuejscomponent.com