Appearance

Notivue ​

Notivue is a powerful toast notification system for Vue, Nuxt and Astro. Display your notifications using the built-in <Notification /> component or bring your own components.

Installation ​

bash
npm i notivue
bash
yarn add notivue
bash
pnpm add notivue

Usage ​

main.js

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

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

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

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

  <!-- RouterView, etc. -->
</template>
vue
<script setup>
import { Notivue, NotivueSwipe, Notification, push } from 'notivue'
</script>

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

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

  <!-- RouterView, etc. -->
</template>
vue
<script setup>
import { Notivue, Notification, NotificationProgress, push } from 'notivue'
</script>

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

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

  <!-- RouterView, etc. -->
</template>
vue
<script setup>
import {
  Notivue,
  NotivueSwipe,
  Notification,
  NotificationProgress,
  push
} from 'notivue'
</script>

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

  <Notivue v-slot="item">
    <NotivueSwipe :item="item">
      <Notification :item="item">
        <NotificationProgress />
      </Notification>
    </NotivueSwipe>
  </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:

bash
npm i unimport
bash
yarn add unimport
bash
pnpm add unimport

vite.config.ts

js
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' }]
    })
  ]
})