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";
// Vue.use(window.vueToastr)
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", // Toast Name now you can remove by name
      title: "Easy Toast", // Toast Title
      msg: "we are injecting css classes to toast", // Message
      clickClose: false, // Click Close Disable
      timeout: 0, // Remember defaultTimeout is 5 sec..
      progressBarValue: 0, // Manually update progress bar value later; null (not 0) is default
      position: "toast-top-full-width", // Toast Position.
      type: "error", // Toast type,
      preventDuplicates: true, //Default is false,
      classNames: ["animated", "zoomInUp", "injectedStyle"],
      style: { backgroundColor: "blue", width: "150px" } // bind inline style to toast (check (Vue docs)[] for more examples)

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.