Lightweight Beautiful Toast Notification - Vue Toastification

Install & Download:

# Yarn
$ yarn add vue-toastification
# NPM
$ npm install vue-toastification --save

Description:

Toastification is a lightweight, configurable, pretty nice toast notification library for Vue.js apps.

Key features:

5 types: default, info, error, warning, success.
6 positions to fit your needs.
Mobile-friendly. It allows you to dismiss the toasts via drag& swipe.
Auto dismisses after a timeout. And allows to auto pause on hover or when out of focus.
Custom icons.
And much more.

How to use it:

1. Install and import the Vue Toastification.

import Vue from "vue";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

2. Register the component.

Vue.use(Toast, {
  // registration props here
});

3. Send the toast notification to the users.

this.$toast("I'm a toast!", {
  // toast opitons here
});

4. Registration props.

Vue.use(Toast, { 
  // top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.
  position: 'top-right',
  // place newest toast on the top
  newestOnTop: true,
  // the max number of toasts
  maxToasts: 20,
  // name of the Vue Transition or object with classes to use
  // only enter-active, leave-active and move are applied.
  transition: 'Vue-Toastification__bounce',
  // duration in ms
  // or an object: {enter: Number, leave: Number}
  transitionDuration: 750,
  // allows to dismiss by drag & swipe events
  draggable: true, 
  draggablePercent: 0.6,
  // auto pause when out of focus
  pauseOnFocusLoss: true,
  // auto pause on hover
  pauseOnHover: true,
  // close on click
  closeOnClick: true,
  // auto dismiss after this timeout
  timeout: 5000,
  // container element
  container: document.body,
  // custom classes
  toastClassName: [],
  // body classes
  bodyClassName: [],
  // show/hide the progress bar
  hideProgressBar: false,
  // show/hide the close button
  hideCloseButton: false,
  // custom icons here
  icon: true
});

5. Toast options. These will override the registration options.

this.$toast("I'm a toast!", { 
  // toast ID
  id: 'auto',
  // notification type
  // success, error, default, info and warning
  type: 'default'
  // top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.
  position: 'top-right',
  // allows to dismiss by drag &amp; swipe events
  draggable: true, 
  draggablePercent: 0.6,
  // auto pause when out of focus
  pauseOnFocusLoss: true,
  // auto pause on hover
  pauseOnHover: true,
  // close on click
  closeOnClick: true,
  // auto dismiss after this timeout
  timeout: 5000,
  // custom classes
  toastClassName: [],
  // body classes
  bodyClassName: [],
  // show/hide the progress bar
  hideProgressBar: false,
  // show/hide the close button
  hideCloseButton: false,
  // custom icons here
  icon: true,
  // callback
  onClick: function(){}
});

More API methods.

// update options
this.$toast.updateDefaults(update);
// dismiss all toasts
this.$toast.clear();
// dismiss a specific toast
this.$toast.dismiss(toastId);
// alternative ways to send toasts
this.$toast("Default toast");
this.$toast.info("Info toast");
this.$toast.success("Success toast");
this.$toast.error("Error toast");
this.$toast.warning("Warning toast");

Preview:

Lightweight Beautiful Toast Notification - Vue Toastification

Changelog:

v1.7.14 (10/18/2021)

Fix Nuxt composition API: It was not possible to use useToast with Nuxt. Now you can by importing from vue-toastification/composition/nuxt.
Fix RTL margins in firefox: Firefox does not invert margin: auto when in direction: rtl like other browsers do. That led to broken UI.

v1.7.12 (10/16/2021)

Minor update

v1.7.11 (01/18/2021)

Disable runtime container prop validation: Runtime validation for the container prop is not possible since it requires a direct instanceof comparison with HTMLElement.

v1.7.10 (01/13/2021)