Explain Plugins in Vue.js

VueJS is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer, it is easy to pick up for any developers. It is compatible with other libraries and extensions as well. If you want to create a single-page application, I think VueJS is the first choice.

In this article, we will learn what plugins are in Vue.js. We will also see different approaches to implement them, along with their respective syntaxes and complete examples.

What are Plugins in Vue.js?

In the case of a Vue application, plugins are essentially JavaScript objects that provide additional features or functionality. Custom directives, global components, prototype methods, instance methods and so on may be part of these functionalities. The plugin is typically implemented using the Vue.use() method, which allows any function it offers to be available in all its applications.

Syntax:

import { createApp } from 'vue'
const vue = createApp({})
vue.use(myPlugin, {
  . . .
})

Steps to Create a Vue App

Step 1: Install Vue modules using the below npm command

npm install vue

Step 2: Use Vue JS through CLI. Open your terminal or command prompt and run the below command.

npm install --global vue-cli

Step 3: Create the new project using the below command

vue init webpack myproject

Step 4:  Change the directory to the newly created project

cd myproject

Project Structure

The following project structure will be generated after completing the above-required steps:

Approach 1: Creating a simple plugin

A plugin for Vue.js is a JavaScript object you can add functionality to your instance of Vue, or extend it into the Vue ecosystem. Global components, directives, mixins, example methods, and many others can be part of plugins.

Syntax:

const myPlugin = {
    install(app) {
        app.config.globalProperties.$customMethod = function (message) {
            alert(`Hello ${message}! Thanks for clicking.`);
        };
    },
};

Example: Below example demonstrates the creation of a simple plugin.

myPlugin.js

Javascript

const myPlugin = {
    install(app) {
        app.config.globalProperties.$customMethod =
        function (message) {
            alert(`Hello ${message}! Thanks for clicking.`);
        };
    },
};

export default myPlugin;

main.js

Javascript

import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from '../src/plugins/myPlugin';

const app = createApp(App);

app.use(myPlugin);

app.mount('#app');

App.vue

Javascript

<template>
    <div>
        <h1>GeeksforGeeks</h1>
        <h2 style="color: green">
            Plugins in Vue.js
        </h2>
        <button @click="pluginMsg">click</button>
    </div>
</template>

<script>
    export default {
        methods: {
            pluginMsg() {
                this.$customMethod("GeeksforGeeks");
            },
        },
    };
</script>

Output:

Approach 2: Managing Global State with a Plugin

You need to create a custom Vue plugin, which allows you to access and modify the centralized store or state object of any component in an application, so that you can manage Global State with this plugin. In order to ensure that changes to the state automatically trigger updates for all components using that state, the plugin uses Vue’s reactivity system.

Syntax:

import { ref } from 'vue';
const count = ref(0);
const increment = () => {
    count.value++;
};
export default {
    count,
    increment,
};

Example:

myPlugin.js

Javascript

import { ref } from 'vue';

const count = ref(0);

const increment = () => {
    count.value++;
};

export default {
    count,
    increment,
};

main.js

Javascript

import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from '../src/plugins/myPlugin';

const app = createApp(App);

app.use(myPlugin);

app.mount('#app');

App.vue

Javascript

<template>
    <div>
        <h1>GeeksforGeeks</h1>
        <h2 style="color: green">
            Plugins in Vue.js
        </h2>
        <button @click="increment">
            Increment
        </button>
        <p>Count: {{ count }}</p>
    </div>
</template>

<script setup>

    // Update the path to the myPlugin
    // file accordingly
    import myPlugin from '../src/plugins/myPlugin';

    const { count, increment } = myPlugin;
</script>

Output: