How to create reusable toastService with primeVue toast?

Question

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?

Answer 1

Solution without extra dependencies or importing/exporting App

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)
});