Building custom plugins for Vue.js | Supercharge Development

Vue.js has an easy to use and very extensible plugin system which can be used to do wonders.

If you've been building Vue.js apps for a while then you know how great it is to work with. It has a great library of components and plugins. And if you've wondered how can you build some plugins of your own you're at the right place.

Vue.js Plugins are a way to add global functionality to your app. Use can use them to add app-wide components, add features like routing, state management or even make a simplified version of another plugin. The vue.js plugin system is very easy and simple though very powerful.

Use Cases:

• Add site wide components
• Add component options(by global mixins)
• Add some global assets(directives, filters, transitions)
• Add some global properties, methods and vue instance methods.
• Simplifying or extending an existing plugin(later in details)

Building a Plugin

Building a plugin is pretty straight forward. At its core, it's just an object which has an install method. The install method takes two parameters. The first is Vue and the second one is options that have any options passed to the plugin by the user. So, let's create a simple plugin that shows a message when any component is created.

// plugins.js
const MyCustomPlugin = {
  install(Vue, options) {
    Vue.mixin({
      created() {
        console.log("Component Created ✅")
      },
    })
  },
}

export default MyCustomPlugin

A custom plugin can be added just like any other plugin:

// main.js

import { MyCustomPlugin } from "./plugins"

Vue.use(MyCustomPlugin)

When you include the plugin in your main.js it calls the MyCustomPlugin.install() method. In this example plugin, we are adding a mixin through the plugin. As a result, it will become part of every component and will print Component Created every time a component is created.

Install App-wide Components using Plugins

You can use plugins to make your component app-wide accessible. This can be done by extending the Vue object and registering your component.

import MyComponent from "./components/MyComponent.vue"

const MyComponentPlugin = {
  install(Vue, options) {
    Vue.component(MyComponent.name, MyComponent)
  },
}

export default MyComponentPlugin

Install custom filters

Plugins can also be used to build and install custom filters in Vue.js. Let's create some filters that will format the date, and also calculate the time from now.

import moment from "moment"

const MyFilterPlugin = {
  install(Vue, options) {
    Vue.filter(
      "formatDate",
      value => value && moment(String(value)).format("DD MMM YYYY")
    )
    Vue.filter(
      "fromNow",
      value => value && moment(String(value), "DD MMM YYYY").fromNow()
    )
  },
}

export default MyFilterPlugin

Install properties, methods and instance methods to the Global Vue Object

You can also install some properties, methods, and Vue instance methods that you want to access from anywhere in your application.

const MyPlugin {
  install(Vue, options) {
    // Global Property
    Vue.myMessaage = 'Happy New Year'

    // Global Method
    Vue.getMyProperty = function() {
      return Vue.myMessaage
    }

    // an instance method
    Vue.prototype.$getMyPropertyLength = function() {
      return Vue.myMessaage.length
    }
  }
}

export default MyPlugin

An instance method is a method which added to the Vue.js instance and can be accessed from the components in vue.

Extending another plugin using a custom plugin

Sometimes you might want to extend the features of an existing plugin, or maybe you might want to add some custom configuration that plugin doesn't directly allow or maybe it's too complicated to use and you want to simplify it.

In this example, we will extend an existing component plugin vue-notification to simplify the process of showing a notification. What we want to some simple global methods in the Vue object which we can call to show Toast Messages as per our configuration. So, let's start.

Install the vue-notification package:

npm i vue-notification

// main.js
...
...
import Notifications from 'vue-notification'

Vue.use(Notifications)
...
...

<template>
  <!-- App.vue -->
  ...
  <notifications group="main-notification-container" position="top right" />
  ...
</template>

<script>
// App.vue
...
</script>

<style>
...
</style>

Now after setting up the vue-notification we can start building and integrating our plugin.

Build plugins to show error and success messages:

export const toastMessages = {
  install: Vue => {
    Vue.showErrorToast = ({ title, text }) => {
      Vue.notify({
        group: "main-notification-container",
        type: "error",
        title: title || "Error",
        text,
      })
    }
    Vue.showSuccessToast = ({ title, text }) => {
      Vue.notify({
        group: "main-notification-container",
        type: "success",
        title: title || "Success",
        text,
      })
    }
  },
}

// store.js
import Vue from 'vue'

...
actions: {
  ...
  async fetchData() {
    ...
    Vue.showErrorToast({ title: 'Unable to fetch data' })
    ...
  }
  ...
}
...

So, I hope you have learned how to build and install a vue.js plugin to extend the functionality of your vue.js apps. They can prove to be very useful is you're building an application where you want to share components, logic or property throughout your application. You can also go ahead, create and distribute your own plugins. I would highly recommend checking out the Vue documentation for Plugins to learn more about it.

Thank you for reading

Build something awesome today! 🙌

Website: Vue Documentation for Plugins

Documentation: Vue-notification Plugin

- Jitendra Nirnejak