Appearance
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
bash
pnpm add notivue
bash
yarn add notivue
bash
npm i notivue
bash
bun install notivue
Getting Started
nuxt-config.ts
js
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
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:
ts
import type { NotivueConfig, NotivueItem /*, ... */ } from 'notivue'