This is the Vue 3 version of euvl’s vue-notification library, which allows you to create highly customizable notification popups in Vue 3 applications.
How to use it:
1. Import the notification library.
import { createApp } from 'vue'
import Notifications from '@kyvg/vue3-notification'
const app = createApp({...})
app.use(Notifications)
2. Add the notification component to the app.
notify({
// group name
group: 'myGroup',
// Title (HTML Content is supported)
title: 'Notification Title',
// Content (HTML Content is supported)
text: 'Notification Message',
// Class that will be assigned to the notification
type: 'warn',
// Time (in ms) to keep the notification on screen
duration: 10000,
// Time (in ms) to show / hide notifications
speed: 1000,
// Data object that can be used in your template
data: {}
})
// OR
import { notify } from "@kyvg/vue3-notification";
notify({
title: "Title",
text: "Message",
});
4. Default component props.
group: {
type: String,
default: '',
},
width: {
type: [Number, String],
default: 300,
},
reverse: {
type: Boolean,
default: false,
},
position: {
type: [String, Array] as PropType<string| string[]>,
default: defaults.position,
},
classes: {
type: String,
default: 'vue-notification',
},
animationType: {
type: String as PropType<'css' | 'velocity'>,
default: 'css',
},
animation: {
type: Object,
default: defaults.velocityAnimation,
},
animationName: {
type: String,
default: defaults.cssAnimation,
},
speed: {
type: Number,
default: 300,
},
duration: {
type: Number,
default: 3000,
},
delay: {
type: Number,
default: 0,
},
max: {
type: Number,
default: Infinity,
},
ignoreDuplicates: {
type: Boolean,
default: false,
},
closeOnClick: {
type: Boolean,
default: true,
},
pauseOnHover: {
type: Boolean,
default: false,
},
Preview:
Changelog:
09/16/2023
- v3.0.2: Bugfix
08/18/2023
- v3.0.0: Update
05/16/2023
- v2.9.1: Update
02/14/2023
- v2.9.0: Export NotificationItem type
02/14/2023
- v2.9.0: Export NotificationItem type
01/15/2023
- v2.8.0: Add ‘start’ event
11/28/2022
- v2.7.0: Update
10/31/2022
- v2.6.1: Update
08/26/2022
- v2.4.1: Update
07/27/2022
- v2.3.6: Fix velocity animation
07/12/2022
- v2.3.5: Bugfix.
09/08/2021
- v2.3.4: update dependencies
06/16/2021
- v2.3.3: Prevent inherit listeners in css group
06/07/2021
- v2.3.2: Fix leave css animation
05/30/2021
- v2.3.1: fix: declare file format error
05/05/2021
- v2.3.0
Download Details:
Author: kyvg
Live Demo: https://kyvg.github.io/vue3-notification/
Download Link: https://github.com/kyvg/vue3-notification/archive/refs/heads/master.zip
Official Website: https://github.com/kyvg/vue3-notification
Install & Download:
# Yarn
$ yarn add @kyvg/vue3-notification
# NPM
$ npm i @kyvg/vue3-notification