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

[mariusa]

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]

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