Light, Easy and Beautiful Toast Notification Library | Vue Toastification

By webcodeflow

Toastification is a lightweight, configurable, and very nice toasted notification library for Vue.js applications.

toast notification npm, toast notification jquery, toast notification example, toast notification ui, bootstrap 4 toast notification example, toast notification javascript

Features

Compatible with Vue 3!
Public logging allows it to be used within any application, even React!
Fully written in ink script with full types support
RTL support
It’s so easy to set up in real life, you can get it up and running in less than 10 seconds!
customize everything
swipe to close 👌
Use your custom components or JSX as a toast for endless possibilities!
Create custom experiences with the onClose , onClick, and onMounted hooks
Filter custom toast and put it in line with life cycle hooks
Programmatically remove toast
Programmatically update the toast
Define the behavior for each toast
Pause the toast on hover and when the window loses focus 👁
Imaginary progress bar to display the remaining time
Easily use your own themes and animations
And much more!

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-toastification

# NPM
$ npm install vue-toastification --save

1. Install and import 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 a toast notification to 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. These options will override the Toast 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(){}

});

6. 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");

API

Plugin registration (app.use)

Option	Type	Default	Description
position	String	`top-right`	Position the toast on the screen. Can be any of top-right, top-center, top-left, bottom-right, bottom-center, or bottom-left.
newestOnTop	Boolean	`true`	Whether or not the newest toasts are placed on the top of the stack.
maxToasts	Number	`20`	A maximum number of toasts on each stack at a time. Overflows wait until older toasts are dismissed to appear.
transition	String or Object	`Vue-Toastification__bounce`	Name of the Vue Transition or object with classes to use. Only `enter-active`, `leave-active` and `move` are applied.
draggable	Boolean	`true`	Whether or not the toast can be dismissed by being dragged to the side.
draggablePercent	Positive Number	`0.6`	By how much of the toast width in percent (`0` to `1`) it must be dragged before being dismissed.
pauseOnFocusLoss	Boolean	`true`	Whether or not the toast is paused when the window loses focus.
pauseOnHover	Boolean	`true`	Whether or not the toast is paused when it is covered by the mouse.
closeOnClick	Boolean	`true`	Whether or not the toast is closed when clicked.
timeout	Positive Integer or false	`5000`	How many milliseconds for the toast to be auto dismissed, or false to disable.
container	HTMLElement or function that returns/resolves into an HTMLElement	`document.body`	The container where the toasts are mounted.
toastClassName	String or Array of Strings	`[]`	Custom classes applied to the toast.
bodyClassName	String or Array of Strings	`[]`	Custom classes are applied to the body of the toast.
hideProgressBar	Boolean	`false`	Whether or not the progress bar is hidden.
icon	Boolean, String, Object Vue Component or JSX	`true`	Custom icon class to be used. When set to, the icon is set automatically depending on the toasted type and `false` disables the icon. Object shape is `{ iconClass: String, iconChildren: String, iconTag: String }`
toastDefaults	Object	`undefined`	Toast’s defaults object for configuring default toast options for each toast type.
filterBeforeCreate	Function	`NOOP`	Callback to filter toasts before their creation. Takes a `toast` and `toasts` argument and returns a `toast` or `false`
filterToasts	Function	`NOOP`	Callback to filter created toasts. Takes a list of `toasts` argument and return a filtered list of `toasts`
closeButtonClassName	String or Array of Strings	`[]`	Custom classes are applied to the close button of the toast.
closeButton	`false`, Vue Component, JSX or HTML Tag name	`"button"`	The custom component can be used as the close button.
showCloseButtonOnHover	Boolean	`false`	Only shows the close button when hovering over the toast.
containerClassName	String or Array of Strings	`[]`	Extra CSS classes or classes are added to each of the Toast containers.
onMounted	Function `(containerApp, containerComponent) => void`	`undefined`	A callback is executed when the Toast container is mounted. Receives the app and container instances as parameters.
accessibility	`{ toastRole?: string; closeButtonLabel?: string }`	`{ toastRole: "alert", closeButtonLabel: "close" }`	Accessibility options. Define the `role` attribute of the toast body and the `aria-label` attribute of the close button.
rtl	Boolean	`false`	Enables Right to Left layout.
eventBus	EventBus instance	auto-generated	EventBus instance is used to pass events between the interface and the plugin instance.
shareAppContext	Boolean or App instance	`false`	Whether or not to share your main app’s context with Vue Toastification.

Toast (toast)

Parameter	Type	Required	Description
content	String, Vue Component, JSX, or Object	Yes	Toast contents. It can either be a string, a Vue Component, a JSX template or an Object. The shape of the object and its properties are described
options	Object	No	Toast options.

Toast Content Object

Prop	Type	Required	Description
component	Vue Component or JSX	Yes	The component that will be rendered.
props	Object	No	`propName: propValue` pairs of props that will be passed to the component. These are not reactive
listeners	Object	No	`eventName: eventHandler` pairs of events that the component can emit.