Plugin installation and usage in Vue - Mini Project: Build & Apply

Plugin installation and usage

📖 Scenario: You are building a simple Vue 3 application that needs to use a plugin to add global functionality. Plugins in Vue help you add features like global methods or properties that can be used anywhere in your app.In this project, you will install a plugin that adds a global method to greet users by name.

🎯 Goal: Create a Vue 3 app that installs a plugin globally and uses the plugin's method inside a component to display a greeting message.

📋 What You'll Learn

Create a Vue 3 app with a main.js file

Create a plugin that adds a global method called $greet

Install the plugin globally in the app

Use the $greet method inside a component to show a greeting

💡 Why This Matters

🌍 Real World

Plugins let you add reusable features to Vue apps, like global utilities or third-party integrations.

💼 Career

Knowing how to create and use plugins is important for building scalable Vue applications and working with Vue libraries.

1

Create the Vue app and plugin file

Create a Vue 3 app in main.js by importing createApp from 'vue' and create a plugin object called greetPlugin with an install method that adds a global property $greet which is a function returning the string `Hello, ${name}!` where name is a parameter.

Vue

import { createApp } from 'vue'

// Your code here

Need a hint?

Remember, a Vue plugin is an object with an install method that receives the app instance.

2

Install the plugin globally in the app

In main.js, create the app instance by calling createApp({}) and then install the greetPlugin globally using app.use(greetPlugin).

Vue

import { createApp } from 'vue'

const greetPlugin = {
  install(app) {
    app.config.globalProperties.$greet = (name) => `Hello, ${name}!`
  }
}

const app = createApp({})
// Your code here

Need a hint?

Use app.use() to install plugins globally in Vue.

3

Create a component that uses the plugin method

Create a Vue component called Greeting with a setup function that uses getCurrentInstance() from 'vue' to access the global property $greet. Return a message variable that calls $greet with the name 'Vue Learner'. The template should display the message inside a <p> tag.

Vue

import { createApp, getCurrentInstance } from 'vue'

const greetPlugin = {
  install(app) {
    app.config.globalProperties.$greet = (name) => `Hello, ${name}!`
  }
}

const app = createApp({})
app.use(greetPlugin)

// Create Greeting component here
// Your code here

Need a hint?

Use getCurrentInstance() inside setup() to access global properties added by plugins.

4

Mount the app with the Greeting component

In main.js, mount the app by passing the Greeting component to app.mount('#app'). Also, add the HTML skeleton with a <div id="app"></div> element to the page.

Vue

import { createApp, getCurrentInstance, ref } from 'vue'

const greetPlugin = {
  install(app) {
    app.config.globalProperties.$greet = (name) => `Hello, ${name}!`
  }
}

const app = createApp({})
app.use(greetPlugin)

const Greeting = {
  setup() {
    const { appContext } = getCurrentInstance()
    const message = ref(appContext.config.globalProperties.$greet('Vue Learner'))
    return { message }
  },
  template: `{{ message }}`
}

// Mount the app with Greeting component
// Your code here

Need a hint?

Register the component globally with app.component() and mount the app to the #app element.