Vue Toastification

Light, easy and beautiful toasts!

Inspired by React Toastify

• Vue Toastification

• Features

• Demo

• Installation

• Usage

• Positioning the Toast

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

• Remove toasts programatically

• 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

Demo

Need some more convincing? Check out the demo

Installation

$ yarn add vue-toastification

$ npm install --save vue-toastification

Usage

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

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 programatically 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  });

Render a component

Want to use some custom single file component inside the toast? You can! Just pass it as the toast content and it will be rendered.

import  MyComponent  from  "./MyComponent.vue";



this.$toast(MyComponent);

Close the toast using a custom component

When using custom components it is also possible to close the toast from within.

To do that, just emit the close-toast event

// MyComponent.vue

<template>

<button  @click="$emit('close-toast')">Close  Toast</button>

</template>




// OtherFile.vue

import  MyComponent  from  "./MyComponent.vue";



// This toast will be closed when the button inside it is clicked

this.$toast(MyComponent);

Render a JSX component

Sometimes you won't want to create a whole component just for a toast. In those cases, you can pass a JSX template to the Toast for it to render as a component

Note: Read this to learn how to enable JSX inside of Vue

const  myJSX  = (

<div>

<h1>My Title</h1>

<span>My text</span>

</div>

);



// Vue Toastification will generate the appropriate render function automatically.

this.$toast(myJSX);

Render a component with props and events

Usually it is not enough to just render a simple component and you'll need to handle events or pass props. You can do that too!

Just pass the content in the format

{

component:  Component,

props:  {

propName:  propValue  // Optional

},

listeners:  {

eventName:  eventHandler  // Optional

}

}

Props will be passed to the created component and the event listeners will be attached to it as well.

Note: Props passed are not reactive

const  content  =  {

// Your component or JSX template

component:  MyComponent,

// Props are just regular props, but these won't be reactive

props:  {

myProp:  "abc",

otherProp:  123

},

// Listeners will listen to and execute on event emission

listeners:  {

click:  ()  =>  console.log("Clicked!"),

myEvent:  myEventHandler

}

};



this.$toast(content);

Dismiss toasts programatically

When a toast is created, an ID is assigned to it. You can use it later to programatically dismiss the toast.

You can also choose a custom ID (String or Number) for the toast during its creation.

// Get the toast ID on creation

const  toastId  =  this.$toast("my toast");



// Dismiss it later

this.$toast.dismiss(toastId);



// Pass your custom ID to the toast

this.$toast("my other toast",  { id:  "my id"  });

this.$toast.dismiss("my id");

Clear all toasts

You can also dismiss all toasts at once using clear.

this.$toast("my toast A");

this.$toast("my toast B");

this.$toast("my toast C");



// Dismiss all toasts

this.$toast.clear();

API

Plugin registration (Vue.use)

Toast (this.$toast)

Toast Content Object

Toast Options Object

⚠️️ Toast options supersede Plugin Registration props ⚠️

License

Copyright (C) 2019 Maronato. Licensed under MIT