Vie-notify is a simple notification plugin for Vue 3

API

   type options = {
      //Title of notification
      title: string,

      //body of notification.
      text: string,

      // Type of notification, DEFAULT: "info"
      type?: ( 'done' | 'error' | 'warning' | 'info' )

      // if true notification stays on screen until user click,
      // else it disappears away after 4.5 seconds.
      stay?: boolean,

      // This function runs when user clicks notification.
      click?: Function
   }

   function notify(options)...

Setup

import { createApp } from "vue";
import App from "./App.vue";

import vieNotify from "vie-notify";
import "vie-notify/style.css";

const app = createApp(App);
app.use(VieNotify);

app.mount();

Usage in setup() function

import { inject } from "vue";

export default {
   name: "Component",
   setup() {
      const notify = inject("vie-notify");
      notify({
         text: "Hello my name is bla bla",
         title: "Serious Notification",
         type: "done",
      });
   },
};

Usage in options api

export default {
   name: "Component",
   created() {
      this.$vieNotify({
         text: "Hello my name is bla bla",
         title: "Serious Notification",
         type: "done",
      });
   },
};

Usage outside of Vue component.

import { notify } from "vie-notify";

router.afterEach((to, from, next) => {
   if (loggedIn == false) {
      notify({
         text: "Login is needed to access this page.",
         title: "Login Needed",
         type: "error",
      });
      next({ name: "Login" });
   }
});