VueCraft NPM

Toast Kit ​

Promise-API with auto type switching, priority queue with preemption, undo-actions with progress timer, toast grouping, headless mode, and a full design system via CSS custom properties — all with a single peer dependency (Vue 3).

Features ​

  • Promise API — toast.promise(promise, messages) automatically switches loading → success / error based on the result; returns the original promise unmodified
  • Priority queue — four levels (critical / high / normal / low); when the visible limit is reached, high-priority toasts preempt low-priority ones; the preempted toast moves to a pending queue and reappears when space frees up
  • Undo actions — toast.undo(message, { undo: { onUndo, duration } }) renders a progress-bar timer; clicking "Undo" calls the callback and closes the toast; when the timer expires the action is confirmed silently
  • Grouping — toasts with the same groupKey are stacked into one with a +N counter; clicking the counter expands the group
  • Headless mode — useToastState() returns raw reactive queue data; render with any UI framework or fully custom markup
  • Multi-instance — createToastContext() produces an isolated queue; pass it to useToast(ctx) and <ToastContainer :context="ctx" /> for micro-frontends or scoped notification zones
  • Design System — 30+ CSS custom properties (--vtk-*) covering colors, typography, shape, shadows, animations, and z-index; three built-in themes (light, dark, system); inline token override via the theme prop on <ToastContainer>
  • SSR-safe — core has no browser API; toasts fired before <ToastContainer> mounts are buffered and flushed after mount (100 ms delay)
  • Accessibility — role="alert" for error, warning, and critical priority; role="status" for others; aria-live="assertive" for critical priority; Escape closes the focused toast; focus returns to the previously active element on dismiss
  • Touch support — swipe left or right to dismiss (the 40% threshold is fixed; enable/disable it per toast via swipeToDismiss)
  • RTL support — the close button's margin uses a CSS logical property (margin-inline-start) so it mirrors automatically when dir="rtl" is set on <html>
  • Pause on hover / focus loss — timers freeze automatically; visibilitychange stops all timers when the tab goes to the background
  • Animations — CSS-only slide + fade per position; prefers-reduced-motion degrades to fade-only
  • Vue Plugin + Nuxt Module — app.use(VueToastPlugin) for Vue 3; modules: ['vue-toast-kit/nuxt'] for Nuxt 3 with auto-imports
  • Zero external runtime dependencies — only Vue 3 as peer dep; full ESM + CJS, tree-shakeable