Fragments

Overview

In Vue 3, components now have official support for multi-root node components, i.e., fragments!

2.x Syntax

In 2.x, multi-root components were not supported and would emit a warning when a user accidentally created one. As a result, many components are wrapped in a single <div> in order to fix this error.

  1. <!-- Layout.vue -->
  2. <template>
  3.   <div>
  4.     <header>...</header>
  5.     <main>...</main>
  6.     <footer>...</footer>
  7.   </div>
  8. </template>

3.x Syntax

In 3.x, components now can have multiple root nodes! However, this does require developers to explicitly define where attributes should be distributed.

  1. <!-- Layout.vue -->
  2. <template>
  3.   <header>...</header>
  4.   <main v-bind="$attrs">...</main>
  5.   <footer>...</footer>
  6. </template>

For more information on how attribute inheritance works, see Non-Prop Attributes.