# Notivue ### Powerful toast notification system for Vue and Nuxt [Live Demo](https://notivue.smastrom.io) - [Documentation](https://docs.notivue.smastrom.io) --- **Examples:** [Custom Components](https://stackblitz.com/edit/vitejs-vite-9jkh73?file=src%2Fcomponents%2FPage.vue) - [Nuxt](https://stackblitz.com/edit/nuxt-starter-fnhcmx?file=pages%2Findex.vue) - [Astro](https://stackblitz.com/edit/withastro-astro-qyesvk?file=src%2Fcomponents%2FVueComponent.vue)

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

pnpm add notivue

# npm i notivue
# yarn add notivue
# bun i notivue

Vite

:bulb: See ↓ below for Nuxt

main.js/ts

import { createApp } from 'vue'
import { createNotivue } from 'notivue'

import App from './App.vue'

import 'notivue/notification.css' // Only needed if using built-in <Notification />
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

<script setup>
import { Notivue, Notification, push } from 'notivue'
</script>

<template>
  <button @click="push.success('Hi! I am your first notification!')">Push</button>

  <Notivue v-slot="item">
    <Notification :item="item" />
  </Notivue>

  <!-- RouterView, etc. -->
</template>

Nuxt

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  css: [
    'notivue/notification.css', // Only needed if using built-in <Notification />
    'notivue/animations.css' // Only needed if using default animations
  ],
  notivue: {
    // Options
  }
})

app.vue

<template>
  <button @click="push.success('Hi! I am your first notification!')">Push</button>

  <Notivue v-slot="item">
    <Notification :item="item" />
  </Notivue>

  <!-- NuxtLayout, NuxtPage, etc. -->
</template>

Thanks

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

License

MIT