vue-cli-plugin-mobile-support

0.5.5 • Public • Published

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
  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.
  2. Then you have to choose one of the breakpoints types.

alt text

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

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!

Package Sidebar

Install

npm i vue-cli-plugin-mobile-support

Weekly Downloads

92

Version

0.5.5

License

MIT

Unpacked Size

22.8 kB

Total Files

19

Last publish

Collaborators

  • lukas_ko