Vue Academy · Leçon

Développement de plugins

Créez des plugins Vue installables.

Développement de plugins est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce qu'une extension ?

Une extension Vue regroupe des fonctionnalités au niveau de l'app que vous pouvez installer en un seul appel : composants globaux, directives, propriétés ou intégrations tierces. Les extensions permettent à des bibliothèques comme Vue Router et Pinia de s'intégrer à votre app.

La fonction install

Une extension est un objet doté d'une méthode install (ou simplement une fonction). Vue l'appelle avec l'instance app et les options que vous transmettez.

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

Installer une extension

Enregistrez une extension avec app.use, en transmettant éventuellement un objet d'options. Vue exécute la fonction d'installation une seule fois.

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

Enregistrer des composants globaux

Dans la fonction d'installation, enregistrez les composants globalement afin que toutes les parties de l'app puissent les utiliser sans les importer.

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

Enregistrer des directives globales

Une extension peut également enregistrer des directives globalement, en regroupant des comportements du DOM associés dans un seul paquet installable.

export const focusPlugin = {
  install(app) {
    app.directive("focus", {
      mounted(el) { el.focus() }
    })
  }
}

Fournir des propriétés globales

Utilisez app.config.globalProperties pour ajouter une propriété disponible sur chaque instance de composant, ce qui est pratique pour des utilitaires comme un formateur ou un client HTTP.

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

Utiliser provide avec l’API de composition

Pour faciliter l’utilisation de l’API de composition, utilisez app.provide dans votre extension afin que les composants puissent inject la valeur lors de la configuration.

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

Transmettre des options

L’argument options permet aux utilisateurs de configurer votre extension. Lisez cet argument dans la fonction d’installation pour personnaliser le comportement.

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

Une extension sous forme de fonction

Une extension peut être une simple fonction plutôt qu’un objet doté d’une fonction d’installation ; Vue considère alors la fonction elle-même comme l’installateur.

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

Un exemple complet d’extension

Une véritable extension combine souvent plusieurs de ces éléments : l’enregistrement d’un component, d’une directive et d’une propriété globale dans une seule fonction d’installation.

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

Quand créer une extension

Choisissez une extension lorsque la fonctionnalité concerne réellement toute l’application : un kit d’interface utilisateur, une couche HTTP, l’internationalisation ou l’analyse de données. Pour une logique locale à une fonctionnalité, une fonction composable est généralement le choix le plus adapté et le plus léger.

Vérification rapide

Testez vos connaissances sur les extensions.

Récapitulatif

Une extension expose une fonction install(app, options) et est enregistrée avec app.use. Dans la fonction d’installation, vous pouvez enregistrer des composants et des directives globaux, ajouter des propriétés globales via config.globalProperties et fournir des valeurs avec provide pour l’injection. Utilisez les extensions pour les fonctionnalités qui concernent toute l’application et les fonctions composables pour la logique locale. Vous allez ensuite structurer un projet évolutif.

Questions Fréquemment Posées

La leçon « Développement de plugins » est-elle gratuite ?

Oui — le texte complet de « Développement de plugins » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Développement de plugins » ?

Créez des plugins Vue installables. Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 2 sur 3.

Combien de temps prend la leçon « Développement de plugins » ?

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 Vue Academy ?

Oui. Chaque leçon Vue 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

← Retour à Vue Academy