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

> Source: <https://dev.to/smirk9581/how-does-vureact-compile-vue-3s-defineslots-to-react-3jad>
> Published: 2026-05-23 01:25:00+00:00

[VuReact](https://github.com/vureact-js/core) 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

``` js
<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.