Create a reusable primeVue toastService

Question

I was wondering if there is a way to create a reusable script/class/service with a primevue toast function call so that I don't need to call the primevue toast function directly in every component.

What I've tried to do so far is 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 app with the following error:

Uncaught Error: useToast No PrimeVue Toast provided! (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) Modules../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 fix this, or create a function that makes this add() call so I don't need to call it every time?

Answer 1

Maybe the following solution is suitable for you:

Add Toast in App.vue and add a watch that checks for messages from the store

shop

import { createStore } from "vuex";

export default createStore({
    state: { errorMessage: "" },
    mutations: {
        setErrorMessage(state, payload) {
            state.errorMessage = payload;
        },
    },
    actions: {},
    modules: {},
    getters: {
            getErrorMessage: (state) => state.errorMessage,
    },
});

Then in any other component just update the message

store.commit("setErrorMessage", error.message);

Answer 2

This solution worked for me, but I'm not sure it's a good solution.

First: Export the application from main.ts

// main.ts
import {createApp} from 'vue';
import App from '@/App.vue';

import PrimeVue from 'primevue/config';
import ToastService from 'primevue/toastservice';

export const app = createApp(App);

app.use(PrimeVue);
app.use(ToastService);

app.mount('#app')

Second: Import the application and use the toast service of app.config.globalProperties

// myToastService.ts
import {ToastSeverity} from 'primevue/api';
import {app} from '@/main';

const lifeTime = 3000;

export function info(title: string = 'I am title', body: string = 'I am body'): void {
  app.config.globalProperties.$toast.add({severity: ToastSeverity.INFO, summary: title, detail: body, life: lifeTime});
};

export function error(title: string = 'I am title', body: string = 'I am body'): void {
  app.config.globalProperties.$toast.add({severity: ToastSeverity.ERROR, summary: title, detail: body, life: lifeTime});
};

Third: Import myToastService in the component.

// myTestToastComponent.vue