/ Notification

toast notification component for vue2

toast notification component for vue2


cxlt-vue2-toastr is a non-blocking notifications for Vue2 ,Based on toastr stylings and design together with animate.css animation effects.


Using npm

npm install cxlt-vue2-toastr --save

Or using yarn

yarn add cxlt-vue2-toastr


Import Component

import CxltToastr from 'cxlt-vue2-toastr'


Optional Global configuration options

var toastrConfigs = {
    position: 'top right',
    showDuration: 2000
Vue.use(CxltToastr, toastrConfigs)

You can use All options mentioned in below options table except color option, instead, you should use below additional four color options in global configuration.

Option Type Description
successColor String background color for success notificatoin
infoColor String background color for info notificatoin
warningColor String background color for warning notificatoin
errorColor String background color for error notificatoin

Please note: if you pass color option in your notification instance, it will override above global color options.

Import styling files

import 'cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css'

Or use it in .vue with style tag

<style src="cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"></style>

Call Notification Instance


cxlt-vue2-toastr support below functions


You need to pass an option object which can have below values, used for controlling title, content, position etc.


Option Type Description
title String Title for notification
message String Content for notification
closeButton Boolean Need close button or not, default as false
progressBar Boolean default as false
type String Type for notification,default as success
position String Position for notification,default as top right
icon String Custom Icon
showMethod String Animation class name for shown,default as fadeIn
hideMethod String Animation class name for hide,default as fadeOut
showDuration Number Duration of show animation,unit as ms,default as 1000
hideDuration Number Duration of hide animation,unit as ms,default as 1000
delay Number Delay of animation,unit as ms,default as 0, means no delay
timeOut Number Duration of notification displaying,Unit as ms,default as 1500
color String background color of notification


  • success
  • info
  • warning
  • error


  • top right
  • bottom right
  • bottom left
  • top left
  • top center
  • bottom center
  • top full width
  • bottom full width


Any valid image url.


  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • flipInX
  • flipInY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • hinge
  • rollIn
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp


  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipOutX
  • flipOutY
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • rollOut
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Run this project

fork the repository,then follow below commands

git clone xxx
cd cxlt-vue2-toastr
npm run dev