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

[samuelbednarcik]

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

[Hui-quantblock]

In this case, the NuxtLoadingIndicator does not work properly

[deanmikan]

This is a huge issue if you have logic running the created/mounted fields as they get run twice. In our case this is fairly destructive.

We have a default layout that is used across almost all pages. However within a single page we change the layout using:

<script>
export default {
    setup() {
        definePageMeta({
            layout: 'alternate-layout'
       });
    }
}
</script>

This causes the page to be loaded first with the default layout, then again the alternate-layout hence running the created() and mounted() twice. Ouch.

If anyone knows of a work around for this until it's fixed I'm all ears 🦻

[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

[deanmikan]

Ouch. Are you running this on rc-8 @MrWook?

[kitae-yun]

!Same thing. I'm so painful

[MrWook]

@deanmikan yes we are working under rc-8