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.

Practice

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

easy

A. To add reusable features or functionality globally

B. To write CSS styles for components

C. To create new Vue components manually

D. To replace the Vue router

Solution

1. Step 1: Understand what plugins do in Vue

   Plugins provide reusable features or functionality that can be used across the whole app.

2. Step 2: Compare options

   Options B, C, and D describe tasks unrelated to plugins' main purpose.

3. Final Answer:

   To add reusable features or functionality globally -> Option A

4. Quick Check:

   Plugins add reusable features = A [OK]

Hint: Plugins add global features to Vue apps [OK]

Common Mistakes:

• Thinking plugins are for styling
• Confusing plugins with components
• Assuming plugins replace routing

2. Which is the correct way to install a plugin named MyPlugin in a Vue 3 app?

easy

A. usePlugin(app, MyPlugin)

B. app.use(MyPlugin)

C. app.install(MyPlugin)

D. Vue.use(MyPlugin)

Solution

1. Step 1: Recall Vue 3 plugin installation syntax

   In Vue 3, plugins are installed by calling app.use() with the plugin.

2. Step 2: Check options

   Vue.use(MyPlugin) (Vue.use(MyPlugin)) is Vue 2 syntax. Options A and C use invalid methods. app.use(MyPlugin) is correct.

3. Final Answer:

   app.use(MyPlugin) -> Option B

4. Quick Check:

   Vue 3 uses app.use() = D [OK]

Hint: Use app.use() to install plugins in Vue 3 [OK]

Common Mistakes:

• Using Vue.use() which is Vue 2 syntax
• Calling app.install() which does not exist
• Trying custom functions like usePlugin()

3. Given this plugin code and usage:

const MyPlugin = {
  install(app, options) {
    app.config.globalProperties.$greet = () => `Hello, ${options.name}!`;
  }
};

const app = Vue.createApp({});
app.use(MyPlugin, { name: 'Alice' });
app.mount('#app');

// In a component template: {{ $greet() }}

What will be displayed inside the component?

medium

A. Error: $greet is not a function

B. Hello, undefined!

C. Hello, Alice!

D. Hello, !

Solution

1. Step 1: Understand plugin install method

   The plugin adds a global method $greet that returns 'Hello, ' plus the name from options.

2. Step 2: Check how plugin is used

   The plugin is installed with options { name: 'Alice' }, so $greet returns 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Plugin method uses options.name = Alice [OK]

Hint: Plugin options pass data used in global methods [OK]

Common Mistakes:

• Ignoring options parameter
• Assuming $greet is undefined
• Forgetting to use app.use() with options

4. What is wrong with this plugin installation code?

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

medium

A. Plugin must be installed before mounting the app

B. app.use() requires a second argument

C. Vue.createApp() is missing parentheses

D. app.mount() should be called twice

Solution

1. Step 1: Check plugin installation order

   Plugins must be installed before calling app.mount() to ensure plugin features are available.

2. Step 2: Analyze given code

   The code mounts the app first, then installs the plugin, which is too late.

3. Final Answer:

   Plugin must be installed before mounting the app -> Option A

4. Quick Check:

   Install plugins before mount = B [OK]

Hint: Always call app.use() before app.mount() [OK]

Common Mistakes:

• Installing plugins after mounting
• Thinking app.use() always needs options
• Confusing createApp syntax

5. You want to create a plugin that globally registers a component MyButton and adds a global method $log to log messages. Which is the correct way to write the plugin's install method?

hard

A. install(app) { app.registerComponent('MyButton', MyButton); app.global.$log = msg => console.log(msg); }

B. install() { Vue.component('MyButton', MyButton); Vue.prototype.$log = msg => console.log(msg); }

C. install(app) { app.addComponent('MyButton', MyButton); app.globalProperties.log = msg => console.log(msg); }

D. install(app) { app.component('MyButton', MyButton); app.config.globalProperties.$log = msg => console.log(msg); }

Solution

1. Step 1: Recall correct Vue 3 plugin API

   Use app.component() to register components and app.config.globalProperties to add global methods.

2. Step 2: Check each option

   install(app) { app.component('MyButton', MyButton); app.config.globalProperties.$log = msg => console.log(msg); } uses correct methods and property names. Options A, B, and D use outdated or incorrect APIs.

3. Final Answer:

   install(app) { app.component('MyButton', MyButton); app.config.globalProperties.$log = msg => console.log(msg); } -> Option D

4. Quick Check:

   Use app.component and app.config.globalProperties = C [OK]

Hint: Use app.component and app.config.globalProperties in install [OK]

Common Mistakes:

• Using Vue 2 global API like Vue.prototype
• Wrong method names like registerComponent
• Missing $ prefix on globalProperties method