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!')