Notivue - Nuxt

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

npm

npm i notivue

yarn

yarn add notivue

pnpm

pnpm add notivue

Getting Started

nuxt-config.ts

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

Auto imports

After installing the module, any function and object mentioned in this documentation can be auto-imported in your components except for types which must be imported manually if needed:

import type { NotivueConfig, NotivueItem /*, ... */ } from 'notivue'

app.vue

Basic

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

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

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

With Swipe

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

With Progress

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

With Swipe and Progress

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