Appearance
Notivue
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
Usage
main.js
js
import App from './App.vue'
import { createApp } from 'vue'
import { createNotivue } from 'notivue'
import 'notivue/notification.css' // Only needed if using built-in notifications
import 'notivue/animations.css' // Only needed if using built-in animations
const notivue = createNotivue(/* options */)
const app = createApp(App)
app.use(notivue)
app.mount('#app')
App.vue
vue
<script setup>
import { Notivue, Notification, push } from 'notivue'
</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'
</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'
</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'
</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>
Push auto-import (optional)
You will probably find yourself importing push
in many of your files. If that's the case, you might want to auto-import it by using the great unimport package:
bash
npm i unimport
bash
yarn add unimport
bash
pnpm add unimport
vite.config.ts
js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unimport from 'unimport/unplugin'
export default defineConfig({
plugins: [
vue(),
Unimport.vite({
addons: {
vueTemplate: true
},
imports: [{ name: 'push', from: 'notivue' }]
})
]
})