Package to use as a watcher for breakpoints
Package: vue-breakpoint-mixin
Created by: ajomuch92
Last modified: Fri, 05 May 2023 13:57:34 GMT
Version: 1.5.0
License: MIT
Downloads: 2,600
Repository: https://github.com/ajomuch92/vue-breakpoint-mixin
Install
npm install vue-breakpoint-mixin
yarn add vue-breakpoint-mixin
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
