vue-cli-plugin-mobile-support

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

1. Run UI interface.

vue ui

2. Then go to Plugins.

3. Click 'Add plugin' button.

4. Type e.g 'mobile-support' in the search input.

4. Select and click install.
5. Then you have to choose one of the breakpoints types.

6. Select and click 'Finish instalation'.
7. 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.

Have fun!