Appearance

Notivue - Astro ​

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 ​

bash
npm i notivue
bash
yarn add notivue
bash
pnpm add notivue

Getting Started ​

Import Path

When using Notivue with Astro, make sure to import any function, component or object mentioned in this documentation from notivue/astro and not notivue.

1. Add Notivue to the Vue app entry point ​

pages/_app.js/ts

js
import { createNotivue } from 'notivue/astro'

const notivue = createNotivue({
  // Options
})

export default (app) => {
  app.use(notivue)
}
js
import { createNotivue } from 'notivue/astro'

const notivue = createNotivue({
  teleportTo: '#notivue_teleport'
})

export default (app) => {
  app.use(notivue)
}

2. Create a Vue island 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>
vue
<script setup>
import { Notivue, NotivueSwipe, Notification } from 'notivue/astro'
</script>

<template>
  <Notivue v-slot="item">
    <NotivueSwipe :item="item">
      <Notification :item="item" />
    </NotivueSwipe>
  </Notivue>
</template>
vue
<script setup>
import { Notivue, Notification, NotificationProgress } from 'notivue/astro'
</script>

<template>
  <Notivue v-slot="item">
    <Notification :item="item">
      <NotificationProgress />
    </Notification>
  </Notivue>
</template>
vue
<script setup>
import {
  Notivue,
  NotivueSwipe,
  Notification,
  NotificationProgress
} from 'notivue/astro'
</script>

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

2. Add the Notivue island ​

Option A - Site-wide usage ​

💡 Prefer this method if using Vue or Notivue in almost all your pages.

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>
astro
---
import Notivue from '@/components/Notivue.vue'

import 'notivue/astro/notification.css'
import 'notivue/astro/animations.css'
---

<html lang="en">
   <head>
      <!-- ... -->
   </head>

   <body>
      <slot />

      <div id="notivue_teleport" transition:persist transition:persist-props>
         <Notivue client:only="vue" />
      </div>
   </body>
</html>

Option B - Page-specific usage ​

💡 Prefer this method if using Notivue only on few specific pages in order to avoid loading the whole Vue library on pages that do not need it.

layouts/Layout.astro

astro
---
import Notivue from '@/components/Notivue.vue'

import 'notivue/astro/notification.css'
import 'notivue/astro/animations.css'
---

<html>
  <head>
    <!-- ... -->
  </head>

  <body>
    <!-- ... -->

    <slot name="body-end" />
  </body>
</html>

pages/contact.astro

astro
---
import Notivue from '@/components/Notivue.vue'

import 'notivue/astro/notification.css'
import 'notivue/astro/animations.css'
---

<Layout>
  <!-- ... -->

  <Notivue slot="body-end" client:only="vue" />
</Layout>
astro
---
import Notivue from '@/components/Notivue.vue'

import 'notivue/astro/notification.css'
import 'notivue/astro/animations.css'
---

<Layout>
  <!-- ... -->

  <div slot="body-end" id="notivue_teleport" transition:persist transition:persist-props>
      <Notivue client:only="vue" />
  </div>
</Layout>

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('Hello from your first notification!')