fix(nuxt): fix error on layout switching

[antfu]

🔗 Linked issue

fix #13309
resolves #21544
resolves #21534

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 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

I am not 100% sure, but it fixes the error in this reproduction: #13309 (comment)

From what I see, is that our LayoutLoader is an async component that has a unique key. When the layout gets changed, a new LayoutLoader is created. Because Vue's suspense can not catch async patches on deep branches (an known issue), causing it to have a DOM that is already dismissed.

The solution to solve that is to wrap it with a suspensible Suspense to capture the update properly.

📝 Checklist

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

[danielroe]

/trigger release

[github-actions]

🚀 Release triggered! You can now install nuxt@npm:nuxt3@pr-21450

[danielroe]

I think we should inject <Suspense> above the layout loader here (ie. it's the right thing to do). We should also investigate the regressions in the test suite; they need to be solved, but I don't think it indicates this is the wrong approach.

[darthf1]

Is it possible to land this the v3.6.0 as it resolves a lot of issues (at least for me)? @antfu mentioned this does not work with transitions enabled, but if it does not break anything its already an improvement? I have transitions disabled because #13471.

[danielroe]

This is not merged because it does break some other things (not just transitions). But we'll merge ASAP as soon as we can, and release in a patch.

[darthf1]

Ok thanks for replying!

[danielroe]

/trigger release

[github-actions]

🚀 Release triggered! You can now install nuxt@npm:nuxt3@pr-21450

[c-schwan]

@antfu is not ready for review, it does not fix all the linked issues ;-(

[danielroe]

@c-schwan Could you be more specific? A partial fix is still worth merging but sometimes error messages like #13309 stem from different causes and aren't fixed in a single change.

[c-schwan]

@c-schwan Could you be more specific? A partial fix is still worth merging but sometimes error messages like #13309 stem from different causes and aren't fixed in a single change.

#21701 should work on my opinion for major releases. if you having a guard middleware like auth protecting page resources it should work as expected, or am i wrong?

[danielroe]

@c-schwan This PR fixes that issue, in my testing.

[c-schwan]

@c-schwan This PR fixes that issue, in my testing.

Nuxt 3.6.0-28124217.43844474 (npm:nuxt3@pr-21450)

https://stackblitz.com/edit/middleware-nuxt

but still not working

[danielroe]

Have you tried it locally?

[c-schwan]

Have you tried it locally?

i tried locally with the stackblitz project and locally in our project, both no luck

[c-schwan]

Have you tried it locally?

it works well on the first time switching the layout but going back (Browser or via NuxtLink) it won't be called anymore