Vue summary 07 commonly used plugins

plugin

develop plugin

Plugins usually add global functionality to Vue. There is no limit to the scope of plugins - generally there are the following types:

1. Add global methods or properties, such as:  vue-custom-element

2. Add global resources: directives/filters/transitions etc, like  vue-touch

3. Add some component options via global mixin methods like:  vue-router

4. Add Vue instance methods by adding them to Vue.prototype.

5. A library that provides its own API while providing one or more of the functions mentioned above, such as  vue-router

Vue.js plugins should have a public method  install . The first parameter of this method is the  Vue constructor, and the second parameter is an optional options object:

MyPlugin.install = function ( Vue, options) { // 1. Add a global method or property Vue.myGlobalMethod = function ( ) { // Logic... } // 2. Add a global resource Vue.directive( 'my-directive ', { bind (el, binding, vnode, oldVnode) { // logic... } ... }) // 3. Inject component Vue.mixin({ created: function ( ) { // logic... } ... }) // 4. Add instance method Vue.prototype.$myMethod = function ( methodOptions) { // Logic... } }

Use plugins

Use the plugin via the global method Vue.use() :

// call `MyPlugin.install(Vue)` Vue.use(MyPlugin)

You can also pass in an options object:

Vue.use(MyPlugin, { someOption: true })

Vue.use Multiple registrations of the same plugin are automatically prevented, and the plugin will only be registered once.

Some plugins officially provided by Vue.js (for example  vue-router) are automatically invoked when detecting  Vue global variables that are accessible  Vue.use(). However in a module environment such as CommonJS you should always explicitly call  Vue.use():

// When using the CommonJS module environment provided by Browserify or webpack var Vue = require( 'vue') var VueRouter = require( 'vue-router') // Don't forget to call this method Vue.use(VueRouter)

awesome-vue  is a collection of thousands of plugins and libraries contributed by the community.