vue-cli-plugin-mobile-support
v0.5.5
Published
A vue-cli plugin to manage the responsiveness of your application via javascript
Downloads
364
Maintainers
Readme
Vue Cli Plugin - Mobile Support
This plugin gives you the ability to manage the responsiveness of your application with Vue JS Mixin. This mixin includes a few computed properties based on breakpoints configuration. You can use them directly in the template or javascript code.
Getting started
Demo https://jsfiddle.net/zLe2gkpx/
Instalation via Vue CLI 3 ui interface
- Run UI interface.
vue ui
- Then go to Plugins.
- Click 'Add plugin' button.
- Type e.g 'mobile-support' in the search input.
- Select and click install.
- Then you have to choose one of the breakpoints types.
- Select and click 'Finish instalation'.
- Then you can go to 'Configuration' and you can play with values of breakpoints values.
Or instalation via terminal
vue add vue-cli-plugin-mobile-support
Usage
Plugin will add a few files to you project:
- WindowResize.js (Mixin)
- breakpointsConfig.js (breakpoints configuration file)
- TestComponent.vue (Example of using above mixin)
Mixin give you a few defined computed properties based on different breakpoints values like: xs, sm, md, lg and xl. All of them returning boolean so that e.g you can easly use them to control showing/hidding some elements in the templates on differents screen sizes or do run some logic inside javascript code.
I Recommend you to use TestComponent (somewhere in the app) and just play with it to get known of how its works.