DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

How does VuReact compile Vue 3's TransitionGroup to React?

#javascript #webdev #vue #react

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.

In this article, we will look at how Vue's built-in <TransitionGroup> component is compiled into React code.

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

  1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
  2. The discussion assumes you are already familiar with Vue 3 <TransitionGroup>.

Compilation Mapping

List transition animations

<TransitionGroup> is Vue's built-in component for entering, leaving, and moving list items. It is the list-oriented counterpart to <Transition>.

  • Vue 
<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { TransitionGroup } from '@vureact/runtime-core';

<TransitionGroup name="list" tag="ul">
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</TransitionGroup>;
Enter fullscreen mode Exit fullscreen mode

As the example shows, Vue <TransitionGroup> is compiled into the VuReact Runtime TransitionGroup adapter.

This mapping preserves the core behavior of list transitions:

  1. It keeps the Vue-style transition semantics intact.
  2. It supports entering, leaving, and moving items in a list.
  3. It respects the tag prop for container rendering.
  4. It still requires stable key values for each list item.

Move transitions

<TransitionGroup> also supports smooth move animations when list items are reordered, usually through the move-class prop.

  • Vue 
<template>
  <TransitionGroup name="list" tag="ul" move-class="list-move">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<TransitionGroup name="list" tag="ul" moveClass="list-move">
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</TransitionGroup>;
Enter fullscreen mode Exit fullscreen mode 
.list-move {
  transition: all 0.5s ease;
}

.list-leave-active {
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Under the hood, move transitions are typically implemented with FLIP-style positioning and CSS transform transitions, which makes reordering feel smooth without sacrificing performance.

Custom container elements

The tag prop controls the rendered container element type.

  • Vue 
<template>
  <TransitionGroup name="fade" tag="div" class="item-list">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.name }}
    </div>
  </TransitionGroup>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<TransitionGroup name="fade" tag="div" className="item-list">
  {items.map((item) => (
    <div key={item.id} className="item">
      {item.name}
    </div>
  ))}
</TransitionGroup>;
Enter fullscreen mode Exit fullscreen mode

The tag prop keeps the generated DOM structure explicit and easy to reason about.

Transition features are preserved

<TransitionGroup> inherits the same transition-related capabilities as <Transition>, including classes and hooks.

  • Vue 
<template>
  <TransitionGroup
    name="slide"
    tag="div"
    :duration="500"
    @enter="onEnter"
    @leave="onLeave"
  >
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </TransitionGroup>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<TransitionGroup
  name="slide"
  tag="div"
  duration={500}
  onEnter={onEnter}
  onLeave={onLeave}
>
  {items.map((item) => (
    <div key={item.id}>{item.name}</div>
  ))}
</TransitionGroup>;
Enter fullscreen mode Exit fullscreen mode

VuReact preserves the transition API surface so list animations remain familiar after migration.

Compilation Summary

VuReact's TransitionGroup compilation strategy shows a complete list transition migration path:

  1. Vue <TransitionGroup> is mapped directly to the runtime adapter.
  2. Core props such as name, tag, and moveClass are supported.
  3. v-for rendering becomes map() rendering in React.
  4. Transition hooks and animation behavior are preserved.

The result is a React implementation that keeps Vue's list transition semantics while fitting into React's component model.

Related Links

Top comments (0)