The Simple and Customizable 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