Vue Academy · Lección

Ejemplo de plugin de notificaciones y toasts

Creación de un plugin de toasts: cola reactiva, lógica de instalación y API programática mediante provide/inject

Ejemplo de plugin de notificaciones y toasts es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Objetivo: un plugin de notificaciones toast

Construirá un plugin de notificaciones toast. Mantiene una cola reactiva de mensajes, expone una API notify y muestra los toasts globalmente. Cualquier componente puede activar un toast mediante inject o un composable.

La cola reactiva

El estado principal es un ref reactivo que contiene un array de objetos toast. Cuando añadimos o eliminamos elementos, todos los componentes que renderizan la cola se actualizan automáticamente.

import { ref } from 'vue'

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

IDs únicos mediante un contador

Cada toast necesita un id único para identificarlo y eliminarlo. Use un contador incremental, no Date.now(): dos toasts activados en el mismo milisegundo podrían colisionar debido a la marca de tiempo.

let counter = 0

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

La función notify

notify es la API pública. Añade un nuevo toast con un id nuevo y programa su eliminación después de un intervalo.

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

Descartar un toast

dismiss elimina un toast por su id filtrándolo del array reactivo. Reasignar toasts.value mantiene intacta la reactividad.

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

Agrupar en un servicio

Agrupe el estado y las funciones en un único objeto de servicio. Este objeto es el que el plugin proporciona a la aplicación.

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

El método install del plugin

El install del plugin proporciona el servicio mediante app.provide para que cualquier componente pueda inyectarlo. Exportamos una clave Symbol por seguridad.

export const toastKey = Symbol('toast')

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

Registro del contenedor de toast

El plugin también puede registrar un componente global ToastContainer que renderiza la cola, de modo que el consumidor solo tiene que colocarlo una vez cerca de la raíz de la aplicación.

import ToastContainer from './ToastContainer.vue'

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

Plantilla del contenedor

El contenedor lee la cola inyectada y renderiza cada toast, con un controlador para descartarlo al hacer clic que utiliza el id único como clave.

<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>

Un composable de conveniencia

Envuelva inject en un composable useToast para que los componentes obtengan una API clara y un error útil si el plugin no está instalado.

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
}

Usarlo en un componente

Por último, cualquier componente activa notificaciones mediante el composable. Registre app.use(toastPlugin) y coloque <ToastContainer /> una sola vez cerca de la raíz.

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

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

Comprobación rápida

Compruebe su comprensión del diseño del plugin de toast.

Resumen

Ha creado un plugin de toast:

Un array ref reactivo contiene la cola de toasts
Un contador incremental proporciona IDs únicos sin colisiones
notify es la API pública; dismiss elimina por id
install proporciona el servicio mediante app.provide
Un composable useToast envuelve inject para facilitar su uso

Preguntas frecuentes

¿La lección «Ejemplo de plugin de notificaciones y toasts» es gratis?

Sí — el texto completo de «Ejemplo de plugin de notificaciones y toasts» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Ejemplo de plugin de notificaciones y toasts»?

Creación de un plugin de toasts: cola reactiva, lógica de instalación y API programática mediante provide/inject Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Ejemplo de plugin de notificaciones y toasts»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Arquitectura de plugins y app.use()
Propiedades globales y provide/inject en plugins
Ejemplo de plugin de notificaciones y toasts
Publicación y tipado de plugins de Vue

← Volver a Vue Academy