Explain Plugins in Vue.js
Last Updated :
24 Apr, 2025
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:
.gif)
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>
import myPlugin from '../src/plugins/myPlugin';
const { count, increment } = myPlugin;
</script>
|
Output:
.gif)
Similar Reads
Vue.js Plugins
Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. Vue.js plugins are reusable and shareable code that can enhance or add functionalities to Vue applications. They help developers to extend the capabilities of Vue by adding global methods, di
5 min read
Explain V8 engine in Node.js
The V8 engine is one of the core components of Node.js, and understanding its role and how it works can significantly improve your understanding of how Node.js executes JavaScript code. In this article, we will discuss the V8 engine’s importance and its working in the context of Node.js. What is a V
7 min read
Vue.js Props Declaration
Vue.js Props Declaration facilitates the declaration of props explicitly for the Vue components. With this, Vue can identify how external props are passed to the component that should be treated as fall-through attributes. In other words, Props of Vue components is a configuration for the transfer o
3 min read
Handling User Input in Vue.js
Vue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor
4 min read
Props vs Data in Vue.js
Props in Vue.jsProps in Vue.js are custom attributes that allow data to be passed from a parent component to a child component. This enables the parent component to communicate with its child components, providing them with data or functionality. In Vue.js, props are used to pass data from parent co
3 min read
Action vs Mutations in Vuex
The Vuex is a state management library designed specifically for the Vue.js applications. It helps manage shared state in a centralized store, making it easier to handle complex applications. In Vuex, actions and mutations are crucial concepts for managing state changes. we will going to discuss bot
3 min read
How to use routing in Vue.js ?
Vue router: Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA). The vue-router can be set up by default while creating your new project.
3 min read
Vue.js Reusing Components
Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers
4 min read
Vue.js Composition API using Provide
Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript, making it easier for developers to i
3 min read
Explain Route matching priority in VueJS ?
Route MatchingRoute Matching is the concept in which the Vue Router specifies which component is to be rendered according to the URL entered by the end user. If the user navigates to any specific URL, Vue Router checks for the defined routes and finds the match for that URL. It later compares the en
7 min read