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.