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";
// Vue.use(window.vueToastr)
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", // 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)[https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles] 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.

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