Page component is created twice when navigating to it from page which uses different layout

Environment

• Operating System: Linux
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@8.14.0
• Builder: vite
• User Config: modules, css, vite, runtimeConfig, build
• Runtime Modules: @formkit/nuxt@1.0.0-beta.10
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-nodp3z?file=pages/page.vue

There are two pages and each of them uses a different layout. Just click on link to another page, then click on link to index page. You can see in console that index page component is created and mounted twice.

Describe the bug

If you are navigating using NuxtLink to another page which uses different layout, that page component is created twice.

Additional context

It started happening after upgrade from rc6 to rc7. Still happening on rc8.

I also noticed that await useAsyncData on rc6 does not block navigation when navigating to page with another layout. Layout shows without page, then after page data is loaded, page is mounted. This does not happen on rc7 and rc8, navigation is correctly blocked until data is fetched. Maybe it has something to do with this.

Logs

No response

[vortechron]

this problem already exist in 2019 on nuxt 2, I never thought I’m facing this again on nuxt 3 😭😅

[MrWook]

@deanmikan We got around this with using the NuxtLayout component on every page and disable the layout in definePageMeta. For Example:

<template>
  <NuxtLayout name="default">
    <div>
      someCOntent
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

Its really painfull but at least the pages are working again on our site