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 v-on / @ 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-on directive usage.

Compilation Mapping

v-on / @: Basic event binding

v-on (shorthand @ ) is Vue's directive for binding event listeners to respond to user interactions.

Vue

<button @ click= "increment" > +1 </button>

Enter fullscreen mode

Exit fullscreen mode

Compiled React

< button onClick = { increment } > +1 </ button >

Enter fullscreen mode

Exit fullscreen mode

As the example shows, Vue's @click directive is compiled into React's onClick attribute.…