sermonis / vue-notification-notivue

:bell: Fully-featured toast notification system for Vue and Nuxt.

Notivue

Fully-featured notification system for Vue and Nuxt

Live Demo - Documentation

---

Examples: Custom Components - Nuxt

Features

🧬 JS and CSS modular
Granularly include only the features you need

💊 Drop-in components to enhance notifications
NotivueSwipe, NotivueKeyboard, all optional and customizable

🎢 Slick transitions and animations
Customize any animation with CSS

🧩 Custom Components API
Use your own components while Notivue handles the rest

🌀 Promise API
Update pending notifications with ease

🔰 Includes a ready-made component with anything you need
Themes, icons, rtl support and much more

♿️ Fully accessible
Built-in screen reader, reduced motion, and keyboard support

🧚‍♂️ Zero dependencies
From ~4.5 KB (gzipped)

Installation

pnpm add notivue

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

Single-page app (Vite or Webpack)

💡 See ↓ below for Nuxt

main.js/ts

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

import App from './App.vue'

import 'notivue/notifications.css' // Only needed if using built-in notifications
import 'notivue/animations.css' // Only needed if using built-in animations

const app = createApp(App)

// Place it at THE END of the app.use() chain, just right before app.mount()
export const push = createNotivue(app)
app.mount('#app')

App.vue

<script setup>
import { Notivue, Notifications } from 'notivue'
import { push } from './main'
</script>

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

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

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

Using custom components

<script setup>
import { Notivue } from 'notivue'
import { push } from './main'
</script>

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

  <Notivue v-slot="item">
    <div class="rounded-full flex py-2 pl-3 bg-slate-700 text-slate-50 text-sm">
      <p :role="item.ariaRole" :aria-live="item.ariaLive">
        {{ item.message }}
      </p>

      <button
        @click="item.clear"
        aria-label="Dismiss"
        class="pl-3 pr-2 hover:text-red-300 transition-colors"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="w-5 h-5"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            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"
          />
        </svg>
      </button>
    </div>
  </Notivue>

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

Nuxt

nuxt.config.ts

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

app.vue

<script setup>
const push = usePush()
</script>

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

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

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

Thanks

• Ionic Team for the icon sets
• Uktash Verna for the SVG spinner

License

MIT Licensed - Simone Mastromattei © 2023