Système de plugins : app.use()
Créez un plugin Vue sous forme d’objet doté d’une méthode install, enregistrez des composants et des directives globaux et fournissez des valeurs à l’ensemble de l’application.
Système de plugins : app.use() est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce qu'un plugin Vue ?
Un plugin est une fonctionnalité réutilisable que vous installez dans une application Vue : composants globaux, directives, valeurs fournies, assistants de type prototype (routeur, i18n, pinia). Les plugins permettent aux bibliothèques de s'intégrer à Vue.
Structure d'un plugin
Un plugin est un objet doté d'une méthode install(app, options), ou une fonction qui joue le rôle de méthode d'installation.
// MyPlugin.ts
export default {
install(app, options) {
// Configure things here
}
};Installer un plugin
Appelez app.use(plugin, options) sur l'instance de l'application Vue.
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');Cas d'utilisation d'un plugin : composants globaux
Enregistrez globalement de nombreux petits composants afin que les consommateurs n'aient pas à importer chacun d'eux.
// 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);Cas d'utilisation d'un plugin : directives globales
Enregistrez les directives personnalisées une seule fois pour les rendre disponibles dans toute l'application.
export default {
install(app) {
app.directive('focus', { mounted: (el) => el.focus() });
app.directive('click-outside', clickOutsideDirective);
}
};Cas d'utilisation d'un plugin : provide()
Fournissez des valeurs à l'échelle de l'application afin que n'importe quel composant puisse les injecter : c'est courant pour les clients d'API et la 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)!;Plugins réels : Pinia, Vue Router, i18n
Les principales bibliothèques de l'écosystème Vue sont des 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({ /* ... */ }));Options des plugins
Les plugins acceptent des options pour configurer leur comportement au moment de l'installation.
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');
}Extension des types TypeScript
Pour les globalProperties ou les assistants d'injection, étendez les types de Vue afin que les consommateurs bénéficient de la complétion automatique.
// types.d.ts
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$api: ApiClient;
}
}
// In plugin:
install(app) {
app.config.globalProperties.$api = new ApiClient();
}globalProperties — Ancien modèle
app.config.globalProperties.$foo expose une valeur sous la forme this.$foo dans les composants et les modèles utilisant l'API Options. L'API Composition privilégie inject().
Installation idempotente
Ne provoquez pas de plantage en cas de double installation : vérifiez un indicateur ou utilisez des clés provide fondées sur des symboles, qui éliminent naturellement les doublons.
Écrire votre propre plugin
Si plusieurs applications réutilisent une configuration (encapsulateur d'authentification, configuration de télémétrie, tokens de conception), regroupez-les dans un plugin. Publier sur npm avec une signature install(app, options) claire est la manière idiomatique de Vue de distribuer une fonctionnalité réutilisable.
Vérification rapide
Quelle méthode appelez-vous sur une instance d'application Vue pour installer un plugin ?
Récapitulatif : plugins Vue
Plugin = objet avec install(app, options). Installez-le via app.use(plugin, options). Utilisez-le pour enregistrer des composants et des directives globaux, fournir des valeurs et configurer des bibliothèques. Pinia, Vue Router et i18n sont tous des plugins. Étendez ComponentCustomProperties pour les propriétés préfixées par $. Rendez install idempotente.
Questions Fréquemment Posées
La leçon « Système de plugins : app.use() » est-elle gratuite ?
Oui — le texte complet de « Système de plugins : app.use() » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Système de plugins : app.use() » ?
Créez un plugin Vue sous forme d’objet doté d’une méthode install, enregistrez des composants et des directives globaux et fournissez des valeurs à l’ensemble de l’application. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Système de plugins : app.use() » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- provide() et inject() pour l’injection de dépendances
- Composants asynchrones et Suspense
- Directives personnalisées
- Système de plugins : app.use()