DEV Community

Cover image for Let's create our own Vue JS plugin
Shuvo
Shuvo

Posted on

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() {}
}
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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";
      }
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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";
      }
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
      `
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

0shuvo0 image

Was it helpful? Support me on Patreon

Patreon Logo

Discussion (0)