Vue.js course · Module 14: Directives & Plugins
Plugins - Basics
In this lesson3
In the NOVA LAB Command Center, each subsystem (navigation, communication, diagnostics) is a separate module. In Vue, such modules are Plugins - a way to add global functionality to an application.
What Is a Plugin?
A plugin is an object with an install() method or a plain function. It is invoked by app.use():
1// Plugin as an object
2const myPlugin = {
3 install(app, options) {
4 // extend the application here
5 }
6}
7
8// Plugin as a function
9function myPlugin(app, options) {
10 // also valid
11}
12
13// Registration
14const app = createApp(App)
15app.use(myPlugin, { /* options */ })What Can a Plugin Do?
In the install() method, you have access to the app instance and can:
1. Register Global Components
1const UIPlugin = {
2 install(app) {
3 app.component('NovaButton', {
4 template: `<button class="nova-btn"><slot /></button>`
5 })
6 app.component('NovaCard', {
7 template: `<div class="nova-card"><slot /></div>`
8 })
9 }
10}2. Register Global Directives
1const DirectivesPlugin = {
2 install(app) {
3 app.directive('focus', {
4 mounted(el) { el.focus() }
5 })
6 app.directive('highlight', (el) => {
7 el.style.backgroundColor = '#00ff88'
8 })
9 }
10}3. Share Data via provide/inject
1const ConfigPlugin = {
2 install(app, options) {
3 app.provide('config', {
4 apiUrl: options.apiUrl || 'https://api.novalab.mars',
5 theme: options.theme || 'dark',
6 version: '2.0.87'
7 })
8 }
9}
10
11// Usage
12app.use(ConfigPlugin, {
13 apiUrl: 'https://api.novalab.mars/v2',
14 theme: 'nova-dark'
15})In any component:
1<script setup>
2import { inject } from 'vue'
3
4const config = inject('config')
5</script>
6
7<template>
8 <p>API: {{ config.apiUrl }}</p>
9 <p>Version: {{ config.version }}</p>
10</template>4. Add Global Properties
1const UtilsPlugin = {
2 install(app) {
3 app.config.globalProperties.$formatDate = (date) => {
4 return new Date(date).toLocaleDateString('en-US')
5 }
6 }
7}Plugin Options
The second parameter of install() is the options passed through app.use():
1const LoggerPlugin = {
2 install(app, options = {}) {
3 const level = options.level || 'info'
4 const prefix = options.prefix || '[NOVA]'
5
6 app.provide('logger', {
7 info: (msg) => level !== 'error' && console.log(prefix, msg),
8 warn: (msg) => level !== 'error' && console.warn(prefix, msg),
9 error: (msg) => console.error(prefix, msg)
10 })
11 }
12}
13
14app.use(LoggerPlugin, {
15 level: 'info',
16 prefix: '[NOVA LAB]'
17})Code for this lesson: App.vue
1<script setup>
2import { inject } from 'vue'
3
4const config = inject('config')
5const logger = inject('logger')
6</script>
7
8<template>
9 <div class="nova-lab">
10 <h1>Plugins - Podstawy</h1>
11
12 <section class="section">
13 <h2>Config Plugin (provide/inject)</h2>
14 <div class="info-grid">
15 <div class="info-item">
16 <span class="label">API URL:</span>
17 <span class="value">{{ config.apiUrl }}</span>
18 </div>
19 <div class="info-item">
20 <span class="label">Theme:</span>
21 <span class="value">{{ config.theme }}</span>
22 </div>
23 <div class="info-item">
24 <span class="label">Version:</span>
25 <span class="value">{{ config.version }}</span>
26 </div>
27 <div class="info-item">
28 <span class="label">Station:</span>
29 <span class="value">{{ config.station }}</span>
30 </div>
31 </div>
32 </section>
33
34 <section class="section">
35 <h2>Logger Plugin</h2>
36 <div class="btn-row">
37 <button @click="logger.info('System operational')" class="btn">Log Info</button>
38 <button @click="logger.warn('Low oxygen level')" class="btn warn">Log Warn</button>
39 <button @click="logger.error('Engine failure!')" class="btn error">Log Error</button>
40 </div>
41 <p class="hint">Open the browser console (F12) to see the logs</p>
42 </section>
43
44 <section class="section">
45 <h2>Global directive from plugin</h2>
46 <input v-focus placeholder="Auto-focus from plugin" class="input" />
47 </section>
48 </div>
49</template>
50
51<style scoped>
52.nova-lab {
53 background: #0a0e27;
54 color: #c0c0c0;
55 min-height: 100vh;
56 padding: 20px;
57 font-family: monospace;
58}
59h1 { color: #00ff88; margin-bottom: 20px; }
60h2 { color: #00b4d8; font-size: 16px; margin-bottom: 10px; }
61.section {
62 background: rgba(0, 180, 216, 0.05);
63 border: 1px solid rgba(0, 180, 216, 0.2);
64 padding: 15px;
65 border-radius: 8px;
66 margin-bottom: 15px;
67}
68.info-grid { display: grid; gap: 8px; }
69.info-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(0,180,216,0.1); }
70.label { color: #888; }
71.value { color: #00ff88; }
72.btn-row { display: flex; gap: 10px; }
73.btn {
74 background: rgba(0,255,136,0.15);
75 color: #00ff88;
76 border: 1px solid #00ff88;
77 padding: 8px 16px;
78 border-radius: 6px;
79 cursor: pointer;
80 font-family: monospace;
81}
82.btn.warn { color: #f39c12; border-color: #f39c12; background: rgba(243,156,18,0.15); }
83.btn.error { color: #e74c3c; border-color: #e74c3c; background: rgba(231,76,60,0.15); }
84.input {
85 background: rgba(0,255,136,0.05);
86 border: 1px solid #00ff88;
87 color: #00ff88;
88 padding: 10px;
89 border-radius: 6px;
90 font-family: monospace;
91 width: 100%;
92 box-sizing: border-box;
93}
94.input:focus { outline: none; box-shadow: 0 0 8px rgba(0,255,136,0.3); }
95.hint { color: #666; font-size: 12px; margin-top: 8px; }
96</style>Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. What method must a Vue plugin object have?
2. How do you install a plugin in a Vue application?
These are 2 of 3 questions for this lesson. Solve the rest in the game.
Hands-on tasks in the game
- Horizontal ordering
Arrange the correct app.use call with a plugin and options:
- Code editor
Use app.provide in the install method and inject in the component.
- Vertical ordering
Arrange the steps for creating and using a Vue plugin in the correct order:
- Click in order
Arrange the correct signature of the plugin install method: