Blog Detail

16

Jul
The Simplest Vue 3 Toast Notification Library cover image

The Simplest Vue 3 Toast Notification Library

dafcoe/vue-notification is a user-friendly, customizable notification/toast library that has been built by employing Vue 3. You can utilize this library for displaying toast and notification in your project.

Installation

You can install this package as a project dependency using yarn or npm.

$ yarn add @dafcoe/vue-notification

#OR

$ npm install --save @dafcoe/vue-notification

How to Use?

You've to import the VueNotificationList component, either globally (on your main.js / main.ts file) or locally (on your component):

// Globally
import VueNotificationList from '@dafcoe/vue-notification'
const app = createApp(App)
app.use(VueNotificationList).mount('#app')
// Locally
import { VueNotificationList } from '@dafcoe/vue-notification'
Import default styles (optional - you can specify your own styling):
import '@dafcoe/vue-notification/dist/vue-notification.css'

You can employ it in your template as follows:

<vue-notification-list></vue-notification-list>

Position Options

You can change the position of notification by using its options. By default, the notification list is displayed on the bottom right corner of the screen. You can customize this by utilizing "top-left", "top-right", "bottom-left" or "bottom-right" on position prop:

<vue-notification-list position="top-left|top-right|bottom-left|bottom-right">
</vue-notification-list>

Pushing Notifications

To push notification, you've to call setNotification from vue-notification.store, passing a notification object:

import { useNotificationStore } from '@dafcoe/vue-notification'
...
const { setNotification } = useNotificationStore()
setNotification(notificationA)
setNotification(notificationB)

Properties

A notification object has the following properties:

{
  "message": string,
  "type": string ("info"|"warning"|"alert"|"success"),
  "showIcon": boolean,
  "dismiss": {
    "manually": boolean,
    "automatically": boolean
  },
  "duration": number,
  "showDurationProgress": boolean,
  "appearance": string ("light"|"dark"|"glass")
}

For more details, you can view its full documentation and source code here. dafcoe/vue-notification

Published at : 16-07-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client
Launch your project

Launch project