Notification Library For Vue 3

Description:

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:

Notification Library For Vue 3

Changelog:

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

You Might Be Interested In:

Add Comment