Ryan John Posted on May 31 • Originally published at vureact.top Vue slot to React: How does VuReact handle it? # webdev # javascript # react # vue VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's common <slot> mechanism 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 slot usage. Compilation Mapping Default slot: <slot> The default slot is Vue's most basic slot form, used to receive default content passed from the parent component. Vue <!-- Child component Child.vue --> <template> <div class= "container" > <slot></slot> </div> </template> <!-- Parent usage --> <Child> <p> This is slot content </p> </Child> Enter fullscreen mode Exit fullscreen mode Compiled React // Child component Child.jsx function Child ( props ) { return ( < div className = "container" > { props . children } </ div > ); } // Parent usage < Child > < p > This is slot content </ p > </ Child > Enter fullscreen mode Exit fullscreen mode As the example shows, Vue's <slot> element is compiled into React's children prop. VuReact adopts a children compilation strategy , converting the slot outlet into React's standard children receiving mechanism. This fully preserves Vue's default slot semantics — receiving child content passed from the parent component and rendering it. The key characteristics of this compilation approach are: Semantic consistency : Fully simulates Vue's default slot behavior by implementing content distribution React-native support : Uses React's standard children mechanism wi
LIVE