How do I use `toast.promise` properly in Nuxt?

[jonasfroeller]

I want to create a toast using a composable and the promise state should be reflected on other pages too, but it seems like the Promise is only active and resolvable on that page, where it is created.

The promise is pending till I move back to the page, where it was created.

[tre-dev]

Are you defining the <Toaster> component within the layout?

[jonasfroeller]

@tre-dev

No.

app.vue

<template>
  <div>
    <ConfigProvider :use-id="useSsrSaveId">
      <ShadcnToaster
        close-button
        position="top-center"
        offset="1.5rem"
      />
      <NuxtLoadingIndicator
        color="hsl(var(--primary) / 0.9)"
        error-color="hsl(var(--destructive))"
        :height="3"
        :duration="2000"
        :throttle="200"
      />
      <DynamicMeta :key="currentRouteName" />
      <div>
        <NuxtRouteAnnouncer />
        <NuxtLayout>
          <NuxtPage />
        </NuxtLayout>
      </div>
    </ConfigProvider>
  </div>
</template>

[jonasfroeller]

$toast causes the same issue. The toast stays undismissable and loads infinite.

[tre-dev]

Hm. Works fine for me. layouts/default.vue

<template>
  <div>
    <Toaster
      position="bottom-right"
      theme="dark"
    />
    <slot />
  </div>
</template>

[jonasfroeller]

Okay. You put it in a layout. I didn't. I will try that today.
Edit: Didn't help.