Cours Vue.js · Module 14: Directives et plugins
Plugins - les bases
Dans cette leçon3
Au Centre de commandement de NOVA LAB, chaque sous-système (navigation, communication, diagnostic) est un module distinct. Dans Vue, de tels modules sont des plugins - une façon d'ajouter des fonctionnalités globales à une application.
Qu'est-ce qu'un plugin ?
Un plugin est un objet doté d'une méthode install(), ou bien une simple fonction. Il est appelé par app.use() :
1// Plugin sous forme d'objet
2const myPlugin = {
3 install(app, options) {
4 // étends l'application ici
5 }
6}
7
8// Plugin sous forme de fonction
9function myPlugin(app, options) {
10 // également valide
11}
12
13// Enregistrement
14const app = createApp(App)
15app.use(myPlugin, { /* options */ })Que peut faire un plugin ?
Dans la méthode install(), tu as accès à l'instance app et tu peux :
1. Enregistrer des composants globaux
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. Enregistrer des directives globales
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. Partager des données 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// Utilisation
12app.use(ConfigPlugin, {
13 apiUrl: 'https://api.novalab.mars/v2',
14 theme: 'nova-dark'
15})Dans n'importe quel composant :
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. Ajouter des propriétés globales
1const UtilsPlugin = {
2 install(app) {
3 app.config.globalProperties.$formatDate = (date) => {
4 return new Date(date).toLocaleDateString('fr-FR')
5 }
6 }
7}Options d'un plugin
Le second paramètre d'install() correspond aux options passées via 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 de cette leçon : 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 - Les bases</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">Ouvre la console du navigateur (F12) pour voir les logs</p>
42 </section>
43
44 <section class="section">
45 <h2>Directive globale depuis un plugin</h2>
46 <input v-focus placeholder="Auto-focus depuis le 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>Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quelle méthode un objet plugin Vue doit-il posséder ?
2. Comment installer un plugin dans une application Vue ?
Voici 2 des 3 questions de cette leçon. Réponds aux autres dans le jeu.
Tâches pratiques dans le jeu
- Tri horizontal
Ordonne l'appel app.use correct avec un plugin et des options :
- Éditeur de code
Utilise app.provide dans la méthode install et inject dans le composant.
- Tri vertical
Ordonne les étapes de création et d'utilisation d'un plugin Vue dans le bon ordre :
- Clique dans l'ordre
Ordonne la signature correcte de la méthode install d'un plugin :