<transition-group>
no longer renders a root element by default, but can still create one with the tag
attribute.
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>
In Vue 3, we have fragment support, so components no longer need a root node. Consequently, <transition-group>
no longer renders one by default.
tag
attribute defined in your Vue 2 code, like in the example above, everything will work as before<span>
root element to work properly, simply add tag="span"
to the <transition-group>
:<transition-group tag="span"> <!-- --> </transition-group>
Migration build flag: TRANSITION_GROUP_ROOT
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/guide/migration/transition-group.html