nuxt
`useAsyncData` clears out nested route data before leaving
Environment
- Operating System:
Darwin - Node Version:
v16.14.2 - Nuxt Version:
3.0.0-rc.1 - Package Manager:
[email protected] - Builder:
vite - User Config:
build,buildModules,components,css,srcDir,typescript,vite,server - Runtime Modules:
- - Build Modules:
@intlify/[email protected],@pinia/[email protected],[email protected]
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
https://user-images.githubusercontent.com/24970784/164979549-cdb21c9c-f791-4a6a-9c7d-a1084f2c78e8.mov
Logs
No response
Works without provide/inject StackBlitz.
Yes, the issue is happening, when provide inject is used. Passing props to deep nested routes is not convenient.
This looks like it might be the same issue as https://github.com/vuejs/core/issues/5513.
@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
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 https://github.com/vuejs/core/issues/5513 for support for freezing provide/inject through suspense forks...
@danielroe The problem is still there. Before route changes, it clears the page. It shouldn't be that way.
https://user-images.githubusercontent.com/24970784/190124328-56a10749-c480-450e-b48b-33e7929ca3ad.mov
@danielroe Please take a look a this When leaving nested users/id, it clears out the page.
https://user-images.githubusercontent.com/24970784/190633458-9ccbf568-f26a-42ac-b184-adc7ce73d62a.mov
You should not share a key between the pages. Set it to user-${route.params.id} or something.
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.
@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.
https://user-images.githubusercontent.com/11510099/191902944-897aa7a5-4785-4e11-8408-32cc24acbf45.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
@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.
I have the same problem. @mvrlin did you find any workaround for this?
I have the same problem. @mvrlin did you find any workaround for this?
Unfortunately, no :(