Clean and simple notification component for Vue.js

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

Install & Download:

# Yarn
$ yarn add vue-toastification

# NPM
$ npm install vue-toastification --save

Features:

Easy to setup for real, you can make it work in less than 10sec!
Customize everything
Swipe to close 👌
Use your custom components or JSX as the toast body for endless possibilities!
Create custom experiences with the onClose and onClick 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 window loses focus 👁
Fancy progress bar to display the remaining time
Use your themes and animations easily
And much more!

How to use it:

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,
    onClose: () => console.log("closed!")
});
// 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,
    onClose: () => console.log("closed!")
});

Positioning the Toast

By default, the toasts will be displayed at the top right corner of your screen, but you can set it manually using the position option.

The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.

Vue.use(Toast, {
    // Setting the global default position
    position: "top-left"
});


// Or set it per toast
this.$toast("I'm a toast", { position: "bottom-left" });

Toast types

Depending on the context, you may want to use toasts of different colors. You can easily do that by setting the type of toast to be displayed.

this.$toast("Default toast");
this.$toast.info("Info toast");
this.$toast.success("Success toast");
this.$toast.error("Error toast");
this.$toast.warning("Warning toast");

// You can also set the type programmatically when calling the default toast
this.$toast("Also a success toast", {
    type: "success"  // or "error", "default", "info" and "warning"
});

Setting the type only works when using this.$toast, it won’t work when registering the plugin with Vue.use.

Setting the toast timeout

You can set for how long the toast will remain on the screen (in milliseconds) using the timeout option, or disable it altogether by setting it to false

// 1 second
this.$toast("Quick toast", { timeout: 1000 });

// Or make the toast permanent until manually closed
this.$toast("Persistent toast", { timeout: false })

// Or set it when registering the plugin
Vue.use(Toast, { timeout: 2000 });

Preview:

This is image title

Download Details:

Author: Maronato

Live Demo: https://maronato.github.io/vue-toastification/

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

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

#vuejs #javascript #vue-js