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
$3
$3
1. Run UI interface.
``
vue ui
`
2. Then go to Plugins.
!alt text
3. Click 'Add plugin' button.
!alt text
4. Type e.g 'mobile-support' in the search input.
!alt text
4. Select and click install.
5. Then you have to choose one of the breakpoints types.
!alt text
6. Select and click 'Finish instalation'.
7. Then you can go to 'Configuration' and you can play with values of breakpoints values.
!alt text
$3
`
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.
$3