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.
