onLeave in page transition breaks onUnmounted in pages

[tetz2442]

Environment

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: yarn@1.22.22
• Builder: -
• User Config: devtools, runtimeConfig, vite, modules, image, css, svgSprite, colorMode
• Runtime Modules: @vueuse/nuxt@10.9.0, @nuxt/image@1.5.0, @nuxtjs/color-mode@3.3.3, @nuxtjs/svg-sprite@1.0.2, @nuxtjs/strapi@1.12.0, @pinia/nuxt@0.5.1
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-1j8bob?file=pages%2Findex.vue

Describe the bug

I'm trying to add JavaScript based page transitions to my nuxt 3 app. As soon as you set the onLeave callback in the page transition, onUnmounted hooks no longer work. This even applies to composables that are used within a page component.

Additional context

No response

Logs

No response

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-1j8bob (Open reproduction)

[OrbisK]

as a workaround you can use

onScopeDispose(() => {
  console.log('Unmounted about');
});

[JordanMcn]

Hello! I’m experiencing a similar issue. After running several tests, the problem still occurs even when I remove the onLeave transition.

In my case, onUnmounted inside pages is triggered only if I remove mode: "out-in".

I’m configuring transitions in a different way than the author of the issue, not via definePageMeta({ pageTransition: transitionConfig }) in the pages, but by adding the transition to <NuxtPage> in app.vue:

<NuxtLayout>
  <NuxtPage :transition="globalTransition" />
</NuxtLayout>

Reproduction:
https://stackblitz.com/edit/github-7lgemxyt?file=app%2Fapp.vue