Can't use toasts

[codyfletcher]

I can't seem to get toasts to work. I suspect it has to do with my own "skill debt", specifically relating to the ToastService (since other components that do not use services work great)!

Steps to reproduce:

1. Create a nuxt-quickstart project

2. Add this to app.vue <script>

   import { useToast } from "primevue/usetoast";
   const toast = useToast();
   
   function showExampleToast() {
   toast.add({severity:'success', summary: 'Success Message', detail:'This is a toast', life: 3000});
   console.log("Toast done")
   }

3. Add this to app.vue <template>

   <Button label="Show Example Toast" @click="showExampleToast()"/>

Attempt 2

Additionally, I tried creating a nuxt plugin for the ToastService to see if that might do the trick, but it didn't.

import ToastService from "primevue/toastservice";
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(ToastService);
});

—

Any help is greatly appreciated!

[mertsincan]

Did you use <Toast /> component in the template? Also, this issue is not related to nuxt-plugin. Because you said it doesn't work when you registered it manually.

Additionally, our showcase is a nuxt project and uses nuxt-primevue module. Please see; https://primevue.org/toast/

[codyfletcher]

My bad, I forgot the <Toast /> tag. of course.

Thank you for the help! :)

[mertsincan]

No worries, thanks a lot for your update ;)