I want to know if there's a way to create a reusable scritp/class/service with primevue toast function calls, in such a way that I don't need to call the primevue toast functions directly in every single component.
What I've tried to do up until now, was to create a ToastService.ts like this:
import { useToast } from 'primevue/usetoast';
const toast = useToast();
export function addMsgSuccess(): void {
toast.add({ severity: 'success', summary: 'Test', detail: 'Test', life: 3000 });
}
But this code crashes my application and I get the following error:
Uncaught Error: No PrimeVue Toast provided!at useToast (usetoast.esm.js?18cb:8:1) eval (ToastService.ts?73ba:3:1) Module../src/shared/service/ToastService.ts (app.js:1864:1) webpack_require (app.js:849:30) fn (app.js:151:20) eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/eslint-loader/index.js?!./src/views/cadastro-plano/CadastroPlano.ts?vue&type=script&lang=ts:31:87) Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/eslint-loader/index.js?!./src/views/cadastro-plano/CadastroPlano.ts?
Does anyone know how to solve this problem, or to create functions that make this add() call, so I don't need to call it everysingle time?
It is more imports, but this way you can have sensible consistent defaults. In my case exporting anything from main.js is not an option, so without extra dependencies it is my only choice.
With a class
In toastNotificationHelper.js:
import {ToastSeverity} from 'primevue/api';
export class toastService {
constructor(toastInstanse, defaultLifeTime) {
this.toastInstanse = toastInstanse
this.defaultLifeTime = defaultLifeTime ? defaultLifeTime : "3000"
}
displayInfo(title = 'Info', body = '', lifeTime = this.defaultLifeTime){
this.toastInstanse.add({severity: ToastSeverity.INFO, summary: title, detail: body, life: lifeTime});
}
}
In your component:
import { useToast } from 'primevue/usetoast';
import { toastService } from "@/utilities/toastNotificationHelper.js";
const toastNotifications = new toastService(useToast())
onMounted(() => {
toastNotifications.displayInfo()
});
With a function
In toastNotificationHelper.js:
import {ToastSeverity} from 'primevue/api';
const defaultLifeTime = 3000;
export function toastInfoNotification(toastInstanse, title = 'Info', body = '', lifeTime = defaultLifeTime) {
toastInstanse.add({severity: ToastSeverity.INFO, summary: title, detail: body, life: lifeTime});
};
In your component:
import { toastInfoNotification } from "@/utilities/toastNotificationService.js";
import { useToast } from 'primevue/usetoast';
const toast = useToast();
onMounted(() => {
toastInfoNotification(toast)
});