nuxt
scrollBehavior fires before useAsyncData is finished
Environment
- Operating System:
Linux - Node Version:
v16.14.2 - Nuxt Version:
3.0.0-rc.3 - Package Manager:
[email protected] - Builder:
vite - User Config:
- - Runtime Modules:
- - Build Modules:
-
Reproduction
https://stackblitz.com/edit/github-2vxhdz?file=app/router.options.ts
- Scroll the main page a little bit.
- go to "AboutPage"
Describe the bug
useAsyncData() blocks route navigation by default but scrollBehavior is not aware of that i guess so it fires before route navigation which causes scroll to top of page and then after data is fetched we are redirected to new page.
Additional context
So for now only way to handle this case is instead of using scrollBehavior use lazy: true in useAsyncData and after its finished use for example window.scrollTo(0,0) in component itself?
from docs: https://v3.nuxtjs.org/api/composables/use-async-data/#params
Under the hood, lazy: false uses <Suspense> to block the loading of the route before the data has been fetched. Consider using lazy: true and implementing a loading state instead for a snappier user experience.
On top of that without defining scrollBehavior when routing to new route, page is not scrolled to top by default, instead scroll stays at the same position as before - is it desired behavior or a bug?
Logs
No response
I've created a visual reproduction of an issue https://github.com/bdrtsky/scroll-issue-repro
This may be resolved in the edge channel with https://github.com/nuxt/framework/pull/3851. Would you confirm?
Seems to be fixed @danielroe . Updated Reproduction with edge channel: https://stackblitz.com/edit/github-2vxhdz-a4pukx?file=app.vue
