Easy Toaster Component For VueJS 1/2

Easy Toaster Component For VueJS 1/2

An easy and highly customizable toast component for Vue.js 1.x and 2.x.


Vue 1.x Vue 2.x

A toast plugin for vue/vue2.


Note: Since 1.x.x, only Vue 2 is supported. For Vue 1 users please stick to version 0.x.x

Issue/PR is welcomed, I'll response as soon as possible.



npm install vue-easy-toast --save


// before start
import Toast from 'vue-easy-toast'

// or a lite version without inline css, then you have to style yourself or manually import 'vue-easy-toast.css'
import Toast from 'vue-easy-toast/dist/vue-easy-toast-lite.min.js'
require('vue-easy-toast/dist/vue-easy-toast.css') // optional


// in your code
Vue.toast('Can I have everybody`s attention?')

// or
$vm.$toast('Let me give a toast to you all.')

// or with HTML Tags
$vm.$toast('Hi <strong>Jonh</strong>')


toast or $toast takes 2 parameter: (message, [options])

Parameter Type Default Description
id string easy-toast-default Unique identifier globally. Use this to create multiple toasts with different setups.
parent string body Selector of the container (TODO, not ready yet, position is fixed to the window)
className string, array Self-defined class names to pass through. There are 3 pre-defined classes: et-info, et-warn,et-alert, to toast with different background color
horizontalPosition string right Position horizontal of toast. There are 3 pre-defined positions: left, right and center
verticalPosition string top Position vertical of toast. There are 2 pre-defined positions: top and bottom
duration number 5000 The duration one toast will last, in milliseconds
mode string override override or queue. If override, the last toast will forcibly flush previous
closeable boolean false true or false. If true, the toast can be closed manually
transition string fade Built-in transitions: fade, slide-[up/down/left/right]. See also Transitions

Besides minimum styling, vue-easy-toast try not to be opinionated about the appearance. It is a simply a div(class="et-wrapper") wrapped a span(class="et-content"). Apply your css freely with them or with your own classes passed in as className.

Vue.toast('Hi, there!', {
  id: 'my-toast',
  parent: '#toast-container',
  className: ['my-toast', 'toast-warning'],
  horizontalPosition: 'right',
  verticalPosition: 'top',
  duration: 3000,
  mode: 'queue',
  transition: 'my-transition'
  • font-awesome? emoji?



Github Repository

Tags: #VueJs