navigating from one nested route to another nested route isn't synchronous

[4Kazelot]

Environment

• Operating System: Linux
• Node Version: v16.16.0
• Nuxt Version: 3.0.0-rc.10-27710894.0cc49e2
• Nitro Version: 0.5.2-27709289.11cc5cd
• Package Manager: npm@8.11.0
• Builder: vite
• User Config: experimental, typescript, vite

Reproduction

Go to the website and navigate between the links.

https://stackblitz.com/edit/github-lgscbs?file=pages/users/[id].vue

Describe the bug

When we go from one page to the other (which has a child with prop from api), we get the aforementioned warning.

Additional context

No response

Logs

No response

[TheDutchCoder]

That's because for a short time the API call hasn't resolved yet and data is not yet set.

Why don't you call the data in the page itself? It's a bit of an odd setup currently with both the [id].vue page and the /[id]/index.vue page. I think you're making it unnecessarily difficult on yourself.

[4Kazelot]

It would be completely unwise to fetch the same data on each page separately.

Therefore, it is a child, so that I do not have to fetch 5-6 times the same data. There is a parent who does it once and passes the data on to all children. This is the correct approach.

In Nuxt 2 this worked fine.

[TheDutchCoder]

Oh I see (one of) the issue(s), you're using useFetch inside of useAsyncData, you should be using $fetch instead: https://stackblitz.com/edit/github-lgscbs-2gtfyp?file=pages/mountains/[id].vue

However, even if using $fetch, there's still something wrong indeed, because if you v-if the NuxtPage it will still throw the warning which doesn't seem right.

I wonder if it's some underlying Vue Router behavior where the component doesn't get unmounted but reused and data is null for a split second?

If you use a normal structure without the double [id].vue and /[id]/index.vue, then it works fine. I don't think you should be using both.

[4Kazelot]

Yes, I meant $fetch instead of useFetch. Still, the problem persists.

In addition to the index.vue page, I have 5 others, and there may be even more in the future. Do I really have to duplicate the data fetching in each of them, instead of doing it once in the parent and just pass as prop?

[Luffyyy]

Having the same issue trying to navigate from one nested route to another nested router.

[Luffyyy]

@danielroe https://stackblitz.com/edit/github-lgscbs-qf3ajp?file=nuxt.config.ts still happens on latest Edge 😔

[4Kazelot]

I confirm this issue is still present. Moreover - this does not seem like a rare use case. I think many applications have nested routes and they have this problem. Can any intervention be expected in this matter? It's an annoying issue.

[danielroe]

Intervention is expected - we have a PR pending against vue itself: vuejs/core#6736

[champ7champ]

@danielroe I'm still suffering from this problem from project to project, I don't understand why the vue team can't fix it for so long

[danielroe]

@antfu and I are discussing another possible solution within Nuxt itself. We appreciate how frustrating this is and will see what can be done.

[mblachlov24]

#12487

This looks like the same bug. Can anything be done about it? I see this problem has been going on for a long time. After all, that's a pretty basic application use case. I have a lot of nested pages and it's really annoying. Navigating between nested routes is broken even in production mode (the data only changes after the page is rendered).

[danielroe]

@mblachlov24 Please read above: #14860 (comment)

[champ7champ]

Because of such problems, Nuxt 3 becomes simply useless....

[tberk]

Having the same issue trying to navigate from one nested route to another nested router.

I am having this issue still with 3.6.0

I have lots of nested pages too, this makes them unusable, any work around available for this except not using nested pages at all?

[Luffyyy]

Having the same issue trying to navigate from one nested route to another nested router.

I am having this issue still with 3.6.0

I have lots of nested pages too, this makes them unusable, any work around available for this except not using nested pages at all?

#20798