Vuejs Toast Notification Component

In this post I am going to share simple Vuejs Toast Notification Component. Which help you to add notification feature on your vue App. It is A toast-style notification component for Vue.js 2. Without any 3rd dependencies.
Vuejs Toast Notification Component

  • info, warning, error, success notification types.
  • ‘toast-top-right’, ‘toast-bottom-right’, ‘toast-bottom-left’, ‘toast-top-left’, ‘toast-top-full-width’, ‘toast-bottom-full-width’, ‘toast-top-center’, ‘toast-bottom-center’
  • Progress bar.
  • Close on hover and/or click.


Include vue-toastr after Vue and it will install itself automatically:

<script src=""></script>
<script src=""></script>


  <div id="app">


Add css on notification and define color for your notification message.

.injectedStyle {
  .toast-title {
    color: red;
  .toast-message {
    color: orange;


"use strict";

var app = new Vue({
  el: "#app",
  data: function data() {
    return {
      showRemoveButton: false
  mounted() {
    this.$toastr.defaultClassNames = ["animated", "zoomInUp"];
    this.$toastr.defaultTimeout = 300000;
    this.$toastr.defaultPosition = "toast-top-center";
      name: "UniqueToastName", 
      title: "Easy Toast", 
      msg: "we are injecting css classes to toast", 
      clickClose: false, 
      timeout: 0, 
      progressBarValue: 0, // Manually update progress bar value later; null (not 0) is default
      position: "toast-top-full-width", 
      type: "error", 
      preventDuplicates: true, 
      classNames: ["animated", "zoomInUp", "injectedStyle"],
      style: { backgroundColor: "blue", width: "150px" } 

You can also overwrite defaults by passing options object during plugin registration

Vue.use(VueToastr, {
  defaultTimeout: 3000,
  defaultProgressBar: false,
  defaultProgressBarValue: 0,
  defaultType: "error",
  defaultPosition: "toast-bottom-left",
  defaultCloseOnHover: false,
  defaultStyle: { "background-color": "red" },
  defaultClassNames: ["animated", "zoomInUp"]

See live demo and download source code.


This awesome script developed by s4l1h, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.