Features

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

Installation

``shell
pnpm add notivue

npm i notivue

yarn add notivue

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



`




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

``

Thanks

- Ionic Team for the icons
- Uktash Verna for the animated spinner

License

MIT