Plugin creation basics in Vue - Mini Project: Build & Apply

Plugin creation basics

📖 Scenario: You are building a Vue 3 application and want to create a simple plugin that adds a global method to all components. This method will greet users by name.

🎯 Goal: Create a Vue 3 plugin that adds a global method called $greet to all components. This method should accept a name string and return a greeting message.

📋 What You'll Learn

Create a plugin object with an install method

Inside install, add a global property $greet to app.config.globalProperties

The $greet method should take a name parameter and return `Hello, ${name}!`

Use the plugin in a Vue app instance

💡 Why This Matters

🌍 Real World

Plugins help add reusable features to Vue apps, like global methods or directives, making code cleaner and easier to maintain.

💼 Career

Understanding plugin creation is important for Vue developers to extend app functionality and share code across projects or teams.

1

Create the plugin object

Create a constant called greetPlugin and assign it an object with an install method that takes a parameter app.

Vue

# Your code here

Need a hint?

Start by defining an object named greetPlugin with an install method that receives app.

2

Add the global method inside install

Inside the install method of greetPlugin, add a global property called $greet to app.config.globalProperties. This should be a function that takes a parameter name.

Vue

const greetPlugin = {
  install(app) {
    // Add $greet method here
  }
}

Need a hint?

Use app.config.globalProperties.$greet = function(name) {} to add the method.

3

Implement the greeting message

Complete the $greet function to return the string `Hello, ${name}!` using a template literal.

Vue

const greetPlugin = {
  install(app) {
    app.config.globalProperties.$greet = function(name) {
      // Return greeting message
    }
  }
}

Need a hint?

Use return `Hello, ${name}!`; inside the function.

4

Use the plugin in a Vue app

Create a Vue app instance by calling createApp({}) and assign it to app. Then use app.use(greetPlugin) to install the plugin.

Vue

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

// Create app and use plugin
# Your code here

Need a hint?

Use const app = createApp({}) and then app.use(greetPlugin).