# Transition Group Root Element
breaking
# Overview
<transition-group>
no longer renders a root element by default, but can still create one with the tag
attribute.
# 2.x Syntax
In Vue 2, <transition-group>
, like other custom components, needed a root element, which by default was a <span>
but was customizable via the tag
attribute.
<transition-group tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</transition-group>
1
2
3
4
5
2
3
4
5
# 3.x Syntax
In Vue 3, we have fragment support, so components no longer need a root node. Consequently, <transition-group>
no longer renders one by default.
- If you already have the
tag
attribute defined in your Vue 2 code, like in the example above, everything will work as before - If you didn't have one defined and your styling or other behaviors relied on the presence of the
<span>
root element to work properly, simply addtag="span"
to the<transition-group>
:
<transition-group tag="span">
<!-- -->
</transition-group>
1
2
3
2
3
# Migration Strategy
Migration build flag: TRANSITION_GROUP_ROOT