Notification library for Vue 3. Most of the code is heavily borrowed from https://github.com/kyvg/vue3-notification.
Online demo: https://leonzalion.github.io/vue3-notify/
npm install vue3-notify
Import and install the VueNotify
plugin in your app's entrypoint:
import App from './app.vue';
import VueNotify from 'vue3-notify';
const app = createApp(App);
app.use(VueNotify);
// ...
Then, add the <VueNotifications />
component somewhere in your component tree (such as app.vue
):
<template>
<!-- ... -->
<VueNotifications
:reverse="reverse"
:width="width"
:position="position"
:max="max"
:close-on-click="closeOnClick"
:pause-on-hover="pauseOnHover"
/>
</template>
Then, to display a notification, import and call the notify
function from anywhere in your code (even outside of Vue components!):
import { notify } from 'vue3-notify';
notify({
title: 'My notification',
text: 'Hello from vue3-notify!',
duration: 1000,
type: 'success',
});
Type: NotificationOptions | string
If options
is a string, it is equivalent to calling notify({ title: '', text: options })
.
Type: number
Required: false
The ID of the notification (used internally to identify notifications).
Type: string
Required: false
The title of the notification.
Type: string
The text for the notification.
Type: 'warn' | 'error' | 'success'
Required: false
The type of the notification (just adds an extra class to the notification).
Type: string
Required: false
Type: number
Default: 3000
Type: number
Default: 300
The transition time of the notification in milliseconds.
Type: boolean
Default: false
If true, clears all existing notifications.
Type: boolean
Default: false
If true, doesn't display duplicate notifications.