Vuejs Toast Notification Component

by Posted on

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
Features

  • 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.

Libraries

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

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-toastr/dist/vue-toastr.umd.min.js"></script>

HTML

<html>
 
<body>
  <div id="app">
  </div>
</body>
 
</html>

CSS

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

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


VueJs

"use strict";

var app = new Vue({
  el: "#app",
  data: function data() {
    return {
      showRemoveButton: false
    };
  },
  mounted() {
    this.$toastr.defaultClassNames = ["animated", "zoomInUp"];
    this.$toastr.s("hello");
    this.$toastr.defaultTimeout = 300000;
    this.$toastr.defaultPosition = "toast-top-center";
 
    this.$toastr.Add({
      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.

DEMO | DOWNLOAD

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.

Published by admin