Let's create our own Vue JS plugin

Let's write a custom Vue Plugin. How hard could it be?

If you're using Vue JS for a while then you have probably used some plugins with it as well. For example the Vue Router is a plugin. And there are many other useful plugins available like vue-infinite-loading, vuedraggable etc.
But sometimes you might not have a plugin available for your need in that case you'd have to write your own plugin.
And guess what? To create a Vue plugin all you have to do is create a JavaScript file that exports a object with a install method in it.
So inside the src folder let's create a folder called plugins and inside that will have a JavaScript file named MyPlugin.js

// src/plugins/MyPlugin.js
export default {
  install() {}
}

And then we will be able to import this in our main.js and install it like any other plugins.

// src/main.js
import Vue from "vue";
import App from "./App.vue";
import MyPlugin from "./plugins/MyPlugin.js";

Vue.use(MyPlugin);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

But of course this is not that useful so let's carry on.
While calling our install function Vue will pass some arguments to it. The first one is the Vue itself.
So let's accept that and use it to expose a custom directive.

// src/plugins/MyPlugin.js
export default {
  install(Vue) {
    Vue.directive("highlight", {
      inserted(el) {
        el.style.color = "red";
      }
    });
  }
}

Now in our components we will be able to use this directive.

<template>
  <div id="app">
    <p v-highlight>Hello world.</p>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

In the browser you should see a "Hello world." in red color.
Also if we want we can pass some options while installing our plugin.

// src/main.js
import Vue from "vue";
import App from "./App.vue";
import MyPlugin from "./plugins/MyPlugin.js";

Vue.use(MyPlugin, { highlightClr: 'gree' });

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

And we can receive those options as seconds argument in our install function

// src/plugins/MyPlugin.js
export default {
  install(Vue, options) {
    Vue.directive("highlight", {
      inserted(el) {
        el.style.color = options.highlightClr || "red";
      }
    });
  }
}

Great!!! Maybe you want a plugin that will provide a custom component that users can use in his project. Well sure you can do that.

// src/plugins/MyPlugin.js
export default {
  install(Vue, options) {
    Vue.component('my-plugin-component', {
      template: `
        <p>Hey there.</p>
      `
    });
  }
}

Or you can use SFC(Single File Component) as well.

// src/plugins/MyPlugin.js
import MyPluginComponent from "../components/MyPluginComponent.vue"

export default {
  install(Vue, options) {
    Vue.component('my-plugin-component', MyPluginComponent);
  }
}

Now our plugin will register this my-plugin-component that the user can use anywhere in his project.

<template>
  <div id="app">
    <p v-highlight>Hello world.</p>
    <my-plugin-component></my-plugin-component>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The same way we can add filters, minxins etc.
If you want people to be able to install and use your plugin you simply have to publish MyPlugin.js as a npm package. You can follow this tutorial to get help with that.

That's all for now, make sure you checkout my other articles and YouTube channel

ShuvoFollow

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace

Was it helpful? Support me on Patreon