vue-breakpoint-mixin

Package to use as a watcher for breakpoints
11,422
Install
npm install vue-breakpoint-mixin
Latest Version:1.5.0
License:MIT
Last Updated:May 5, 2023
Links: GitHub  ·  npm
Maintainer: ajomuch92

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

Related Packages

platform-js

JavaScript bundles for internal development/testing proccesses in DIERA.RU

2,154 2
buefy-helper-json

Definitions of Buefy components for Vetur

25,322 3
vue-breakpoints

Vue.js utility component to show and hide components based on breakpoints

21,591 188
vue3-mq

Build responsive design into your Vue 3 app

563,882 45

Version History

Version Released License
1.5.0 MIT
1.4.0 MIT
1.3.2 MIT
1.3.1 MIT
1.3.0 MIT