Plugin creation basics in Vue

Introduction

Plugins help add reusable features to your Vue app easily. They let you share code across many components.

You want to add a global function or property accessible in all components.

You need to register global components or directives once for the whole app.

You want to add third-party libraries with a simple setup.

You want to share common logic or utilities across many parts of your app.

Syntax

Vue

export default {
  install(app, options) {
    // Add global properties, components, or directives here
    app.config.globalProperties.$myMethod = () => {
      console.log('Hello from plugin!')
    }
  }
}

The install method is called by Vue when you use app.use().

The app argument is the Vue application instance.

Examples

This plugin adds a global greeting method you can call in any component.

Vue

export default {
  install(app) {
    app.config.globalProperties.$greet = (name) => `Hi, ${name}!`
  }
}

This plugin globally registers a simple button component.

Vue

export default {
  install(app) {
    app.component('MyButton', {
      template: `<button><slot /></button>`
    })
  }
}

Sample Program

This example creates a Vue app and uses a plugin that adds a global method $sayHello. The app shows the message from this method.

Vue

import { createApp } from 'vue'

const MyPlugin = {
  install(app) {
    app.config.globalProperties.$sayHello = () => 'Hello from plugin!'
  }
}

const app = createApp({
  template: `<div>{{ message }}</div>`,
  computed: {
    message() {
      return this.$sayHello()
    }
  }
})

app.use(MyPlugin)
app.mount('#app')

Important Notes

Always call app.use() before mounting the app.

Global properties added by plugins are accessible in all components via this.

Plugins can accept options by adding a second parameter to install(app, options).

Summary

Plugins add reusable features globally to your Vue app.

Define an install method to add properties, components, or directives.

Use app.use() to activate the plugin before mounting.

Practice

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

easy

A. To style components with CSS

B. To create local components only

C. To replace the Vue router

D. To add reusable features globally to a Vue app

Solution

1. Step 1: Understand what plugins do in Vue

   Plugins provide reusable features that can be used across the entire Vue app.

2. Step 2: Compare options

   Only To add reusable features globally to a Vue app describes adding reusable features globally, which is the main purpose of plugins.

3. Final Answer:

   To add reusable features globally to a Vue app -> Option D

4. Quick Check:

   Plugin purpose = reusable global features [OK]

Hint: Plugins add global features, not local or styling only [OK]

Common Mistakes:

• Thinking plugins only create local components
• Confusing plugins with routing or styling tools
• Believing plugins replace core Vue features

2. Which syntax correctly defines a Vue plugin with an install method?

easy

A. const MyPlugin = function(app) { /* code */ }

B. const MyPlugin = { install(app) { /* code */ } }

C. const MyPlugin = () => { app.install() }

D. const MyPlugin = { use(app) { /* code */ } }

Solution

1. Step 1: Recall Vue plugin structure

   A Vue plugin is an object with an install method that receives the app instance.

2. Step 2: Check each option

   const MyPlugin = { install(app) { /* code */ } } correctly defines an object with install(app). Others use wrong method names or syntax.

3. Final Answer:

   const MyPlugin = { install(app) { /* code */ } } -> Option B

4. Quick Check:

   Plugin = object with install(app) method [OK]

Hint: Plugin must have install(app) method inside an object [OK]

Common Mistakes:

• Using 'use' instead of 'install' method
• Defining plugin as a function without install
• Arrow function without proper parameters

3. Given this plugin code, what will be the output when used in a Vue app?

const LoggerPlugin = {
  install(app) {
    app.config.globalProperties.$log = (msg) => console.log('Log:', msg)
  }
}

const app = Vue.createApp({
  mounted() {
    this.$log('Hello')
  }
})
app.use(LoggerPlugin)
app.mount('#app')

medium

A. Nothing happens because plugin is not installed

B. Throws an error because $log is undefined

C. Logs 'Log: Hello' to the console when component mounts

D. Logs 'Hello' without the 'Log:' prefix

Solution

1. Step 1: Understand plugin effect

   The plugin adds a global property $log that logs messages with 'Log:' prefix.

2. Step 2: Check component usage

   On mount, the component calls this.$log('Hello'), which triggers console.log('Log: Hello').

3. Final Answer:

   Logs 'Log: Hello' to the console when component mounts -> Option C

4. Quick Check:

   Plugin adds $log, called on mount, logs with prefix [OK]

Hint: Global properties added by plugin are accessible via this.$property [OK]

Common Mistakes:

• Forgetting to call app.use() before mount
• Expecting $log to be a method without prefix
• Confusing plugin installation timing

4. Identify the error in this Vue plugin code:

const MyPlugin = {
  install() {
    console.log('Plugin installed')
  }
}

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

medium

A. install method missing the app parameter

B. Plugin object should be a function, not an object

C. app.use() must be called after app.mount()

D. Console.log cannot be used inside install

Solution

1. Step 1: Check install method signature

   The install method must accept the app parameter to receive the Vue app instance.

2. Step 2: Analyze the code

   Here, install() has no parameters, so it cannot access the app instance, which is required.

3. Final Answer:

   install method missing the app parameter -> Option A

4. Quick Check:

   install(app) needs app parameter [OK]

Hint: install must always receive app parameter [OK]

Common Mistakes:

• Omitting app parameter in install method
• Calling app.use() after mount
• Thinking plugin must be a function

5. You want to create a plugin that globally registers a component and adds a global method. Which is the correct way to do this?

const MyPlugin = {
  install(app) {
    // Register component
    app.component('MyButton', {
      template: 'Click me'
    })
    // Add global method
    app.config.globalProperties.$alert = (msg) => alert(msg)
  }
}

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

What will happen when you use <MyButton /> in your app and call this.$alert('Hi') inside a component?

hard

A. The button renders correctly and $alert shows an alert with 'Hi'

B. The button does not render because components can't be registered in plugins

C. $alert is undefined and causes an error

D. The plugin causes a runtime error due to incorrect syntax

Solution

1. Step 1: Verify component registration in plugin

   Using app.component inside install correctly registers a global component.

2. Step 2: Verify adding global method

   Adding $alert to app.config.globalProperties makes it accessible in components via this.$alert.

3. Step 3: Predict behavior

   Using <MyButton /> renders the button, and calling this.$alert('Hi') shows an alert with 'Hi'.

4. Final Answer:

   The button renders correctly and $alert shows an alert with 'Hi' -> Option A

5. Quick Check:

   Global component + global method work as expected [OK]

Hint: Register components and add methods inside install(app) [OK]

Common Mistakes:

• Thinking components can't be registered in plugins
• Forgetting to add app.use() before mount
• Not using app.config.globalProperties for global methods