How does VuReact implement Vue v-on in React

Source: Dev.to

Introduction

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. This article focuses on how Vue’s common v-on/@ directive is compiled into React code by VuReact.

Note
The examples show only core logic; full component wrappers and unrelated configuration are omitted. It assumes familiarity with Vue 3’s v-on directive usage.

Basic Event Mapping

Vue

+1

Compiled React

+1

VuReact converts Vue’s @click directive to React’s onClick attribute, preserving the original event‑binding semantics.

Key Characteristics

• Semantic consistency – Fully simulates Vue v-on behavior.
• Naming conversion – Vue’s @click → React’s onClick (camelCase).
• Function passing – Directly passes function references.
• React‑native support – Uses React’s standard event system without extra adaptation.

Handling Event Modifiers

Vue’s event system supports modifiers (e.g., .stop, .prevent). VuReact handles these via a runtime helper dir.on().

Vue

Submit

Compiled React

import { dir } from '@vureact/runtime-core';

Submit

Compilation Examples

How dir.on() Works

1. Parse modifiers – Extracts the event name and modifier string.
2. Create wrapper function – Generates an event‑handling wrapper based on the modifiers.
3. Apply modifier logic – Implements behavior for each modifier inside the wrapper.
4. Call original handler – Invokes the developer‑provided function.

Inline Event Expressions

Vue allows inline expressions directly in templates; VuReact translates them into JSX arrow functions.

Vue

Increment
Say Hello
With Event Object

Compiled React

 count.value++}>Increment
 sayHello('world')}>Say Hello
 handleEvent(event, 'custom')}>With Event Object

Compilation Strategy

• Expression conversion – Vue template expressions become JSX arrow functions.
• Event object handling – Vue’s $event maps to React’s event parameter.
• Parameter passing – Argument order and values are preserved.
• Reactive updates – .value access for ref/computed variables is handled automatically.

Custom Component Events

VuReact also compiles Vue custom events to React callbacks.

Vue (Parent & Child)

  Trigger Event

const emits = defineEmits(['custom-event']);

Compiled React

// Parent component usage
;

// Child component (Child.jsx)
function Child(props) {
  return  props.onCustomEvent?.(data)}>Trigger Event;
}

Compilation Rules

• Event name conversion – kebab-case → camelCase (custom-event → onCustomEvent).
• Emit call conversion – emits() becomes a props callback invocation.
• Optional chaining guard – Adds ?. to avoid undefined errors.
• Type safety – Preserves TypeScript type definitions.

Summary of VuReact’s Event Compilation

• Basic event mapping – Direct mapping of Vue directives to React attributes.
• Modifier support – Full support via runtime helper functions.
• Inline handling – Correct translation of inline Vue expressions.
• Custom events – Seamless conversion of component communication.
• Type safety – Maintains TypeScript integrity throughout the compiled code.

VuReact’s strategy enables a smooth migration from Vue to React without manual rewrites of event handling logic. The generated code retains Vue semantics while adhering to React’s best practices, keeping the migrated application fully interactive.

References

• Documentation:
• GitHub repository: