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

[vortechron]

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

[mmis1000]

I think this is cause by the useRoute in layout.mjs

The update of useRoute is intentionally delayed to avoid old page get new route value before page loaded.

But use this in layout.mjs cause the layout to change after page is loaded. Thus the page is loaded twice (vue can't keep the page instance if dom parent changed).

If you change the useRoute().value to useRouter().value.currentRoute.value in layout.mjs. The problem is gone. (I monkey patched the file to confirm it)

I wonder if it is a solution that you just alias useRoute to computed(() => router.currentRoute.value) instead (But it may breaks something else?)

[tada5hi]

I am also getting this error, thus im not changing the page layout at all...

[tada5hi]

I can not confirm that this is fixed :/

[IsraelOrtuno]

I think this should be opened as it's not fixed. In my case this is happening when navigating from a page with

layout: false

To a page with layout that also contains a NuxtPage for nested views. Those nested views are loaded twice. Found a workaround with works in my case and it's creating an "empty.vue" layout and instead of using layout:false I use layout:"empty".

[tada5hi]

@danielroe

[danielroe]

Would you open a new issue with a reproduction? 🙏

[DesertCookie]

Was there a new issue opened somewhere? I've just encountered this issue after having accessing the app via a domain and Nginx Proxy Manager for the first time.

[bit4craft]

I also encountered the same situation, but it was a simple mistake. I was outputting the slot twice within the layout. It's natural for onMounted to be called twice in that case.