[Vue 3] Transitions and multiple child elements


I’m little bit confused about transitions in Vue 3. According to Transitioning Between Elements it is possible to switch between multiple child elements in transitions (and it worked in Vue 2). But using example from guide I get

VueCompilerError: <Transition> expects exactly one child element or component.

Here’s exactly the same code: https://codesandbox.io/s/determined-archimedes-zrz8s?file=/src/components/HelloWorld.vue

Is this bug or maybe I did sth wrong? Fun fact - using only 2 elements, but with vue-if and vue-else, works properly.

Looks like a documentation problem to me.

There was a similar error in Vue 2 but it was shown in slightly different circumstances:


The difference is that in Vue 2 it performed the check at runtime based on how many children were actually created, whereas in Vue 3 it’s being checked during template compilation.

To fix it, switch the second and third v-if to v-else-if instead. That allows the compiler to confirm that only a single child will be created.

The documentation needs updating to use v-else-if.

Thank you for solution - it’s now more clear to me what happens there :slight_smile:

You saved me my night, thank you