Vue Toast Component for notifications
Toaster is also known as Toasted Notifications. It's a plugin for implementing notifications in your Vue.js application. You can install it using npm or yarn.
# yarn yarn add vue-toast-notification # npm npm install vue-toast-notificationVue Toast Component has some great features. It provides animated notification pop up that is compact and non interrupting. It can be fully customized with timing and progress bar. It comes with predefined notification types like success, error, warning, information etc. Toast notifications will not interrupt the experience of the user by displaying the notifications on the screen right in front of the user's eyes, instead it will appear at the bottom with a readable message. You can also customize the visual elements, animations, durations and dismissing toasts. You can make toast messages interactive by configuring the inputs and buttons. You can also change the positioning of your notifications popup. Custom axis values can be used to do it. Users can choose different types of animation effects to show/hide the toast. You can also configure duration based on the notification message length and reading time. Here is an example of the usage of Notifications.
import Vue from 'vue'; import VueToast from 'vue-toast-notification'; // Import one of available themes import 'vue-toast-notification/dist/theme-default.css'; //import 'vue-toast-notification/dist/theme-sugar.css'; Vue.use(VueToast); let instance = Vue.$toast.open('You did it!'); //Vue.$toast.open({/* options */}); // Force close specific toast instance.close(); // Close all opened toast immediately Vue.$toast.clear();
Comments
0 comments
Please Sign in or Create an account to Post Comments