Press "Enter" to skip to content

Light, Easy and Beautiful Toast Notification Library | Vue Toastification

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

OptionTypeDefaultDescription
positionStringtop-rightPosition the toast on the screen. Can be any of top-right, top-center, top-left, bottom-right, bottom-center, or bottom-left.
newestOnTopBooleantrueWhether or not the newest toasts are placed on the top of the stack.
maxToastsNumber20A maximum number of toasts on each stack at a time. Overflows wait until older toasts are dismissed to appear.
transitionString or ObjectVue-Toastification__bounceName of the Vue Transition or object with classes to use. Only enter-active, leave-active and move are applied.
draggableBooleantrueWhether or not the toast can be dismissed by being dragged to the side.
draggablePercentPositive Number0.6By how much of the toast width in percent (0 to 1) it must be dragged before being dismissed.
pauseOnFocusLossBooleantrueWhether or not the toast is paused when the window loses focus.
pauseOnHoverBooleantrueWhether or not the toast is paused when it is covered by the mouse.
closeOnClickBooleantrueWhether or not the toast is closed when clicked.
timeoutPositive Integer or false5000How many milliseconds for the toast to be auto dismissed, or false to disable.
containerHTMLElement or function that returns/resolves into an HTMLElementdocument.bodyThe container where the toasts are mounted.
toastClassNameString or Array of Strings[]Custom classes applied to the toast.
bodyClassNameString or Array of Strings[]Custom classes are applied to the body of the toast.
hideProgressBarBooleanfalseWhether or not the progress bar is hidden.
iconBoolean, String, Object Vue Component or JSXtrueCustom 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 }
toastDefaultsObjectundefinedToast’s defaults object for configuring default toast options for each toast type.
filterBeforeCreateFunctionNOOPCallback to filter toasts before their creation. Takes a toast and toasts argument and returns a toast or false
filterToastsFunctionNOOPCallback to filter created toasts. Takes a list of toasts argument and return a filtered list of toasts
closeButtonClassNameString or Array of Strings[]Custom classes are applied to the close button of the toast.
closeButtonfalse, Vue Component, JSX or HTML Tag name"button"The custom component can be used as the close button.
showCloseButtonOnHoverBooleanfalseOnly shows the close button when hovering over the toast.
containerClassNameString or Array of Strings[]Extra CSS classes or classes are added to each of the Toast containers.
onMountedFunction (containerApp, containerComponent) => voidundefinedA 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.
rtlBooleanfalseEnables Right to Left layout.
eventBusEventBus instanceauto-generatedEventBus instance is used to pass events between the interface and the plugin instance.
shareAppContextBoolean or App instancefalseWhether or not to share your main app’s context with Vue Toastification.

Toast (toast)

ParameterTypeRequiredDescription
contentString, Vue Component, JSX, or ObjectYesToast 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
optionsObjectNoToast options.

Toast Content Object

PropTypeRequiredDescription
componentVue Component or JSXYesThe component that will be rendered.
propsObjectNopropName: propValue pairs of props that will be passed to the component. These are not reactive
listenersObjectNoeventName: eventHandler pairs of events that the component can emit.

Lightweight Beautiful Toast Notification, Vue Toastification Plugin/Github


See Demo And Download

Official Website(Maronato): Click Here

This superior jQuery/javascript plugin is developed by Maronato. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.