roger-toast

Componente de notificaciones toast reutilizable para Vue 3.

Instalación

npm install roger-toast

Uso

1) Registrar el plugin

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import RogerToastPlugin from "roger-toast";

createApp(App).use(RogerToastPlugin).mount("#app");

2) Mostrar toasts desde cualquier componente

<script setup lang="ts">
import { useToast } from "roger-toast";

const { addToast } = useToast();

const notify = () => {
  addToast({
    title: "Guardado",
    message: "Los cambios se guardaron correctamente.",
    type: "success",
  });
};
</script>

<template>
  <button @click="notify">Mostrar toast</button>
  <ToastContainer />
</template>

Importante: agrega <ToastContainer /> una sola vez (normalmente en App.vue).

API

useToast()

• toasts: lista reactiva readonly de los toasts actuales.
• addToast(options): agrega un toast y devuelve su id.
• removeToast(id): elimina un toast por id.
• clearToasts(): elimina todos los toasts.

ToastOptions

• title?: string
• message: string
• type?: "success" | "error" | "warning" | "info" (default: "info")
• icon?: string (ícono custom de Material Symbols)
• duration?: number en ms (default: 4000, usa 0 para no autocerrar)
• showIcon?: boolean (default: true)
• vertical?: "top" | "bottom" (default: "top")
• horizontal?: "left" | "right" (default: "right")

Publicar en npm

npm login
npm run build
npm publish --access public