Skip to content

Vue Toastification

Vue notifications made easy!

Features

  • Built-in Nuxt support
  • Support for the new Composition API and Vue 3
  • Generic registration allows it to be used inside any app, even React!
  • Fully written in Typescript with full types support
  • RTL support
  • Easy to set up for real, you can make it work in less than 10sec!
  • Customize everything
  • Swipe to close ok_hand
  • Use your custom components or JSX as the toast body for endless possibilities!
  • Create custom experiences with onClose, onClick, and onMounted hooks
  • Custom toast filtering and enqueueing with lifecycle hooks
  • Remove toasts programmatically
  • Update toasts programmatically
  • Define behavior per toast
  • Pause toast when hovering and when the window loses focus eye
  • Fancy progress bar to display the remaining time
  • Use your themes and animations easily
  • And much more!

Installation 

$ yarn add vue-toastification
## or
$ npm install --save vue-toastification

Usage

Plugin registration

Add it as a Vue plugin: 

import Vue from "vue";
import Toast from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";

const options = {
    // You can set your default options here
};

Vue.use(Toast, options);

And then just call it in your components with 

this.$toast("I'm a toast!");

// Or with options
this.$toast("My toast content", {
    timeout: 2000
});
// These options will override the options defined in the "Vue.use" plugin registration for this specific toast

Or reference in your Vuex store with 

this._vm.$toast("I'm a toast!");

// Or with import
import Vue from "vue";

Vue.$toast("My toast content", {
    timeout: 2000
});

See also

Favorite site