Plugin creation basics in Vue - Performance & Optimization

Performance: Plugin creation basics

MEDIUM IMPACT

Plugin creation affects initial app load time and runtime performance by adding extra code and possibly global reactive state.

Adding global functionality to a Vue app via a plugin

Vue

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

const app = createApp(App);

// Lazy load plugin only when needed
async function loadPlugin() {
  const { default: MyPlugin } = await import('./my-plugin');
  app.use(MyPlugin);
}

loadPlugin();
app.mount('#app');

Loads plugin code asynchronously after initial render, reducing blocking time and initial bundle size.

📈 Performance GainReduces blocking time by 100-200ms; initial bundle smaller by 50-100kb

Adding global functionality to a Vue app via a plugin

Vue

import { createApp } from 'vue';
import MyPlugin from './my-plugin';

const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');

// MyPlugin registers many global components and heavy logic eagerly

The plugin loads all features and components immediately, increasing bundle size and delaying app startup.

📉 Performance CostBlocks rendering for 100-200ms depending on plugin size; increases initial bundle by 50-100kb

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager plugin registration with many global components	High (many nodes registered)	Multiple reflows during mount	High paint cost due to many components	[X] Bad
Lazy-loaded plugin with selective global registration	Low (only needed nodes)	Single reflow on mount	Lower paint cost	[OK] Good

Rendering Pipeline

When a plugin is registered, Vue processes its global components, directives, or mixins, which can trigger style recalculations and layout if components are mounted immediately.

→Script Evaluation

→Style Calculation

→Layout

→Paint

⚠️ BottleneckScript Evaluation and Style Calculation due to large plugin code and global registrations

Core Web Vital Affected

LCP

Plugin creation affects initial app load time and runtime performance by adding extra code and possibly global reactive state.

Optimization Tips

1Avoid registering large plugins eagerly to keep initial load fast.

2Lazy load plugins when possible to reduce blocking time.

3Register only needed global components to minimize style recalculations.

Performance Quiz - 3 Questions

What is a main performance risk when registering a Vue plugin eagerly at app startup?

A It causes CSS to not load properly

B It increases initial bundle size and blocks rendering longer

C It disables browser caching

D It prevents JavaScript from running

DevTools: Performance

How to check: Record page load and interaction; look for long scripting tasks and style recalculations during plugin registration

What to look for: Long scripting blocks delaying first contentful paint and multiple style recalculations indicating heavy plugin impact

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