Notivue

Notivue is a powerful toast notification system for Vue and Nuxt. Use it with the built-in <Notification /> component or to display and orchestrate your own.

Installation

pnpm

pnpm add notivue

yarn

yarn add notivue

npm

npm i notivue

bun

bun install notivue

Usage

main.js

import App from './App.vue'

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

import 'notivue/notification.css' // Only needed if using built-in notifications
import 'notivue/animations.css' // Only needed if using built-in 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('Something good has been pushed!')">Push</button>

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

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

Push auto-import (optional)

You will probably find yourself importing push in many of your files. If that's the case, you might want to auto-import it by using the great unimport package:

pnpm

pnpm add unimport

yarn

yarn add unimport

npm

npm i unimport

bun

bun install unimport

vite.config.ts

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
import Unimport from 'unimport/unplugin'

export default defineConfig({
  plugins: [
    vue(),
    Unimport.vite({
      addons: {
        vueTemplate: true
      },
      imports: [{ name: 'push', from: 'notivue' }]
    })
  ]
})