Simple Extendable Notification Library For Vue - Vue Toastify

Install & Download:

# NPM
$ npm i vue-toastify

Description:

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: { ...
  }
});