VuReact is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common v-slot directive is compiled into React code by VuReact.

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 Vue 3's v-slot directive usage.

Compilation Mapping

v-slot / #: Basic slot usage

v-slot (shorthand # ) is Vue's directive for defining and using slots, enabling content distribution and reuse in components.

Default slot

Vue

<!-- Parent component --> <MyComponent> <template #default > <p> Default slot content </p> </template> </MyComponent>

<!-- Or shorthand --> <MyComponent> <p> Default slot content </p> </MyComponent>

Enter fullscreen mode

Exit fullscreen mode

Compiled React

// Parent component < MyComponent > < p >…