Kurs Vue.js · Moduł 14: Dyrektywy i pluginy
Plugins - Podstawy
W tej lekcji3
W Centrum Dowodzenia NOVA LAB każdy podsystem (nawigacja, komunikacja, diagnostyka) to oddzielny moduł. W Vue takie moduły to Plugins - sposob na dodawanie globalnej funkcjonalności do aplikacji.
Czym jest Plugin?
Plugin to obiekt z metoda install() lub zwykła funkcja. Jest wywoływany przez app.use():
1// Plugin jako obiekt
2const myPlugin = {
3 install(app, options) {
4 // tutaj rozszerzamy aplikację
5 }
6}
7
8// Plugin jako funkcja
9function myPlugin(app, options) {
10 // również poprawne
11}
12
13// Rejestracja
14const app = createApp(App)
15app.use(myPlugin, { /* opcje */ })Co może robić Plugin?
W metodzie install() masz dostęp do instancji app i możesz:
1. Rejestrować globalne komponenty
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. Rejestrować globalne dyrektywy
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. Udostępniać dane przez 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// Użycie
12app.use(ConfigPlugin, {
13 apiUrl: 'https://api.novalab.mars/v2',
14 theme: 'nova-dark'
15})W dowolnym komponencie:
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>Wersja: {{ config.version }}</p>
10</template>4. Dodawać globalne właściwości
1const UtilsPlugin = {
2 install(app) {
3 app.config.globalProperties.$formatDate = (date) => {
4 return new Date(date).toLocaleDateString('pl-PL')
5 }
6 }
7}Opcje pluginu
Drugi parametr install() to opcje przekazane przez 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})Kod do tej lekcji: 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 operacyjny')" class="btn">Log Info</button>
38 <button @click="logger.warn('Niski poziom tlenu')" class="btn warn">Log Warn</button>
39 <button @click="logger.error('Awaria silnika!')" class="btn error">Log Error</button>
40 </div>
41 <p class="hint">Otworz konsole przegladarki (F12) zeby zobaczyc logi</p>
42 </section>
43
44 <section class="section">
45 <h2>Globalna dyrektywa z pluginu</h2>
46 <input v-focus placeholder="Auto-focus z pluginu" 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>Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Jaką metodę musi posiadać obiekt pluginu Vue?
2. Jak zainstalować plugin w aplikacji Vue?
To 2 z 3 pytań do tej lekcji. Pozostałe rozwiążesz w grze.
Zadania praktyczne w grze
- Układanie w poziomie
Ułóż poprawne wywołanie app.use z pluginem i opcjami:
- Edytor kodu
Użyj app.provide w metodzie install i inject w komponencie.
- Układanie w pionie
Ułóż kroki tworzenia i używania pluginu Vue w poprawnej kolejności:
- Klikanie w kolejności
Ułóż poprawną sygnaturę metody install pluginu: