DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

How does VuReact compile Vue 3's defineSlots() to React?

#react #vue #webdev #javascript

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:

  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 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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
type ICompProps = {
  children?: React.ReactNode;
  footer?: (props: { count: number }) => React.ReactNode;
};
Enter fullscreen mode Exit fullscreen mode

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.

Related Links

Top comments (0)