Toast Error in VILT Stack Navigating to a page from other page while the toast was still open [Bug]:

[nehry-micto]

Reproduction

n/a

Describe the bug

Calling a toast then navigating to other page while the toast was still open giving an error. I think it was because the toast was still there but the parent component was unmounted? I'm using Laravel, Inertia, Vue and TailwindCSS. Is there a work around for this?

This is the AuthenticationLayout.vue where I added toast component The error I encountered while the toast was open, then navigating to other page.

System Info

Brave Browser

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[seergiue]

Same issue here

[sadeghbarati]

Can you guys provide a minimal reproduction with Stackblitz?

[nehry-micto]

I have created a temporary solution, I added an event handler from inertia https://inertiajs.com/events, it listen if you navigated to other page, then I added a function that calling the dispatch to remove the toast.

use-toast.js

function removeAllToast() {
    dispatch({ type: actionTypes.REMOVE_TOAST });
}
export { toast, useToast, removeAllToast };

AuthLayout.vue

let removeStartEventListener = router.on("start", (event) => {
    removeAllToast();
});

onUnmounted(() => {
    removeStartEventListener();
});

[plymth]

@nehry-micto you can also do the following and use the useToast().dismiss() so you don't have to create an additoinal function.

let removeStartEventListener = router.on("start", (event) => {
  useToast().dismiss()
});

onUnmounted(() => {
    removeStartEventListener();
});

[sadeghbarati]

<Toaster> component must be used in app-wide components like layouts, it should not be placed in pages/routes components

[stefanocurnis]

<Toaster> component must be used in app-wide components like layouts, it should not be placed in pages/routes components

I have it in my Layout, but with Inertia layouts are unmounted and remounted everytime you click.