useAsyncData clears out nested route data before leaving

[mvrlin]

Environment

---

• Operating System: Darwin
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.1
• Package Manager: pnpm@6.32.8
• Builder: vite
• User Config: build, buildModules, components, css, srcDir, typescript, vite, server
• Runtime Modules: -
• Build Modules: @intlify/nuxt3@0.1.10, @pinia/nuxt@0.1.8, nuxt-windicss@2.3.1

---

Reproduction

https://stackblitz.com/edit/github-ypbf5b?file=app.vue
To reproduce the issue, load the website with the url /users/foo and click Go Home

Describe the bug

useAsyncData clears out nested route data before leaving. If the next route is still loading, it produces a blank page, which isn't great 😢 Maybe it is due to provide/inject.

Additional context

Untitled.mov

Logs

No response

[Aareksio]

Works without provide/inject StackBlitz.

[mvrlin]

Works without provide/inject StackBlitz.

Yes, the issue is happening, when provide inject is used. Passing props to deep nested routes is not convenient.

[danielroe]

This looks like it might be the same issue as vuejs/core#5513.

[mvrlin]

@danielroe https://stackblitz.com/edit/github-kcptvx?file=app.vue same thing is happening, even without provide/inject, when the route is dynamically nested

Try going through /users/baz -> /users/baz/foo

[cinob]

Experiencing the same problem

[champ7champ]

Is the problem being solved? Or should I start inventing crutches?

[danielroe]

The route-based data issue is resolved and is no longer reproducible, so I'm going to close this. Note that if you are using provide/inject to inject data based on the route, then this will cause this kind of issue because of how suspense works. You can track vuejs/core#5513 for support for freezing provide/inject through suspense forks...

[mvrlin]

@danielroe The problem is still there. Before route changes, it clears the page. It shouldn't be that way.

Screen.Recording.2022-09-14.at.12.58.07.mov

[danielroe]

Did you check the reproduction I linked?

[mvrlin]

@danielroe Please take a look a this
When leaving nested users/id, it clears out the page.

Screen.Recording.2022-09-16.at.14.54.59.mov

[danielroe]

You should not share a key between the pages. Set it to user-${route.params.id} or something.

[mvrlin]

You should not share a key between the pages. Set it to user-${route.params.id} or something.

@danielroe I updated the keys, but nothing has changed.. Try out yourself, please.

[mvrlin]

@danielroe I think the problem is more deeper than asyncData itself. It's the way that Nuxt handles pages. Instead of loading one by one async page component, it should wait for all nested async pages to be loaded to fully show, like Nuxt2 does it.

[Luffyyy]

msedge_eW8BVcEJpZ.mp4

Not sure if this is the same issue, but I seem to experience something similar.

Reproduction; https://stackblitz.com/edit/github-f4gpfk-m2cxo3?file=app.vue

[mvrlin]

@Luffyyy Yes, as I said previously, it's the way that Nuxt handles async pages. It loads the root route component and then one by one loads the subroute component. Nuxt should wait until all nested pages is loaded before displaying everything.

[patrikalbertsson]

I have the same problem. @mvrlin did you find any workaround for this?

[mvrlin]

I have the same problem. @mvrlin did you find any workaround for this?

Unfortunately, no :(

[carlosmouracorreia]

Could this be the base for a solution @mvrlin , @danielroe ? Based on the suspense feature? I'm pretty sure it's related to how Nuxt handles page changes - vuejs/core#6736

This is a pretty important feature for modular websites these days, to have your asyncData data linked to a specific sub route - you see Instagram case on Settings, Youtube, Bitbucket, Grafana etc..
Btw, nested page loads work fine on first render (SSR) but not on client-side routing.

[Luffyyy]

For some reason this pull was downgraded from important to minor when it is definitely not a minor bug, it makes nested pages undesirable. It seems to also sit without any updates. I really hope it gets pushed soon otherwise I'm gonna have to get rid of all of the nested routes.

[mvrlin]

@Luffyyy I saw Atinux post on the twitter using the definePageMeta function. https://twitter.com/atinux/status/1604857928913195009?s=46&t=15UnCrF1REX4Dk39M81dpA

But I have no clue how to use the result from data outside the definePageMeta

[carlosmouracorreia]

It would be helpful to have some more information about how page transitions are done with Nuxt engine so a temporary solution can be arranged - even if depends on the open PR from Vue3 - this way one could prepare the base ground with a fork and help to ease the mind of people wanting to continue using Nuxt with Vue tooling.

[champ7champ]

Such an important problem has not been solved in a year, and there is not even a temporary fix. Probably have to say goodbye to nuxt

[danielroe]

I'm sorry you feel that way. As you see, it is an upstream bug which we have created a PR to fix, but it depends on Vue itself merging it.

[champ7champ]

@danielroe How long do you think it will take to solve this problem? Week, month, year?

[manniL]

@champ7champ Whenever the linked PR will be merged, which is not in our hands.
You could probably monkey-patch Vue in the meantime as "workaround" if really necessary.

[mvrlin]

@champ7champ Whenever the linked PR will be merged, which is not in our hands. You could probably monkey-patch Vue in the meantime as "workaround" if really necessary.

The patch doesn't work. Maybe the problem is not only with Suspense, but KeepAlive also.

[danielroe]

Once that PR is merged, we then have to update Nuxt's implementation to use the prop it adds.

[manniL]

Once that PR is merged, we then have to update Nuxt's implementation to use the prop it adds.

Whoops, good point 🙈

[danielroe]

The implementation will be pretty much instant on the Nuxt end 😆 The best thing you can do is not comment on this issue as it pings everyone who is subscribed.

[mvrlin]

The implementation will be pretty much instant on the Nuxt end 😆 The best thing you can do is not comment on this issue as it pings everyone who is subscribed.

I patched the Vue with npx patch-package with the PR you provided. Can you give a little instruction what to change in the Nuxt package to make it work? I tried to update NuxtPage component by adding suspensible prop, but it doesn't seem to work.

[champ7champ]

Activity is falling, the problem is moving further and further away, or is something being solved there?

[Luffyyy]

msedge_eW8BVcEJpZ.mp4

Not sure if this is the same issue, but I seem to experience something similar.

Reproduction; https://stackblitz.com/edit/github-f4gpfk-m2cxo3?file=app.vue

@danielroe This still happens in the latest build, is this intended behavior? where you leave the route and the child gets detached first while the parent isn't? It just looks plain weird.

Updated repro: https://stackblitz.com/edit/github-f4gpfk-qhgrfy?file=pages/test.vue

[danielroe]

It's definitely not intended behaviour, but I think it's also different from the original issue here. I've opened a new issue to keep track of it.