Vue Academy · Lesson

Plugin Development

Create installable Vue plugins.

Plugin Development is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Plugin?

A Vue plugin packages app-level functionality you can install in one call: global components, directives, properties, or third-party integrations. Plugins are how libraries like Vue Router and Pinia plug into your app.

The install Function

A plugin is an object with an install method (or simply a function). Vue calls it with the app instance and any options you pass.

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

Installing a Plugin

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

Registering Global Components

Inside install, register components globally so every part of the app can use them without importing.

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

Registering Global Directives

A plugin can also register directives globally, bundling related DOM behaviors into one installable package.

export const focusPlugin = {
  install(app) {
    app.directive("focus", {
      mounted(el) { el.focus() }
    })
  }
}

Providing Global Properties

Use app.config.globalProperties to add a property available on every component instance, handy for utilities like a formatter or HTTP client.

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

Using provide for Composition API

For Composition API friendliness, use app.provide in your plugin so components can inject the value in setup.

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

Passing Options

The options argument lets users configure your plugin. Read it inside install to customize behavior.

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

A Function Plugin

A plugin can be a plain function instead of an object with install; Vue treats the function itself as the installer.

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

A Complete Plugin Example

A real plugin often combines several of these: registering a component, a directive, and a global property in one install function.

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

When to Build a Plugin

Reach for a plugin when functionality is truly app-wide: a UI kit, an HTTP layer, i18n, or analytics. For logic local to a feature, a composable is usually the better, lighter choice.

Quick Check

Test your knowledge of plugins.

Recap

A plugin exposes an install(app, options) function and is registered with app.use. Inside install you can register global components and directives, add global properties via config.globalProperties, and provide values for injection. Use plugins for app-wide features; use composables for local logic. Next you will structure a scalable project.

Frequently asked questions

Is the “Plugin Development” lesson free?

Yes — the full text of “Plugin Development” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Plugin Development”?

Create installable Vue plugins. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Plugin Development” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy