nuxt
useRoute not correctly populated with async layout
Environment
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.8.2
- CLI Version: 3.10.0
- Nitro Version: 2.8.1
- Package Manager: [email protected]
- Builder: -
- User Config: devtools
- Runtime Modules: -
- Build Modules: -
Reproduction
https://stackblitz.com/edit/github-bvoawn?file=pages%2Findex.vue,app.vue,layouts%2FTestLayout.vue,pages%2F[profileId].vue
I left a comment in "TestLayout.vue" that you should uncomment to see a fix
Describe the bug
Upon navigating to a layout that uses top-level await, useRoute().params is not populated correctly on the client side. Upon hard refresh, it is populated correctly
Additional context
I left a comment in "TestLayout.vue" that you should uncomment to see a fix
Logs
No response
![bolt-new-by-stackblitz[bot] avatar](https://avatars.githubusercontent.com/in/182710?v=4 "Published by a pub.dev verified publisher"){kind=small}
If you use <div>Route Data: {{ route }}</div> in the template, there won't be a hydration error.
Where are you seeing a hydration error in my reproduction? Making that change doesn't fix the original issue either.
Where are you seeing a hydration error in my reproduction? Making that change doesn't fix the original issue either.
When using $route in the template, there were hydration errors on the dynamic page when hard-reloading
With regards to the issue mentioned, it seems to be a problem with the "top-level" const. If you use useRouter + currentRoute it works fine.
Any updates here? I see the MR for it hasn't had any activity for 3 weeks
I think we likely could implement a fix for this, but it would have to be applied only for layouts that are newly instantiated for the route (i.e. we don't want the route data to be updated in a layout that is still rendering the old page)... And we would have to verify that it doesn't lead to a flash of stale data (first the current route, then the new route).
