Vue Breakpoint Mixin

This package contains a mixin to watch the different breakpoints for responsiveness. It's based on the same braeakpoints from Bulma but you can customize them as you want. See an example here.

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 | | xsmBreakpoint | 375 | | windowWidth | undefined (indicate the window width) | | windowHeight | undefined (indicate the window height) | | sizeType | xsm, sm, m, l, xl or xxl values (depending of the window size) | | orientation | portrait or landscape |

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

Computed | Name | Description | | ------------ | ------------ | | isMobile | if sizeType is xsm or sm | | isTablet | if sizeType is m | | isDesktop | if sizeType is l, xl or xxl |

Method | Name | Description | | ------------ | ------------ | | classUtility | Method that receive a object as parameter (config = {mobile, tablet, desktop}) to get an specific class by size | | isAndroid | Method to check if the platform where is running is Android | | isIOS | Method to check if the platform where is running is Android |

Example

<div id="my-div" :class="classUtility({mobile: 'margin-0', tablet: 'margin-2': desktop: 'margin-5'})"></div>

Author

This library is created by Aarón Montes.

License

MIT

Development

Want to contribute? Great!. Open a new PR here or a new issue here