Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<NuxtChild /> is reloading parent page in Nuxt 3.

See original GitHub issue

Environment

Operating System: Darwin
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.3
Package Manager: npm@8.5.0
Builder: vite
User Config: runtimeConfig, typescript, modules, tailwindcss
Runtime Modules: @nuxtjs/supabase@0.1.16, @nuxtjs/tailwindcss@5.1.2
Build Modules: -

Reproduction

https://codesandbox.io/s/nuxt-3-child-routes-ony35p?file=/pages/index.vue

Describe the bug

<NuxtChild /> routes should not reload the parent page and lose state.

If I navigate to child 1 or child 2, the parent index page is re-rendered / loaded when it should simply load in the child and maintain its state. I believe this is the behaviour in Nuxt 2.

I have a reproduction link above but even on CodeSandbox, the script is not working for some reason. It’s not 100% needed to demonstrate the bug but would make the reloading issue more apparent as the count gets reset back to zero on each navigation within the parent index (this same code works locally but there appears to be an issue on CodeSandbox regarding this).

Additional context

This could be a bug or it could be a misunderstanding with how routes and layouts now work in Nuxt 3. Unfortunately the documentation in Nuxt 3 regarding routing is very minimal so I’m not able to see if it’s this way by design and instead some misconfiguration on my part.

Logs

No response

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

danielroecommented, Jun 7, 2022

The issue was that <NuxtLayout> was the root element of your page. It needs to be wrapped in another element. We could possibly add a comment about that in the docs.

Here’s your repro, with only that change made: https://github-tlz3zz--3000.local-corp.webcontainer.io/child-2

0reactions

danielroecommented, Jun 8, 2022

~> https://github.com/nuxt/framework/pull/5345

Top Results From Across the Web

How to render parent's head tags on refreshing child in Nuxt JS?

In this setup, everything is working perfectly till I refresh the page while in child page. When I am refreshing any of the...

Nested Pages - Nuxt

Nested Pages. How to use the Nuxt Child component to create parent and child pages. In this example: pages/parent.vue contains the <NuxtChild> component....

pages/ · Nuxt Directory Structure

You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching...

[Solved]-Nuxt child: parent route works incorrectly-nuxt.js

You could try this Nested Route method: pages/ -index.vue (1) -index/ --_id.vue (2) --_index.vue (3). In index/index.vue , you can just render empty ......

Why does changing nested routes reload the parent route?

I still need the :key there otherwise the page won't reload. I can solve this by this beforeRouteUpdate(to, from, next) { if (this.id!=...