feat(nuxt): add warning in dev mode if layouts/pages do not have a single root node

[danielroe]

🔗 Linked issue

resolves nuxt/nuxt#13828, resolves nuxt/nuxt#14535

❓ 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)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is a persistent issue for users and this change aims to improve dx in dev mode by proactively warning about components that render a comment (ie. a fragment).

@antfu Can you think of a better way of checking this than inspecting the el with a setTimeout?

Note: this will only provide the warning on first render at the moment, rather than on subsequent navigation. Will need to look into how that can be done.

📝 Checklist

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

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	34cf53a
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6303b0f810a8d3000924129f

[antfu]

This is the method I could think of as well. Would nextTick, or onMounted be better than setTimeout?

[danielroe]

I couldn't think of a way to access onMounted within the render function but feel free to implement if you have an idea - it would be more idiomatic (except note nuxt/nuxt#13471 - 🤦)!

[danielroe]

This will only provide the warning on first render at the moment, rather than on subsequent navigation. Will need to look into how that can be done. (Marking as draft for that reason.)