A vue-cli plugin to manage the responsiveness of your application via javascript

Downloads in past


100.5.54 years ago4 years agoMinified + gzip package size for vue-cli-plugin-mobile-support in KB


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


Instalation via Vue CLI 3 ui interface

  1. Run UI interface.
``` vue ui ```
  1. Then go to Plugins.
alt text
  1. Click 'Add plugin' button.
alt text
  1. Type e.g 'mobile-support' in the search input.
alt text
  1. Select and click install.
  1. Then you have to choose one of the breakpoints types.
alt text
  1. Select and click 'Finish instalation'.
  1. Then you can go to 'Configuration' and you can play with values of breakpoints values.
alt text

Or instalation via terminal

``` vue add vue-cli-plugin-mobile-support ```


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!