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-bind / : 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-bind directive usage.

Compilation Mapping

v-bind / :: Basic attribute binding

v-bind (shorthand : ) is Vue's directive for dynamically binding HTML attributes, component props , class , and style .

Vue

<img :src= "imageUrl" :class= "imageCls" />

Enter fullscreen mode

Exit fullscreen mode

Compiled React

< img src = { imageUrl } className = { imageCls } />

Enter fullscreen mode

Exit fullscreen mode

As the example shows, Vue's :src and :class directives are compiled into React's standard attribute syntax.…