Plugin installation and usage in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue 3 plugin usage?

Consider a Vue 3 app where a plugin adds a global property $greet that returns a greeting string. What will the component render?

Vue

import { createApp } from 'vue';

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

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

app.use(greetPlugin);

// Mounting omitted for brevity

A <div>Error: $greet is not a function</div>

B <div>undefined</div>

C <div>[object Object]</div>

D <div>Hello from plugin!</div>

💡 Hint

Remember that plugins can add global properties accessible in components.

The plugin adds $greet as a global property returning a string. The component calls this.$greet() in computed, so it renders the returned string.

📝 Syntax

intermediate

Which option correctly installs a Vue 3 plugin?

Given a plugin object myPlugin, which code correctly installs it in a Vue 3 app?

Vue

import { createApp } from 'vue';
import myPlugin from './myPlugin';

const app = createApp({});

A app.install(myPlugin);

B app.use(myPlugin);

C app.plugin(myPlugin);

D app.addPlugin(myPlugin);

💡 Hint

Vue 3 apps use a specific method to add plugins.

The correct method to install a plugin in Vue 3 is app.use(plugin). Other methods do not exist and cause errors.

🔧 Debug

advanced

Why does this plugin usage cause an error?

Given this plugin and component code, why does accessing this.$foo cause an error?

Vue

const fooPlugin = {
  install(app) {
    app.config.globalProperties.$foo = 'bar';
  }
};

const app = Vue.createApp({
  template: `<div>{{ $foo }}</div>`
});

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

A Because the component tries to access $foo directly in template without this context

B Because $foo is a string, not a function, and template expects a function

C Because the plugin was installed after app creation, so $foo is undefined in template

D Because globalProperties must be accessed via a method, not directly

💡 Hint

Think about how Vue templates access properties on the component instance.

In Vue templates, properties added to globalProperties are accessible via this. Using {{$foo}} works because Vue binds this context. The code is correct, so the error is likely from something else. But here, the plugin adds a string, which is accessible. The error is a trick: the code is valid and should render 'bar'. If an error occurs, it might be from missing import or Vue namespace usage.

❓ state_output

advanced

What is the value of count after plugin modifies it?

A plugin adds a reactive property count to the app's globalProperties and increments it. What is the final value of count?

Vue

import { createApp, reactive } from 'vue';

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

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

const app = createApp({
  mounted() {
    this.$count.count++;
  }
});

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

A 2

B 1

C 0

D undefined

💡 Hint

Consider when the plugin increments and when the component increments the count.

The plugin increments count once during install (0 to 1). Then the component increments it again on mounted (1 to 2). So final count is 2.

🧠 Conceptual

expert

Which statement about Vue 3 plugin installation order is true?

Consider multiple plugins installed in a Vue 3 app. Which statement about their installation order and effect is correct?

A All plugins run simultaneously during app creation, so order does not matter

B Plugins are installed in reverse order of <code>app.use()</code> calls, so first called runs last

C Plugins are installed in the order <code>app.use()</code> is called, and later plugins can override earlier ones

D Plugins must be installed before app creation to take effect

💡 Hint

Think about how JavaScript executes sequential code.

Vue installs plugins in the order app.use() is called. Later plugins can override properties or methods added by earlier plugins.