A simple, extendable, customizable toast notification library for Vue.js applications.
Features:
- Auto dismissable
- Drag & swipe to dismiss
- Pausable
- Dark and Light themes.
- Success, Error, Warning, Info types.
- Toast, Prompt, Loader modes.
- Multiple toasts at a time.
How to use it:
1. Import and register the Toastify component.
// Import import VueToastify from "vue-toastify";
// Register Vue.use(VueToastify,{ // settings });
2. Create toasts with various types:
this.$vToastify.success("Toast Message", "Toast Title"); this.$vToastify.error("Toast Message", "Toast Title"); this.$vToastify.warning("Toast Message", "Toast Title"); this.$vToastify.info("Toast Message", "Toast Title");
3. Create prompt toasts.
this.$vToastify.prompt({ body: "Are You Sure?", answers: { Yes: true, No: false } }).then(value => { if (value) { this.$vToastify.prompt("Is it a scam?") .then(value => console.log(value ? "Yay!" : "Nay")) } })
4. Create loaders.
this.$vToastify.loader("Something is loading...")
5. You can pass the parameters as an object.
this.$vToastify({ // body body: "Toast Body", // title title: "Toast Tigle", // or "warning", "info", "error" type : "success", // or loader, prompt mode: "", // URL url: { href: "https://www.vuescript.com/", target="_blank" }, // custom icon icon: { tag: "i", ligature: "", icon: "" }, // for prompt toast answers: { Yes: true, No: false }, // callback callback: null, });
6. All default settings.
Vue.use(VueToastify,{ // Only allow one notification on the screen at a time singular: false , // With backdrop or not withBackdrop: false, // Backdrop color backdrop: "rgba(0, 0, 0, 0.2)", // "top-left", "top-center", "top-right", "center-left", // "center-center", "center-right", "bottom-left", "bottom-center", "bottom-right" position: "bottom-right", // The duration in milliseconds the error notification should be visible for errorDuration: 8000, // The duration in milliseconds the success notification should be visible for. successDuration: 4000, // The duration in milliseconds the warning and info notification should be visible for. warningInfoDuration: 6000, // Whether the notifications disappears after the set time. canTimeout: true, // Whether the notifications can be paused by hovering over them. canPause: true, // Hide the progress bar hideProgressbar: false, // Show default title defaultTitle: true, // or "light" theme: "dark", // Whether new notifications should display on top of the stack or not. orderLatest: true, // If string supplied this will apply the usual transition classes (eg.: .name-enter-active); // If object supplied it expect a name and optionally a moveClass (this class has to use !important for its rules) attribute. // The name will be applied as above. The move class applied when the notifications adjust their position. // String / Object transition: null, // If set to false, no icon will be shown on the notification. iconEnabled: true, // Drag to dismiss or not draggable: true, // How far the notification should be dragged to dismiss dragThreshold: 0.75, // Base icon class baseIconClass: null, // Max number of toasts allowed to be visible at a time maxToasts: 6, // If turned on, only toasts with unique mode/type will be show. Others are queued. oneType: false, });
7. Extend the toast library.
Vue.use(VueToastify, { customNotifications: { clientError: { body: "You did it!", defaultTitle: false, icon: '<svg width="50" height="50">\n' + '<rect width="50" height="50" style="fill:rgb(0,0,255);" />\n' + '</svg> ', canTimeout: false }, moreOfTheAbove: { ... } });
Preview:
Download Details:
Author: nandi95
Live Demo: https://vue-toastify.netlify.app/
Download Link: https://github.com/nandi95/vue-toastify/archive/refs/heads/master.zip
Official Website: https://github.com/nandi95/vue-toastify
Install & Download:
# NPM
$ npm i vue-toastify