Vue Academy · Leçon

Exemple de plugin de notifications et de toasts

Création d’un plugin de toasts : file réactive, logique d’installation et API programmatique via provide/inject

Leçon 3 sur 413 étapes

Exemple de plugin de notifications et de toasts est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Objectif : une extension de notifications éphémères

Nous allons construire une extension de notifications éphémères. Elle gère une file réactive de messages, expose une API notify et affiche les notifications éphémères globalement. Tout composant peut déclencher une notification éphémère via l’injection ou une fonction composable.

La file réactive

L’état principal est un ref réactif contenant un tableau d’objets de notification. Lorsque nous ajoutons ou retirons des éléments, chaque composant qui affiche la file se met automatiquement à jour.

import { ref } from 'vue'

const toasts = ref([])
// each toast: { id, message, type }

Identifiants uniques avec counter

Chaque notification éphémère a besoin d’un id unique pour l’indexation et la suppression. Utilisez un counter incrémental, et non Date.now() : deux notifications éphémères déclenchées pendant la même milliseconde entreraient en collision avec un horodatage.

let counter = 0

function nextId() {
  // guaranteed unique even for rapid-fire toasts
  return ++counter
}

La fonction notify

notify est l’API publique. Elle ajoute une nouvelle notification éphémère avec un identifiant inédit et planifie sa suppression après une certaine durée.

function notify(message, type = 'info', duration = 3000) {
  const id = nextId()
  toasts.value.push({ id, message, type })
  setTimeout(() => dismiss(id), duration)
  return id
}

Fermer une notification éphémère

dismiss supprime une notification éphémère par son identifiant en la filtrant hors du tableau réactif. La réaffectation de toasts.value préserve la réactivité.

function dismiss(id) {
  toasts.value = toasts.value.filter(t => t.id !== id)
}

Regrouper dans un service

Regroupez l’état et les fonctions dans un seul objet de service. C’est cet objet que l’extension fournit à l’application.

const toastService = {
  toasts,      // reactive ref (read in the UI)
  notify,      // create a toast
  dismiss      // remove a toast
}

La méthode install de l’extension

install fournit le service via app.provide afin que tout composant puisse l’injecter. Nous exportons une clé Symbol pour plus de sécurité.

export const toastKey = Symbol('toast')

export default {
  install(app) {
    app.provide(toastKey, toastService)
    app.config.globalProperties.$toast = toastService
  }
}

Enregistrer le ToastContainer

L’extension peut également enregistrer un composant global ToastContainer qui affiche la file, afin que l’utilisateur n’ait plus qu’à le placer une seule fois près de la racine de l’application.

import ToastContainer from './ToastContainer.vue'

install(app) {
  app.provide(toastKey, toastService)
  app.component('ToastContainer', ToastContainer)
}

Le modèle du conteneur

Le conteneur lit la file injectée et affiche chaque notification éphémère, avec un gestionnaire de fermeture au clic associé à l’identifiant unique.

<script setup>
import { inject } from 'vue'
import { toastKey } from './toast'
const { toasts, dismiss } = inject(toastKey)
</script>

<template>
  <div class="toasts">
    <div v-for="t in toasts" :key="t.id" :class="t.type"
         @click="dismiss(t.id)">
      {{ t.message }}
    </div>
  </div>
</template>

Une fonction composable pratique

Enveloppez l’injection dans une fonction composable useToast afin que les composants disposent d’une API claire et d’une erreur explicite si l’extension n’a pas été installée.

import { inject } from 'vue'
import { toastKey } from './toast'

export function useToast() {
  const service = inject(toastKey)
  if (!service) throw new Error('Toast plugin not installed')
  return service
}

L’utiliser dans un composant

Enfin, tout composant déclenche des notifications via la fonction composable. Enregistrez app.use(toastPlugin) et placez <ToastContainer /> une seule fois près de la racine.

<script setup>
import { useToast } from './toast'
const { notify } = useToast()

function save() {
  notify('Saved successfully', 'success')
}
</script>

Vérification rapide

Vérifiez votre compréhension de la conception d’une extension de notifications éphémères.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez construit une extension de notifications éphémères :

Un tableau ref réactif contient la file des notifications éphémères
Un counter incrémental fournit des identifiants uniques sans collision
notify est l’API publique ; dismiss supprime par identifiant
install fournit le service via app.provide
Une fonction composable useToast enveloppe inject pour une utilisation pratique

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Exemple de plugin de notifications et de toasts » est-elle gratuite ?

Oui — le texte complet de « Exemple de plugin de notifications et de toasts » 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 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Exemple de plugin de notifications et de toasts » ?

Création d’un plugin de toasts : file réactive, logique d’installation et API programmatique via provide/inject 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 3 sur 4.

Combien de temps prend la leçon « Exemple de plugin de notifications et de toasts » ?

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

Architecture des plugins et app.use()
Propriétés globales et provide/inject dans les plugins
Exemple de plugin de notifications et de toasts
Publier et typer des plugins Vue

← Retour à Vue Academy