Appearance
Notivue - Astro
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
Add Notivue to the Vue app entry point:
pages/_app.js
js
import { createNotivue } from 'notivue/astro'
export default (app) => {
const notivue = createNotivue({
// Options
})
app.use(notivue)
}
Create a Vue component to render the stream:
components/Notivue.vue
vue
<script setup>
import { Notivue, Notification } from 'notivue/astro'
</script>
<template>
<Notivue v-slot="item">
<Notification :item="item" />
</Notivue>
</template>
Import the CSS in your root layout and add the above component at the end of the body
tag using the client:only="vue"
directive:
layouts/Layout.astro
astro
---
import Notivue from '@/components/Notivue.vue'
import 'notivue/astro/notification.css'
import 'notivue/astro/animations.css'
---
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<slot />
<Notivue client:only="vue" />
</body>
</html>
Usage
Use the push
function to render notifications from any script tag, client-side file or UI framework component. Could be a Vue, React or Svelte component, it will just work.
js
import { push } from 'notivue/astro'
push.success('Something good has been pushed!')