scrollBehavior fires before useAsyncData is finished

[rafalm1]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.3
• Package Manager: npm@7.17.0
• 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 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

[bdrtsky]

I've created a visual reproduction of an issue https://github.com/bdrtsky/scroll-issue-repro

[danielroe]

This may be resolved in the edge channel with nuxt/framework#3851. Would you confirm?

[mwohlan]

Seems to be fixed @danielroe . Updated Reproduction with edge channel: https://stackblitz.com/edit/github-2vxhdz-a4pukx?file=app.vue