0Pricing
Frontend Academy · Lesson

Plugin System: app.use()

Create a Vue plugin as an object with an install method, register global components, directives, and provide values to the entire application.

Plugin System: app.use() is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. 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 Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Vue Plugin?

A plugin is reusable functionality you install into a Vue app: global components, directives, provide values, prototype-style helpers (router, i18n, pinia). Plugins are how libraries integrate with Vue.

Plugin Shape

A plugin is an object with an install(app, options) method — or a function that acts as the install method.

// MyPlugin.ts
export default {
  install(app, options) {
    // Configure things here
  }
};

Installing a Plugin

Call app.use(plugin, options) on the Vue app instance.

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

const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');

Plugin Use Case: Global Components

Register many small components globally so consumers don't have to import each one.

// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';

export default {
  install(app) {
    app.component('IconChevron', IconChevron);
    app.component('IconClose', IconClose);
    app.component('IconUser', IconUser);
  }
};

// main.ts
app.use(iconPack);

Plugin Use Case: Global Directives

Register custom directives once, available app-wide.

export default {
  install(app) {
    app.directive('focus', { mounted: (el) => el.focus() });
    app.directive('click-outside', clickOutsideDirective);
  }
};

Plugin Use Case: provide()

Provide app-wide values that any component can inject — common for API clients and configuration.

import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';

export const ApiKey: InjectionKey<ApiClient> = Symbol('api');

export default {
  install(app, { baseURL }) {
    const api = new ApiClient({ baseURL });
    app.provide(ApiKey, api);
  }
};

// Anywhere:
const api = inject(ApiKey)!;

Real Plugins: Pinia, Vue Router, i18n

The major Vue ecosystem libraries are plugins.

import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));

Plugin Options

Plugins accept options to configure their behaviour at install time.

app.use(MyPlugin, {
  apiUrl: 'https://api.example.com',
  enableLogs: true,
  theme: 'dark'
});

// Inside the plugin:
install(app, options) {
  if (options.enableLogs) console.log('plugin installed');
}

TypeScript Augmentation

For globalProperties or injection helpers, augment Vue's types so consumers get autocompletion.

// types.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: ApiClient;
  }
}

// In plugin:
install(app) {
  app.config.globalProperties.$api = new ApiClient();
}

globalProperties — Old Pattern

app.config.globalProperties.$foo exposes a value as this.$foo in Options API components and templates. Composition API prefers inject().

Idempotent install

Don't crash if installed twice — check a flag or use Symbol-based provide keys that naturally deduplicate.

Writing Your Own Plugin

If multiple apps reuse a config (auth wrapper, telemetry setup, design tokens), package them as a plugin. Publishing to npm with a clean install(app, options) signature is the Vue-idiomatic way to ship reusable functionality.

Quick Check

What method do you call on a Vue app instance to install a plugin?

Recap: Vue Plugins

Plugin = object with install(app, options). Install via app.use(plugin, options). Use to register global components, directives, provide values, and configure libraries. Pinia, Vue Router, i18n are all plugins. Augment ComponentCustomProperties for $-prefixed properties. Keep install idempotent.

Frequently asked questions

Is the “Plugin System: app.use()” lesson free?

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

What will I learn in “Plugin System: app.use()”?

Create a Vue plugin as an object with an install method, register global components, directives, and provide values to the entire application. You practise Frontend 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 Frontend Academy?

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

How long does the “Plugin System: app.use()” 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 Frontend Academy lesson?

Yes. Every Frontend 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

  1. provide() and inject() for Dependency Injection
  2. Async Components and Suspense
  3. Custom Directives
  4. Plugin System: app.use()
← Back to Frontend Academy