Title gets undefined during page transitions

Environment

---

• Operating System: Darwin
• Node Version: v18.12.1
• Nuxt Version: 3.0.0-rc.13
• Nitro Version: 0.6.1
• Package Manager: npm@8.19.3
• Builder: vite
• User Config: nitro, runtimeConfig, modules, alias, schemaOrg, image, colorMode, pwa
• Runtime Modules: @nuxtjs/tailwindcss@6.1.3, @kevinmarrec/nuxt-pwa@0.10.0, @nuxt/image-edge@1.0.0-27769790.4b27db3, @nuxtjs/color-mode@3.1.8, @pinia/nuxt@0.4.3, nuxt-schema-org@1.1.0-beta.5
• Build Modules: -

---

Reproduction

Minimal reproduction in the Stackblitz repository

The repository of the website in production

Describe the bug

Title gets undefined when transitioning between pages.

in app.vue:

<script setup>
useHead({
  titleTemplate: (title) => `${title} | Title Site`,
});
</script>

in my pages :

<script setup>
useHead({
  title: 'Title of the Page',
});
</script>

Note : I am using JS transition hooks with vue syntax (see Vue documentation) because of this upstream bug with Suspense (used by NuxtPage) #5844

Additional context

Following the previous issue #6183

Logs

No response

[danielroe]

You need to use <NuxtPage> for the title to be properly suspended during route transition: see https://stackblitz.com/edit/nuxt-starter-hohjgt.

I believe your issue would also be reproduced in a pure vue project but have not yet had time to confirm. You can try at https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main.

[BenjaminOddou]

I think that there is no possibility to enable JS transitions globally with <NuxtPage> for now @danielroe 🤔. The different hooks (onEnter, onLeave…) are not triggered when changing page.