Notivue - Nuxt

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

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

app.vue

<template>
  <button @click="push.success('Something good has been pushed!')">Push</button>

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

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

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'