Let's create our own Vue JS plugin
Tags: vue, javascript, webdev, tutorial
Published: 2021-11-05 13:10:51

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](https://www.npmjs.com/package/vue-infinite-loading), [vuedraggable](https://github.com/SortableJS/Vue.Draggable) 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**
```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.
```js
// 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.

```js
// 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.
```html
<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.
```js
// 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
```js
// 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.
```js
// 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.
```js
// 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.
```html
<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](https://www.npmjs.com) package. You can follow [this tutorial](https://youtu.be/J4b_T-qH3BY) to get help with that.

That's all for now, make sure you checkout my other articles and YouTube channel
{% user 0shuvo0 %}
## Was it helpful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twjftovyevtqht7v3ley.png)](https://www.patreon.com/0shuvo0)