Librería de Notificaciones (Vue 3)

Una librería de notificaciones moderna, intuitiva y muy personalizable para Vue 3. Incluye:

• API imperativa súper simple: notify.success(...), notify.error(...), etc.
• Plugin con $notify global y composable useNotify().
• Temas: light, dark, glass, minimal.
• Tamaños: sm, md, lg.
• Posiciones: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center.
• Animaciones: slide, fade, bounce.
• Acciones, íconos, barra de progreso, clic para cerrar, y más.

Instalación

npm install libreria-notify-vue

No requiere dependencias adicionales más allá de Vue 3.3+.

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import { NotifyPlugin } from './lib/notify'

const app = createApp(App)
app.use(NotifyPlugin)
app.mount('#app')

Uso Rápido

Puedes usar la API de dos formas:

1. Importación directa:

import { notify } from '@/lib/notify'
notify.success({ title: 'Listo', message: 'Operación exitosa' })

2. Vía composable:

import { useNotify } from '@/lib/notify'
const notify = useNotify()
notify.error({ title: 'Error', message: 'Algo salió mal' })

3. Vía $notify (si estás dentro de un componente con Options API):

this.$notify.info({ title: 'Info', message: 'Hola!' })

API

notify(options)
notify.success(options)
notify.info(options)
notify.warning(options)
notify.error(options)
notify.remove(id)
notify.clear()

Options (todas opcionales)

• type: 'success' | 'info' | 'warning' | 'error' (se define automáticamente en los atajos)
• title: string
• message: string
• duration: number (ms). 0 = infinito
• closable: boolean (default true)
• progressBar: boolean (default true)
• icon: string (HTML SVG o texto). Si no se pasa, usa un ícono por defecto según el tipo
• theme: 'light' | 'dark' | 'glass' | 'minimal'
• size: 'sm' | 'md' | 'lg'
• position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
• animation: 'slide' | 'fade' | 'bounce'
• actions: { label: string, onClick: (event, item) => void }[] (máx. 3)
• onClick: (event, item) => void
• onClose: (reason, item) => void // reason: 'timeout' | 'close-button' | 'manual'
• ariaLive: 'polite' | 'assertive'

Temas y Personalización

Se exponen variables CSS para adaptar la apariencia. Valores por defecto en src/lib/notify/styles.css:

:root {
  --notify-bg: #ffffff;
  --notify-fg: #1f2937;
  --notify-border: rgba(0,0,0,0.08);
  --notify-shadow: 0 8px 30px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --notify-success: #16a34a;
  --notify-info: #2563eb;
  --notify-warning: #d97706;
  --notify-error: #dc2626;
}

Puedes sobreescribirlas globalmente en tu app (p. ej., en src/style.css) o por tema (las clases .theme-* se aplican por notificación):

/* Modo oscuro global */
:root {
  color-scheme: dark;
}
.notify-item.theme-dark { /* puedes ajustar aquí si quieres */ }

Ejemplos

// Éxito básico
notify.success({ title: 'Éxito', message: 'Operación completada', duration: 3000 })

// Error con tema oscuro y animación bounce
notify.error({ title: 'Error', message: 'Algo salió mal', theme: 'dark', animation: 'bounce' })

// Info estilo glass en top-center
notify.info({ title: 'Info', message: 'Modo glass ✨', theme: 'glass', position: 'top-center' })

// Warning grande con acciones
notify.warning({
  title: 'Atención',
  message: 'Tamaño grande + acciones',
  size: 'lg',
  actions: [
    { label: 'Deshacer', onClick: () => notify.info({ message: 'Acción revertida' }) },
    { label: 'Ver más', onClick: () => notify.success({ message: 'Abriendo…' }) },
  ]
})

// Minimal sin barra y click-to-close
const id = notify({
  type: 'success',
  title: 'Súper personalizable',
  message: 'Tema minimal, sin barra, duración infinita (clic para cerrar)',
  theme: 'minimal', progressBar: false, duration: 0,
  onClick: (_, item) => notify.remove(item.id)
})

Accesibilidad

• role dinámico: alert para error, status para otros tipos.
• aria-live configurable (por defecto polite).
• Pausa de tiempo al pasar el mouse para facilitar lectura.

Estructura del código

• src/lib/notify/manager.js: estado reactivo y API.
• src/lib/notify/NotificationItem.vue: ítem individual.
• src/lib/notify/NotificationContainer.vue: contenedor por posiciones.
• src/lib/notify/index.js: plugin, composable y exports.
• src/lib/notify/styles.css: estilos base y temas.

Hecho con ❤️ para una experiencia de notificaciones moderna y agradable.

Demo con Tailwind en producción

Para evitar el aviso de "cdn.tailwindcss.com should not be used in production", se añadió un proyecto de demo independiente con Tailwind configurado vía PostCSS/CLI.

Cómo ejecutarlo:

cd demo
npm install
npm run dev
# o build de producción
npm run build && npm run preview

Esta demo importa la librería desde ../src/lib/notify y configura darkMode: 'class', por lo que el botón de tema Claro/Oscuro funciona sin depender de globals.

Instalación desde npm

Instala el paquete en tu proyecto:

npm install libreria-notify-vue
# o
pnpm add libreria-notify-vue
# o
yarn add libreria-notify-vue

Uso

Importa el plugin en tu app principal y (opcionalmente) los estilos. Los estilos se inyectan por el propio plugin, pero si prefieres controlar el CSS manualmente puedes importar style.css explícitamente.

// main.js (Vue 3)
import { createApp } from 'vue'
import App from './App.vue'

// Opción A: solo el plugin (ya incluye los estilos)
import { NotifyPlugin, notify, useNotify } from 'libreria-notify-vue'

const app = createApp(App)
app.use(NotifyPlugin)
app.mount('#app')

// Opción B: si quieres importar el CSS manualmente
// import 'libreria-notify-vue/style.css'

En cualquier parte:

import { notify } from 'libreria-notify-vue'
notify.success({ title: 'Listo', message: 'Operación exitosa' })

O con el composable:

import { useNotify } from 'libreria-notify-vue'
const notify = useNotify()
notify.error({ title: 'Error', message: 'Algo salió mal' })

Publicación (para el autor de la librería)

1. Asegúrate de tener una cuenta y estar logueado:

npm login

2. Sube la versión si corresponde (semver):

npm version patch # o minor/major

3. Publica (acceso público):

npm publish --access public

Notas:

• Vue está como peerDependency, por lo que no se incluye en el bundle.
• El build genera dist/notify.mjs, dist/notify.cjs y dist/style.css.