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

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

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

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

Hint

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

Practice

1. What is the main purpose of using a plugin in a Vue application?

easy

A. To add reusable features or functionality globally

B. To write CSS styles for components

C. To create new Vue components manually

D. To replace the Vue router

Solution

1. Step 1: Understand what plugins do in Vue

   Plugins provide reusable features or functionality that can be used across the whole app.

2. Step 2: Compare options

   Options B, C, and D describe tasks unrelated to plugins' main purpose.

3. Final Answer:

   To add reusable features or functionality globally -> Option A

4. Quick Check:

   Plugins add reusable features = A [OK]

Hint: Plugins add global features to Vue apps [OK]

Common Mistakes:

• Thinking plugins are for styling
• Confusing plugins with components
• Assuming plugins replace routing

2. Which is the correct way to install a plugin named MyPlugin in a Vue 3 app?

easy

A. usePlugin(app, MyPlugin)

B. app.use(MyPlugin)

C. app.install(MyPlugin)

D. Vue.use(MyPlugin)

Solution

1. Step 1: Recall Vue 3 plugin installation syntax

   In Vue 3, plugins are installed by calling app.use() with the plugin.

2. Step 2: Check options

   Vue.use(MyPlugin) (Vue.use(MyPlugin)) is Vue 2 syntax. Options A and C use invalid methods. app.use(MyPlugin) is correct.

3. Final Answer:

   app.use(MyPlugin) -> Option B

4. Quick Check:

   Vue 3 uses app.use() = D [OK]

Hint: Use app.use() to install plugins in Vue 3 [OK]

Common Mistakes:

• Using Vue.use() which is Vue 2 syntax
• Calling app.install() which does not exist
• Trying custom functions like usePlugin()

3. Given this plugin code and usage:

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

const app = Vue.createApp({});
app.use(MyPlugin, { name: 'Alice' });
app.mount('#app');

// In a component template: {{ $greet() }}

What will be displayed inside the component?

medium

A. Error: $greet is not a function

B. Hello, undefined!

C. Hello, Alice!

D. Hello, !

Solution

1. Step 1: Understand plugin install method

   The plugin adds a global method $greet that returns 'Hello, ' plus the name from options.

2. Step 2: Check how plugin is used

   The plugin is installed with options { name: 'Alice' }, so $greet returns 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Plugin method uses options.name = Alice [OK]

Hint: Plugin options pass data used in global methods [OK]

Common Mistakes:

• Ignoring options parameter
• Assuming $greet is undefined
• Forgetting to use app.use() with options

4. What is wrong with this plugin installation code?

const app = Vue.createApp({});
app.mount('#app');
app.use(MyPlugin);

medium

A. Plugin must be installed before mounting the app

B. app.use() requires a second argument

C. Vue.createApp() is missing parentheses

D. app.mount() should be called twice

Solution

1. Step 1: Check plugin installation order

   Plugins must be installed before calling app.mount() to ensure plugin features are available.

2. Step 2: Analyze given code

   The code mounts the app first, then installs the plugin, which is too late.

3. Final Answer:

   Plugin must be installed before mounting the app -> Option A

4. Quick Check:

   Install plugins before mount = B [OK]

Hint: Always call app.use() before app.mount() [OK]

Common Mistakes:

• Installing plugins after mounting
• Thinking app.use() always needs options
• Confusing createApp syntax

5. You want to create a plugin that globally registers a component MyButton and adds a global method $log to log messages. Which is the correct way to write the plugin's install method?

hard

A. install(app) { app.registerComponent('MyButton', MyButton); app.global.$log = msg => console.log(msg); }

B. install() { Vue.component('MyButton', MyButton); Vue.prototype.$log = msg => console.log(msg); }

C. install(app) { app.addComponent('MyButton', MyButton); app.globalProperties.log = msg => console.log(msg); }

D. install(app) { app.component('MyButton', MyButton); app.config.globalProperties.$log = msg => console.log(msg); }

Solution

1. Step 1: Recall correct Vue 3 plugin API

   Use app.component() to register components and app.config.globalProperties to add global methods.

2. Step 2: Check each option

   install(app) { app.component('MyButton', MyButton); app.config.globalProperties.$log = msg => console.log(msg); } uses correct methods and property names. Options A, B, and D use outdated or incorrect APIs.

3. Final Answer:

   install(app) { app.component('MyButton', MyButton); app.config.globalProperties.$log = msg => console.log(msg); } -> Option D

4. Quick Check:

   Use app.component and app.config.globalProperties = C [OK]

Hint: Use app.component and app.config.globalProperties in install [OK]

Common Mistakes:

• Using Vue 2 global API like Vue.prototype
• Wrong method names like registerComponent
• Missing $ prefix on globalProperties method