fix(nuxt): avoid premature hydration when using async layouts

[danielroe]

🔗 Linked issue

resolves #22091
resolves #21999

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

In #21450, we wrongly removed a workaround for an upstream vue bug (vuejs/core#6638), introducing a regression.

This PR reverts back to the workaround but ultimately we still need to resolve in vue core.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[gerbenvandijk]

@danielroe This issue still seems present on Nuxt 3.7.1 when you are using a custom error layout (error.vue in the root of the application)

[manniL]

@gerbenvandijk can you provide a reproduction + opening a new issue? Feel free to link this one in the new issue 👍

[gerbenvandijk]

@gerbenvandijk can you provide a reproduction + opening a new issue? Feel free to link this one in the new issue 👍

will sort it in the coming week somewhere :) thanks for the quick response!

[gerbenvandijk]

@manniL @danielroe

After setting up a reproduction I was able to resolve it on my end, it had to do with a hydration error that was introduced due to misunderstanding on my end.

I was using the useRequestHeaders() composable in a plugin (to pass some headers to Apollo) not realising that useRequestHeaders() is not available on the client side. After storing the specific header using the useState() composable this problem went away. Thanks anyways for your quick response and apologies :)

[danielroe]

No problem! Glad you resolved it 😊