Understanding and Using Plugins in Vue.js Development

Plugins are not specific to Vue.js, you will usually find them in a large range of software, a Plugin indicates that an interface is provided to allow for extensibility.

Plugins add global-level functionality to Vue. There is no strictly defined scope for a plugin- there are typically several types of plugins:

1. There are some to add some global methods or properties. e.g. vue-custom-element
2. Others add one or more global assets: directives/filters/transitions etc. e.g. vue-touch
3. There are ones to add some component options by global mixin. e.g. vue-router
4. Some plugins add some Vue instance methods by attaching them to Vue.prototype.
5. There are some that is a library that provides an API of its own, while injecting some combination of the above at the same time. e.g. vue-router

Using a Plugin

Plugins are used by calling the Vue.use() global method. This has to be done before we start our app by calling new Vue():

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

new Vue({
  //... options
})

We can optionally pass in some options:

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

Vue.use automatically prevents us from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only.

Some official plugins such as vue-router which are provided by Vue.js automatically call Vue.use() if Vue is available as a global variable. However in a module environment such as CommonJS, we always need to call Vue.use() explicitly:

// When we are using CommonJS via Browserify or Webpack 
var Vue = require('vue')
var VueRouter = require('vue-router')

// You should not forget to call this
Vue.use(VueRouter)

Another official plugin is Vuex, this is used for state management, it serves as a centralized store for all the components in an application. It is usually a necessity if you need to build a large application with high maintenance.

Here is an example state management using Vuex:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state:{
    count :0,
    carts:[]
  },
  // getters for manipulation
  getters:{
      countCarts: state => {
        return state.carts.length
      }
  },
  mutations: {
    ADD_CART:(state, item) => {
    state.carts.push(item)
  },
  REMOVE_CART:(state, item)=> {
    state.carts.splice(item,1)

  }
},
actions: {
        removeCart: (context, items)=> {
          context.commit("REMOVE_CART", item)
        }
}
});

The snippet above effectively monitors the state of a cart array in an e-commerce website.

There is also vee-validate, which is used for form validation when building business applications, in such cases form validation could become.

Writing a Plugin

A plugin in Vue.js should expose an install method. This method will be called with the Vue constructor as the first argument, along with possible options:

MyPlugin.install = function (Vue, options) {
  // 1. adding global method or property
  Vue.myGlobalMethod = function () {
    // some logic ...
  }

  // 2. adding a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // some logic ...
    }
    ...
  })

  // 3. injecting some component options
  Vue.mixin({
    created: function () {
      // some logic ...
    }
    ...
  })

  // 4. adding an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // some logic ...
  }
}

Previous: Render Functions and JSX in Vue.js Development
Next: Using Filters in Vue.js for Advanced Text Formatting.