We're Having Toast: Toast Notifications in PrimeVue
![Toast Notifications in PrimeVue Toast Notifications in PrimeVue](/_ipx/s_1200x1026/https://koinkash.s3.amazonaws.com/blog/posts/were-having-toast-toast-notifications-in-primevue/were-having-toast-toast-notifications-in-primevue.webp)
![larrydev](https://koinkash-blog-index-prophet.s3.amazonaws.com/content/koinkash/larrydev.webp)
Toast notifications are an essential component of modern web applications, providing users with timely feedback and alerts. In Vue.js applications, PrimeVue offers a convenient and customizable way to implement toast notifications through its Toast component. In this article, we'll explore how to use PrimeVue's toast notifications in Vue.js applications and examine a sample code snippet that demonstrates their usage.
import { defineStore } from "pinia";
import type { ToastMessageOptions } from "primevue/toast";
import { useToast } from "primevue/usetoast";
export const toastStore = defineStore("toastStore", () => {
const toast = useToast();
function addToast(
severity: ToastMessageOptions["severity"] = "info",
summary: ToastMessageOptions["summary"] = "",
detail: ToastMessageOptions["detail"] = "",
life: ToastMessageOptions["life"] = 0
) {
toast.add({
severity,
summary: summary.toUpperCase(),
detail: `${detail} ${life}ms!`,
life,
});
if (life > 0) {
setTimeout(() => {
removeToast(life);
}, life);
}
}
function removeToast(life: ToastMessageOptions["life"]) {
toast.add({
severity: "success",
summary: "Done!".toUpperCase(),
detail: `Toast cooked in ${life}ms!`,
});
}
return { addToast, removeToast };
});
Imports:
The code imports necessary functions and types from pinia and primevue libraries.
Store Definition:
toastStore is defined using defineStore from Pinia. This store will manage toast notifications in the application.
Toast Initialization:
useToast hook from PrimeVue is used to initialize the toast instance, which will be used to add and remove toast notifications.
Add Toast Function:
The addToast function creates a new toast with severity, summary, detail, and life duration, adding it with toast.add. For life > 0, a timeout auto-removes it.
Remove Toast Function:
The removeToast function is responsible for removing the toast notification. It adds a success toast indicating that the original toast has been successfully removed.
Return Object:
The store returns an object containing the addToast and removeToast functions, which can be accessed and used in Vue components.