midVue.js
How does Vue 3 handle 'Multi-Root' components?
Updated May 4, 2026
Short answer
Vue 3 supports 'Fragments', meaning a component can have multiple top-level nodes in its template.
Deep explanation
In Vue 2, every component had to be wrapped in a single <div>. Vue 3 removes this restriction. Internally, Vue treats multi-root components as a Fragment. Note that if a component is multi-root, Vue cannot automatically apply 'fallthrough attributes' (like class or style) to it.
Real-world example
Creating a table component where the child component returns multiple <td> tags directly, without a wrapper that would break table structure.
Common mistakes
- Forgetting that multi-root components require explicit `$attrs` binding if you want to pass attributes from the parent.
Follow-up questions
- Do multi-root components affect CSS scoping?