Lightweight Beautiful Toast Notification – Vue Toastification

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 & 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

Download Details:

Author: Maronato

Live Demo: https://github.com/Maronato/vue-toastification

Download Link: https://github.com/Maronato/vue-toastification/archive/master.zip

Official Website: https://github.com/Maronato/vue-toastification

Last Update: October 21, 2019

Install:

# Yarn
$ yarn add vue-toastification

# NPM
$ npm install vue-toastification --save

You Might Be Interested In:

Tags:

Add Comment