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.
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
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.
This awesome script developed by s4l1h, Visit their official github repository for more information and follow for future updates.
