Plugin creation basics in Vue - Step-by-Step Execution

Concept Flow - Plugin creation basics

Create plugin object

↓

Define install function

↓

Add global properties or components

↓

Export plugin

↓

Import plugin in app

↓

Use app.use(plugin)

↓

Plugin features available globally

This flow shows how to create a Vue plugin by defining an install function, exporting it, and then using it in the Vue app to add global features.

Execution Sample

Vue

const MyPlugin = {
  install(app) {
    app.config.globalProperties.$greet = () => 'Hello!';
  }
};

export default MyPlugin;

This code creates a Vue plugin that adds a global greeting function accessible in all components.

Execution Table

Step	Action	Evaluation	Result
1	Create plugin object MyPlugin	MyPlugin is an object	MyPlugin ready with install method
2	Define install(app) method	install is a function	install method can access app instance
3	Inside install, add $greet to globalProperties	app.config.globalProperties.$greet set	$greet function available globally
4	Export MyPlugin	MyPlugin exported	Plugin ready to import
5	Import MyPlugin in main.js	MyPlugin imported	Plugin available in app file
6	Call app.use(MyPlugin)	app.use calls install(MyPlugin)	Plugin features registered globally
7	Use $greet in any component	$greet() called	Returns 'Hello!' string
8	End	Plugin installed and usable	Execution complete

💡 Plugin installed after app.use call; global properties accessible in components

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
MyPlugin	undefined	Object with install method	Same object	Same object
app.config.globalProperties.$greet	undefined	Function defined	Function available globally	Function available globally

Key Moments - 3 Insights

Why do we define an install function inside the plugin object?

The install function is the special method Vue calls when you use app.use(plugin). It receives the app instance to add global features. See execution_table step 2 and 6.

How does adding to app.config.globalProperties make features available everywhere?

Properties added to app.config.globalProperties become accessible in all components via this.$property. See execution_table step 3 and 7.

What happens if we forget to call app.use with the plugin?

The install function never runs, so global features are not added. The plugin won't work. See execution_table step 6 for when install runs.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the $greet function added to the app?

A Step 6

B Step 5

C Step 3

D Step 7

💡 Hint

Check the 'Action' and 'Result' columns at step 3 where $greet is set on globalProperties.

According to variable_tracker, what is the value of app.config.globalProperties.$greet after step 6?

A undefined

B Function available globally

C null

D String 'Hello!'

💡 Hint

Look at the row for app.config.globalProperties.$greet in variable_tracker after step 6.

If we skip calling app.use(MyPlugin), what happens to the plugin features?

A Plugin features are not registered

B They are still available globally

C install function runs automatically

D App crashes

💡 Hint

Refer to key_moments about the importance of app.use and execution_table step 6.

Concept Snapshot

Vue Plugin Creation Basics:
- Create an object with an install(app) method.
- Inside install, add global features via app.config.globalProperties or components.
- Export the plugin object.
- Import and register with app.use(plugin) in main.js.
- Plugin features become globally accessible in all components.

Full Transcript

To create a Vue plugin, start by making an object with an install function. This install function receives the app instance. Inside it, you add global properties or components to the app, for example, adding a greeting function to app.config.globalProperties. Then export this plugin object. In your main app file, import the plugin and call app.use(plugin). This runs the install function and registers your plugin features globally. Components can then use these features easily. If you forget to call app.use, the plugin won't activate. This process helps you share reusable features across your Vue app.

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