Plugin creation basics in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue plugin usage?

Consider this Vue 3 plugin that adds a global property. What will be the output when the component uses this.$greet()?

Vue

import { createApp } from 'vue';

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

const app = createApp({
  template: '<div>{{ greetMessage }}</div>',
  data() {
    return { greetMessage: '' };
  },
  mounted() {
    this.greetMessage = this.$greet();
  }
});

app.use(greetPlugin);
app.mount('#app');

A Error: this.$greet is not a function

B '' (empty string)

C undefined

D Hello from plugin!

💡 Hint

Remember that app.config.globalProperties adds properties accessible via this inside components.

The plugin adds $greet as a global property. Inside the component, this.$greet() calls that function, returning 'Hello from plugin!'.

📝 Syntax

intermediate

Which option correctly defines a Vue 3 plugin?

Which of the following options correctly defines a Vue 3 plugin that adds a global method $log to all components?

A const logPlugin = { install(app) { app.config.globalProperties.$log = (msg) => console.log(msg); } };

B const logPlugin = () => { app.config.globalProperties.$log = (msg) => console.log(msg); };

C const logPlugin = { install() { this.$log = (msg) => console.log(msg); } };

D const logPlugin = { install(app) { app.$log = (msg) => console.log(msg); } };

💡 Hint

The install method receives the app instance as an argument.

Option A correctly defines an object with an install method that receives app and sets app.config.globalProperties.$log. Other options misuse the app instance or context.

🔧 Debug

advanced

Why does this Vue plugin fail to add a global property?

Given this plugin code, why does this.$notify() inside a component cause an error?

Vue

const notifyPlugin = {
  install() {
    app.config.globalProperties.$notify = () => alert('Notify!');
  }
};

A The install method lacks the app parameter, so app is undefined causing an error.

B Global properties must be added to app.globalProperties, not app.config.globalProperties.

C The plugin must return a function, not an object with install method.

D The alert function is not allowed inside plugins.

💡 Hint

Check the install method signature and how it uses the app instance.

The install method must receive the app instance as a parameter. Without it, app is undefined, so accessing app.config causes an error.

❓ state_output

advanced

What is the value of this.$count.value after plugin usage?

This plugin adds a reactive global property $count. What will this.$count.value be inside a component after mounting?

Vue

import { createApp, reactive } from 'vue';

const countState = reactive({ value: 0 });

const countPlugin = {
  install(app) {
    app.config.globalProperties.$count = countState;
  }
};

const app = createApp({
  mounted() {
    this.$count.value++;
  },
  template: '<div>{{ $count.value }}</div>'
});

app.use(countPlugin);
app.mount('#app');

A undefined

B 0

C 1

D Error: Cannot read property 'value' of undefined

💡 Hint

The plugin adds a reactive object as a global property. The component increments its value on mount.

The reactive object countState starts with value 0. The component increments this.$count.value by 1 on mount, so the displayed value is 1.

🧠 Conceptual

expert

Which statement about Vue 3 plugins is TRUE?

Choose the correct statement about Vue 3 plugin creation and usage.

A A plugin must always be an object with an install method; functions are not allowed.

B Plugins can add global properties accessible via <code>this</code> inside components using <code>app.config.globalProperties</code>.

C Plugins automatically register components globally without explicit registration code.

D Plugins can only be used before mounting the app; using them after mounting has no effect.

💡 Hint

Think about how plugins add features and when they must be applied.

Option B is true: plugins add global properties via app.config.globalProperties. Option B is false because plugins can be functions or objects. Option B is false; components must be registered explicitly. Option B is false; plugins must be used 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