How does VuReact compile Vue 3's defineSlots() to 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 3's defineSlots()

macro is mapped into React.

Before We Start #

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

• All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
• The discussion assumes you are already familiar with the API shape and core behavior of Vue 3 defineSlots()

.

Compilation Mapping #

Vue defineSlots()

-> React slot prop types

defineSlots()

is the macro used inside Vue 3 <script setup>

to declare component slot types.

VuReact does not compile it into a runtime Hook. Instead, it maps slot declarations into the corresponding React props

types, where slots become children

or function-style props depending on the slot shape.

• Vue

<script setup lang="ts">
const slots = defineSlots<{
  default?(): any;
  footer(props: { count: number }): any;
}>();
</script>

• Compiled React

type ICompProps = {
  children?: React.ReactNode;
  footer?: (props: { count: number }) => React.ReactNode;
};

As the example shows, Vue defineSlots()

is transformed into React prop typing rather than a runtime API.

VuReact maps the default slot to children

, and named slots to the corresponding function-style props, preserving the natural relationship between Vue slots and React composition patterns.