useToast doesn't work in App.vue, works in other pages

UI Components for Vue
Post Reply
mariusa
Posts: 2
Joined: 16 Jun 2021, 12:02

16 Jun 2021, 12:10

Using Composition API in other pages works fine
https://primefaces.org/primevue/showcase/#/toast

I've also added it to other pages and it works fine. But in App.vue, exactly the same code gives an error:

Code: Select all


<template>
    <div>
        <!-- <Toast position="bottom-center" /> doesn't show -->
        <Toast />

        <Button>test</Button>
        <router-view></router-view>
   
    </div>
</template>

<script >
import { useToast } from "primevue/usetoast"
export default {
    setup() {
        const toast = useToast() //this shows error in console: Uncaught Error: No PrimeVue Toast provided!
        // https://github.com/primefaces/primevue/blob/54876807d17683c2cf1dc676309f5b5506c9b4ed/src/components/usetoast/UseToast.js
//toast.add({ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 })
     }
}
Somebody else also gets the same error: https://www.reddit.com/r/vuejs/comments ... vue_toast/

We need to be able to use toast in App.vue, as here is a global event handler for various events.
Would this be possible?

Thanks!

mariusa
Posts: 2
Joined: 16 Jun 2021, 12:02

17 Jun 2021, 08:31

Found the issue.
`app.mount('#app')` needs to be called after all the other directives/components.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests