ToastService $toast is not accessible using Composition API

[LadislavBohm]

In documentation in order to use toast we have to access it on like this

this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});

Since there is no this in setup() method of Composition API I can't access it like that:

<script lang="ts">
import { defineComponent } from "vue";
import Panel from "primevue/panel";

export default defineComponent({
  name: "Welcome",
  components: { Panel },
  setup() {
    //no "this" here
  }
});
</script>

I currently solved this by using my wrapper around ToastService registration but it would be nice to get it into library and provide us with some function like useToastService that would inject the service.

My workaround:

const toastPlugin: Plugin = {
  install: (app, options) => {
    const toast = app.use(ToastService).config.globalProperties.$toast;
    app.provide(toastInjectionKey, toast);
  }
};

export default toastPlugin;

I can submit some PR if you are interested.

[cagataycivici]

Thanks, added useToast;

import { defineComponent } from "vue";
import { useToast } from "primevue/usetoast";

export default defineComponent({
    setup() {
        const toast = useToast();
        toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
    }
})

[mateuszgiza]

@cagataycivici
I have installed Primevue@3.0.1 and still cannot access useToast in Typescript. There seems to be a missing declaration file "usetoast.d.ts" in exports.

Could not find a declaration file for module 'primevue/usetoast'.
'.../node_modules/primevue/usetoast.js' implicitly has an 'any' type.
Try `npm install @types/primevue` if it exists or add a new declaration (.d.ts) file containing `declare module 'primevue/usetoast';`ts(7016)

[duszek94]

In my app primevue@3.0.1 it is still not working, same behaviour as @mateuszgiza described. Is there a change that it will be fixed soon?

[xsonic]

Having the same issue.

Workaround is to add noImplicitAny to tsconfig.json:

{
    "compilerOptions": {
        ...
        "noImplicitAny": false,
        ...
    }
}

[showzyl]

Having the same issue.

Workaround is to add noImplicitAny to tsconfig.json:

{
    "compilerOptions": {
        ...
        "noImplicitAny": false,
        ...
    }
}

still not working..

[showzyl]

you can it use like this:

setup() {
   onMounted(() => {
      console.log('mounted')
      const toast = useToast()
      console.log(`toast: `, toast)
      toast.add({
        severity:'info',
        summary: 'info summary',
        detail:'info detail',
        life: 3000
      })
   })
}

[GayanChandima]

How to add PrimeVue Toast to Vue 3 Unit testing?
component.vue----------------------------
import { useToast } from 'primevue/usetoast';
const toast = useToast();

//-------------------------------------------------------------
spec.js------------------------------------------
const wrapper = shallowMount(component, {
global: {
provide: {
toast:{ },
},
});

[ssalunkhe-opennms]

Vue3 + Typescript (composition API)

Toast is not working

Thanks, added useToast;

import { defineComponent } from "vue";
import { useToast } from "primevue/usetoast";

export default defineComponent({
    setup() {
        const toast = useToast();
        toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
    }
})

Not working with composition API (Vue3 + TS)

"vue": "^3.1.5",
"primevue": "3.6.0",
"typescript": "^4.3.5",
"vite": "^2.5.7",
"vite-jest": "^0.0.3",
"vue-tsc": "^0.2.2"

want to use toast as alert for max allowed number

[TLA020]

Same here doesn't work

[morhi]

Did you add the ToastService?

import ToastService from 'primevue/toastservice';

const app = createApp(App);
app.use(ToastService);

[jmverges]

This is still not working

[patrickmonteiro]

"primevue": "^3.12.2",

Dont work !

[frasza]

Not sure why it is like that as I am a beginner but I also had an issue and found a solution.

This was original setup that didn't work and console threw error saying No PrimeVue Toast provided!

I moved useToast out of method and now it works.

Maybe helps...

[mertsincan]

Please try;
#2533 (comment)

[murugappanrm]

Its odd, i tried all of the above with composition API and Vue/Vite, only the solution by @frasza worked. I am confused.

[SkipTheDragon]

This might be happening because internally, "useToast" function uses provide/inject. And as you may know from Vue's documentation, you can use these functions only inside Components, not functions. (This is only my intuition, did not check the code for the function "useToast")

Is there any way we could avoid using provide/inject, so we could get around this limitation and use "useToast" anywhere we want?

[skafendre]

I tried everything mentionned in this thread and nothing works on 3.21.0

[aless673]

Thanks you @frasza

I was facing the same issue with DynamicModal (https://primevue.org/dynamicdialog)
Even in the example they put the useDialog() ine the function, not outside

So puting the useDialog outside function just fixed the No PrimeVue Dialog provided

[donPuerto]

Everything as mention above not working at my end.
Im using Vue 3 PrimeVue latest version

[murugappanrm]

Frankly, though PrimeVue is great, its too much work of importing and configuring just get some UI components. Rather use others like Vuetify, As solution developers, we found the users dont really care too much about the looks of a page. They are more concerned with the feel and functionalities. Take the airlines industry for example - still using teletype interface and PC hardware dealers using the old Dbase software.

Perhaps i am reconsider using PrimeVue when it gets simpler.

[smorcuend]

The solution to this problem is very simple. Vue instance inside nuxt needs to know where is the runtime core service functions related to toast, dialog, confirm and so on.
You can provide to Vue instance from plugins/primevue.ts this services:

export default defineNuxtPlugin(nuxtApp => {
  const { vueApp, provide } = nuxtApp
  vueApp.use(PrimeVue, { ripple: true })
  vueApp.use(ToastService)
  vueApp.use(DialogService)
  vueApp.use(ConfirmationService)
  vueApp.component('Toast', Toast)
  vueApp.component('DynamicDialog', DynamicDialog)
  vueApp.component('Dialog', Dialog)
  vueApp.component('ConfirmDialog', ConfirmDialog)

  provide('toast', vueApp.config.globalProperties.$toast)
  provide('dialog', vueApp.config.globalProperties.$dialog)
  provide('confirm', vueApp.config.globalProperties.$confirm)
})

You can use without injection error on your component using primevue composables (wich provide TS types):

<template>
  <div>
    <Toast />
  </div>
</template>

<script setup lang="ts">
import { useToast } from 'primevue/usetoast'
const toast = useToast()

onMounted(() => {
  toast.add({
    severity: 'warn',
    summary: 'Hello',
    detail: 'World',
    life: 3000
  })
})
</script>

Related to: #2533

[lexman1958]

What frightens me is the number of imports and exports just to get some UI components. I would decided on using this product when things are simplified like Vuetify or Bootstrap. Its a very good product but too much "configuration".

[TakiMoysha]

I wanted to highlight toast.add in a composables component and encountered a similar error - Toast: No PrimeVue Toast provided. I have some idea about the nature of this error and I would be grateful if someone confirmed or refuted my guesses.
As in this issue, in my code I declared useToast() using const:

const newToast = () => { useToast().add() };

That is, through a closure that limits the execution context of the function. However, I assume that useToast works through the calling context. That is, if you call useToast() outside the closure, and where the template context is, then it should work.

const TOAST = useToast();
const newToast = () => { TOAST.add() };
// or using `function` instead const
function dialog() { useToast().add() }

UPDATE: ok, I think I made a mistake in the explanation. Perhaps this is due to "hoisting".
UDPATE2: okok, toast service uses inject to get toast. inject and provide can only be called inside setup. I think if the error had mentioned that inject was being used, something like: "Toast: inject function can't find Toast provided". The solution to this problem would be more obvious.