Powerful toast notification system for Vue and Nuxt
npm install notivue🧬 Fully modular with zero dependencies
_Granularly include only the features you need_
✅ Beautiful, ready-made notifications included
_Themes, icons, progress bar, and native RTL support_
🧩 Headless API
_Use your own components while Notivue handles the rest_
💊 Drop-in components to enhance notifications
_NotivueSwipe, NotivueKeyboard, all optional and customizable_
🌀 Dynamic Notifications
_Update pending notifications with a breeze_
🎢 Slick transitions and animations
_Customize animations with CSS classes_
♿️ Fully accessible
_Built-in announcements, reduced-motion and keyboard support_
💫 Nuxt and Astro modules
_Built-in Nuxt and Astro ad-hoc modules_
``shell
pnpm add notivue
Vite
> :bulb: See ↓ below for Nuxt
main.js/ts
`ts
import { createApp } from 'vue'
import { createNotivue } from 'notivue'import App from './App.vue'
import 'notivue/notification.css' // Only needed if using built-in
import 'notivue/animations.css' // Only needed if using default animations
const notivue = createNotivue(/ Options /)
const app = createApp(App)
app.use(notivue)
app.mount('#app')
`App.vue
`vue
`
Headless, with custom components
`vue
{{ item.message }}
@click="item.clear"
aria-label="Dismiss"
class="pl-3 pr-2 hover:text-red-300 transition-colors"
tabindex="-1"
>
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
aria-hidden="true"
>
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
/>
`
Nuxt
nuxt.config.ts
`ts
export default defineNuxtConfig({
modules: ['notivue/nuxt'],
css: [
'notivue/notification.css', // Only needed if using built-in
'notivue/animations.css' // Only needed if using default animations
],
notivue: {
// Options
}
})
`app.vue
`vue
``- Ionic Team for the icons
- Uktash Verna for the animated spinner
MIT