Plugin installation and usage in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Vue plugin?

A Vue plugin is a tool or library that adds global features or functionality to a Vue app, like new components, directives, or methods.

beginner

How do you install a Vue plugin globally?

You install a Vue plugin globally by importing it and then using app.use(plugin) in your main app file before mounting the app.

beginner

What is the purpose of the app.use() method in Vue?

app.use() tells Vue to add a plugin to the app, so the plugin's features become available everywhere in your app.

intermediate

Can Vue plugins add global components? How?

Yes, plugins can add global components by registering them inside the plugin's install function using app.component().

beginner

What is the difference between a plugin and a component in Vue?

A component is a reusable UI piece you use in templates. A plugin adds global features or tools to the whole app, not just UI parts.

How do you add a Vue plugin to your app?

A Use <code>app.use(plugin)</code> before mounting the app

B Import the plugin inside each component

C Add the plugin to the <code>components</code> option

D Call <code>plugin.install()</code> manually

You add a Vue plugin globally by calling app.use(plugin) before mounting the app.

Where do you usually install Vue plugins?

A In the CSS files

B Inside the <code>setup()</code> of each component

C In the router configuration

D In the main app file before mounting

Plugins are installed in the main app file before mounting to make their features available app-wide.

What can Vue plugins add to your app?

A Global components, directives, or methods

B Only CSS styles

C Only local components

D Only HTML templates

Vue plugins can add global components, directives, or methods to enhance the app.

If a plugin registers a global component, how do you use it?

A Import the component in every file

B Use the component tag anywhere in your templates

C Call it inside <code>setup()</code> only

D You cannot use global components

Global components registered by plugins can be used anywhere in your templates without importing.

What is the first step to use a third-party Vue plugin?

A Add it to your CSS

B Write your own plugin

C Install it via npm or yarn

D Create a new Vue app

You first install the plugin package using npm or yarn before importing and using it.

Explain how to install and use a Vue plugin in a new Vue 3 app.

Think about the main app setup file and the app.use method.

Describe the benefits of using plugins in Vue applications.

Consider how plugins help share functionality across the app.

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