Persitent accross layouts in Nuxt 3

[luminous8]

Hey,

I'm facing an issue when displaying a toast and navigating to a new page on a different layout with Nuxt 3 + Vue Sonner; the toast is not displayed.

I have the component in both of my layouts, but the toast is not fired.

Here's how I fired the toast:

await $toast.error('You need to be signed in to do this action');
await navigateTo({ name: 'auth' });

And how one of my layout looks like

<template>
    <div class="relative h-screen">
        <div><slot /></div>
        <client-only>
            <Toaster
                position="bottom-right"
                :toastOptions="{
                    className: '!rounded !shadow !text-sm !p-2.5',
                }"
            />
        </client-only>
    </div>
</template>

Any ideas on how to fix this?

[SelfhostedPro]

You may want to take a look at nested layouts to see if that's something that would help.

[cpreston321]

It could be worth trying to add in the app.vue

<client-only>
    <Toaster
        position="bottom-right"
        :toastOptions="{
            className: '!rounded !shadow !text-sm !p-2.5',
        }"
    />
</client-only>

vs adding it to thelayouts. App will contain it not matter what but when you switch layouts it will cause it re-render and lose state.

[luminous8]

It could be worth trying to add in the app.vue

<client-only>
  <Toaster
      position="bottom-right"
      :toastOptions="{
          className: '!rounded !shadow !text-sm !p-2.5',
      }"
  />
</client-only>

vs adding it to thelayouts. App will contain it not matter what but when you switch layouts it will cause it re-render and lose state.

Thanks for the suggestion, really smart and it works like a charm

[estnml]

In case someone else encounters the issue i had, my app.vue was:

<NuxtLayout>
    <Toaster :duration="3000" position="bottom-right"></Toaster>
    <NuxtLoadingIndicator color="linear-gradient(90deg, rgba(89,254,255,1) 0%, rgba(255,70,70,1) 100%)">
    </NuxtLoadingIndicator>
    <NuxtPage></NuxtPage>
</NuxtLayout>

then i moved Toaster component to top level, it is persistent accross layouts & route changes

<Toaster :duration="3000" position="bottom-right"></Toaster>
<NuxtLoadingIndicator color="linear-gradient(90deg, rgba(89,254,255,1) 0%, rgba(255,70,70,1) 100%)">
</NuxtLoadingIndicator>
<NuxtLayout>
    <NuxtPage></NuxtPage>
</NuxtLayout>