Simple Extendable Notification Library For Vue – Vue Toastify

A simple, extendable, customizable toast notification library for Vue.js applications.

Features:

• Auto dismissable
• Drag & swipe to dismiss
• Pausable
• Dark and Light themes.
• Success, Error, Warning, Info types.
• Toast, Prompt, Loader modes.
• Multiple toasts at a time.

How to use it:

1. Import and register the Toastify component.

// Import
import VueToastify from "vue-toastify";

// Register
Vue.use(VueToastify,{
  // settings
});

2. Create toasts with various types:

this.$vToastify.success("Toast Message", "Toast Title"); 
this.$vToastify.error("Toast Message", "Toast Title"); 
this.$vToastify.warning("Toast Message", "Toast Title"); 
this.$vToastify.info("Toast Message", "Toast Title");

3. Create prompt toasts.

this.$vToastify.prompt({
  body: "Are You Sure?",
  answers: { Yes: true, No: false }
}).then(value => {
  if (value) {
    this.$vToastify.prompt("Is it a scam?")
    .then(value => console.log(value ? "Yay!" : "Nay"))
  }
})

4. Create loaders.

this.$vToastify.loader("Something is loading...")

5. You can pass the parameters as an object.

this.$vToastify({

  // body
  body: "Toast Body",

  // title
  title: "Toast Tigle",

  // or "warning", "info", "error"
  type : "success",

  // or loader, prompt
  mode: "",

  // URL
  url: { href: "https://www.vuescript.com/", target="_blank" },

  // custom icon
  icon: { tag: "i", ligature: "", icon: "" },

  // for prompt toast
  answers: { Yes: true, No: false },

  // callback
  callback: null,

});

6. All default settings.

Vue.use(VueToastify,{

  // Only allow one notification on the screen at a time
  singular: false ,

  // With backdrop or not
  withBackdrop: false,

  // Backdrop color
  backdrop: "rgba(0, 0, 0, 0.2)",

  // "top-left", "top-center", "top-right", "center-left", 
  // "center-center", "center-right", "bottom-left", "bottom-center", "bottom-right"
  position: "bottom-right",

  // The duration in milliseconds the error notification should be visible for
  errorDuration: 8000,

  // The duration in milliseconds the success notification should be visible for.
  successDuration: 4000,

  // The duration in milliseconds the warning and info notification should be visible for.
  warningInfoDuration: 6000,

  // Whether the notifications disappears after the set time.
  canTimeout: true,

  // Whether the notifications can be paused by hovering over them.
  canPause: true,

  // Hide the progress bar
  hideProgressbar: false,

  // Show default title
  defaultTitle: true,

  // or "light"
  theme: "dark",

  // Whether new notifications should display on top of the stack or not.
  orderLatest: true,

  // If string supplied this will apply the usual transition classes (eg.: .name-enter-active);
  // If object supplied it expect a name and optionally a moveClass (this class has to use !important for its rules) attribute.
  // The name will be applied as above. The move class applied when the notifications adjust their position.
  // String / Object
  transition: null,

  // If set to false, no icon will be shown on the notification.
  iconEnabled: true,

  // Drag to dismiss or not
  draggable: true,

  // How far the notification should be dragged to dismiss
  dragThreshold: 0.75,

  // Base icon class
  baseIconClass: null,

  // Max number of toasts allowed to be visible at a time
  maxToasts: 6,

  // If turned on, only toasts with unique mode/type will be show. Others are queued.
  oneType: false,

});

7. Extend the toast library.

Vue.use(VueToastify, {
  customNotifications: {
    clientError: {
      body: "You did it!",
      defaultTitle: false,
      icon: '<svg width="50" height="50">\n' +
              '<rect width="50" height="50" style="fill:rgb(0,0,255);" />\n' +
            '</svg> ',
      canTimeout: false
    },
    moreOfTheAbove: { ...
  }
});

Preview:

Download Details:

Author: nandi95

Live Demo: https://vue-toastify.netlify.app/

Download Link: https://github.com/nandi95/vue-toastify/archive/refs/heads/master.zip

Official Website: https://github.com/nandi95/vue-toastify

Install & Download:

# NPM
$ npm i vue-toastify