/vue-breakpoint-mixin

This package contains a mixin to watch screen size according with Bulma breakpoints.

Primary LanguageJavaScriptMIT LicenseMIT

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