Modern Notification/Toast Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue-modern-notification
# NPM
$ npm install vue-modern-notification

Description:

A Vue 3 notification component to display modern toast notifications on your Vue-powered applications.

How to use it:

1. Import and register the VueModernNotification plugin.

import { createApp } from 'vue';
import App from "@/App.vue";
import VueModernNotification from 'vue-modern-notification';
const app = createApp()
app.use(VueModernNotification);
.mount("#app")

2. Display notifications using the useNotification or notify helper.

import { useNotification } from 'vue-modern-notification';
const toast = useNotification();
const primary = ()=>{
  toast.primary({
    title: "Title goes here",
    text: "Description goes here",
    // ... more props 
  })
}
// more notification types
toast.secondary({...})
toast.success({...})
toast.warning({...})
toast.error({...})
toast.dark({...})
toast.info({...})
toast.light({...})

import { notify } from 'vue-modern-notification';
const primary = ()=>{
  notify({
    color: "primary",
    title: "Title goes here",
    text: "Description goes here",
    //... more props 
  })
}

3. Available component props.

type: String,
default: "primary",
validator: (value) =>
  [
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "info",
    "light",
    "dark",
    "submit",
    "transparent",
  ].includes(value),
},
gradient: Boolean,
size: {
type: String,
default: "md",
validator: (value) => ["sm", "md", "lg"].includes(value),
},
ripple: Boolean,
rippleInvert: Boolean,
rippleSolid: Boolean,
icon: Boolean,
square: Boolean,
flat: Boolean,
active: Boolean,
block: Boolean,
outlined: Boolean,
disabled: Boolean,

Preview: