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
.
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)
}
Create a Vue component to render the stream:
components/Notivue.vue
vue
<script setup>
import { Notivue, Notification, push } from 'notivue/astro'
</script>
<template>
<button @click="push.success('Hello from your first notification!')">
Push
</button>
<Notivue v-slot="item">
<Notification :item="item" />
</Notivue>
<!-- RouterView, etc. -->
</template>
vue
<script setup>
import { Notivue, NotivueSwipe, Notification, push } from 'notivue/astro'
</script>
<template>
<button @click="push.success('Hello from your first notification!')">
Push
</button>
<Notivue v-slot="item">
<NotivueSwipe :item="item">
<Notification :item="item" />
</NotivueSwipe>
</Notivue>
<!-- RouterView, etc. -->
</template>
vue
<script setup>
import {
Notivue,
Notification,
NotificationProgress,
push
} from 'notivue/astro'
</script>
<template>
<button @click="push.success('Hello from your first notification!')">
Push
</button>
<Notivue v-slot="item">
<Notification :item="item">
<NotificationProgress />
</Notification>
</Notivue>
<!-- RouterView, etc. -->
</template>
vue
<script setup>
import {
Notivue,
NotivueSwipe,
Notification,
NotificationProgress,
push
} from 'notivue/astro'
</script>
<template>
<button @click="push.success('Hello from your first notification!')">
Push
</button>
<Notivue v-slot="item">
<NotivueSwipe :item="item">
<Notification :item="item">
<NotificationProgress />
</Notification>
</NotivueSwipe>
</Notivue>
<!-- RouterView, etc. -->
</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>
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>
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!')