DEV Community: Ryan John

How does VuReact compile Vue 3's defineModel to React?

Ryan John — Tue, 23 Jun 2026 14:00:00 +0000

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.

In this article, we will look at how Vue 3's defineModel macro is compiled into React.

Before We Start

To keep the examples easy to read, this article follows a few 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 the API shape and core behavior of Vue 3's defineModel.
VuReact only supports the type, default, required options and a custom prop name.
Array destructuring of the return value is not supported.

Compilation Mapping

Vue `defineModel` → `useVRef` + `useUpdated` for auto-sync

defineModel is a Vue 3 <script setup> macro that simplifies v-model two-way binding declarations. Under the hood, Vue's compiler generates a ref along with a modelValue prop and an update:modelValue event. VuReact compiles this into useVRef (which turns a prop value into a reactive ref) paired with useUpdated (which triggers the parent's onUpdate:xxx callback when the value changes).

// Declares a "state" prop consumed by the parent via v-model:state
const state = defineModel<string>('state');

// Declares a "modelValue" prop (default: 'xxx') consumed via v-model
const modelValue = defineModel({ default: 'xxx' });

Compiled React

import { useVRef, useUpdated } from '@vureact/runtime-core';

type IChildProps = {
  state?: string;
  modelValue?: string;
} & {
  onUpdateState?: (arg: string) => void;
  onUpdateModelValue?: (arg: string) => void;
};

// "state" prop consumed by parent via onUpdateState
const state = useVRef<string>(props.state);

// "modelValue" prop (default: 'xxx') consumed via onUpdateModelValue
const modelValue = useVRef<string>(props.modelValue ?? 'xxx');

// Automatically notifies parent on value change
useUpdated(() => {
  props.onUpdateState?.(state.value);
}, [state.value]);

useUpdated(() => {
  props.onUpdateModelValue?.(modelValue.value);
}, [modelValue.value]);

As the example shows, Vue's defineModel is decomposed into three parts:

Prop type declaration — non-event fields in IChildProps (state?, modelValue?);
Event callback declaration — onUpdateXxx fields in IChildProps;
Runtime reactivity — useVRef wraps the initial prop value into a reactive ref, and useUpdated watches the ref and automatically invokes the parent-provided callback.

With VuReact, directly mutating the ref's .value inside the component triggers the parent's update — exactly like Vue's development experience.

`defineModel(name, options)` → typed prop declaration with default

defineModel accepts a name to specify the prop name and limited options (type, default, required). VuReact converts these options into corresponding TypeScript type constraints and default-value handling.

const count = defineModel<number>('count', {
  type: Number,
  default: 0,
  required: true,
});

Compiled React

type IChildProps = {
  count: number;  // required: true → non-optional type
} & {
  onUpdateCount?: (arg: number) => void;
};

const count = useVRef<number>(props.count ?? 0); // default: 0

Option mapping rules:

required: true makes count required (count: number) instead of optional (count?: number).
default: 0 is implemented via the ?? nullish coalescing operator, falling back to 0 when the parent does not pass the prop.
type: Number influences the generic type parameter (<number>) in the generated TypeScript definition.

Direct `.value` assignment → auto-sync with parent

In Vue, defineModel returns a ref; you read and write its .value. VuReact preserves this .value access pattern in the compiled React code.

const state = defineModel<string>('state');

const update = () => {
  state.value = 'hello'; // direct assignment
};

Compiled React

const state = useVRef<string>(props.state);

const update = useCallback(() => {
  state.value = 'hello'; // triggers props.onUpdateState automatically
}, [state.value]);

Compilation rules:

useCallback wrapping — functions that touch state.value are wrapped with useCallback.
Correct dependency tracking — state.value is added to the dependency array.
Parent sync — state.value = 'hello' simultaneously updates the component's local state and pushes the new value to the parent.

`v-model` in templates → React controlled components

Vue templates use v-model to bind a defineModel ref; VuReact compiles this into the standard React controlled-component pattern (value + onChange).

<template>
  <input v-model="modelValue" />
  <div>Parent bound v-model is: {{ count }}</div>
  <button @click="update">Increment</button>
</template>

Compiled React

<input
  value={modelValue}
  onChange={(e) => {
    modelValue = e.target.value;
  }}
/>
<div>Parent bound v-model is:{count.value}</div>
<button onClick={update}>Increment</button>

v-model conversion rules:

value binding — the ref's value is bound to the value attribute.
onChange handler — the ref is reassigned directly in the onChange callback.
Automatic sync — the reassignment triggers useUpdated, which pushes the new value to the parent.

Unsupported `defineModel` patterns

VuReact explicitly does not support the following defineModel usages and will skip them with an error.

1. Array destructuring of the return value

<script setup lang="ts">
// Not supported (Vue 3.4+ experimental feature)
const [arg1, arg2] = defineModel();
</script>

Vue 3.4+ supports destructuring the return value into [model, modifiers] to access modifier status. VuReact does not support this syntax yet. Use the standard form instead:

<script setup lang="ts">
// Supported form
const model = defineModel();
</script>

2. get / set / validator options

<script setup lang="ts">
// Not supported
const modelValue = defineModel({
  get() {},
  set() {},
  validator() {},
});
</script>

Vue's defineModel supports custom get/set accessors and a validator function. VuReact does not support these options yet. Use useVRef directly to implement custom logic if needed.

Full example

Below is a complete single-file component using defineModel and its compiled React output.

Vue (input.vue):

<script setup lang="ts">
// @vr-name: Child

const state = defineModel<string>('state');
const modelValue = defineModel({ default: 'xxx' });
const count = defineModel<number>('count', {
  type: Number,
  default: 0,
  required: true,
});

const update = () => {
  state.value = 'hello';
  count.value++;
};
</script>

<template>
  <input v-model="modelValue" />
  <div>Parent bound v-model is: {{ count }}</div>
  <button @click="update">Increment</button>
</template>

Compiled React (output.tsx):

import { useCallback, memo } from 'react';
import { useVRef, useUpdated } from '@vureact/runtime-core';

export type IChildProps = {
  state?: string;
  modelValue?: string;
  count: number;
} & {
  onUpdateState?: (arg: string) => void;
  onUpdateModelValue?: (arg: string) => void;
  onUpdateCount?: (arg: number) => void;
};

const Child = memo((props: IChildProps) => {
  const state = useVRef<string>(props.state);
  const modelValue = useVRef<string>(props.modelValue ?? 'xxx');
  const count = useVRef<number>(props.count ?? 0);

  const update = useCallback(() => {
    state.value = 'hello';
    count.value++;
  }, [state.value, count.value]);

  useUpdated(() => {
    props.onUpdateState?.(state.value);
  }, [state.value]);

  useUpdated(() => {
    props.onUpdateModelValue?.(modelValue.value);
  }, [modelValue.value]);

  useUpdated(() => {
    props.onUpdateCount?.(count.value);
  }, [count.value]);

  return (
    <>
      <input
        value={modelValue}
        onChange={(e) => {
          modelValue = e.target.value;
        }}
      />
      <div>Parent bound v-model is:{count.value}</div>
      <button onClick={update}>Increment</button>
    </>
  );
});

export default Child;

VuReact | Vue to React Hybrid Migration Practice: Real Support Hub Case

Ryan John — Mon, 15 Jun 2026 14:00:00 +0000

This is a practical migration walkthrough for a multi-channel customer support admin app, designed to show VuReact’s hybrid and transformation capabilities in a realistic backend scenario.

In this guide, you will learn:

how to clone and launch the example repository
how to inspect the project structure and find the key migration files quickly
how to use build and watch to inspect the generated output
how to start the React output and verify business flows

Key hybrid technology stack:

Vue 3
Vue Router 4
Ant Design 6（React）
Zustand（React）

If you want to try it online first, use these links:

Repository: https://github.com/vureact-js/example-customer-support-hub
Live demo: https://codesandbox.io/p/github/vureact-js/example-customer-support-hub/master?import=true
Preview: https://skx7pn-5173.csb.app/

Project structure overview

Before you start, get a high-level picture of the project layout. The source structure looks roughly like this:

customer-support-hub/
├─ package.json
├─ vureact.config.ts
├─ vite.config.ts
├─ index.html
└─ src/
   ├─ main.ts
   ├─ App.vue
   ├─ styles/
   │  └─ app.scss
   ├─ data/
   │  ├─ mock.ts
   │  └─ mock-api.ts
   ├─ store/
   │  └─ useAppStore.ts
   ├─ components/
   │  ├─ ConversationPanel.vue
   │  ├─ TicketFilterBar.vue
   │  ├─ TicketTimeline.vue
   │  └─ ...
   ├─ pages/
   │  ├─ Dashboard.vue
   │  ├─ TicketsList.vue
   │  ├─ TicketDetail.vue
   │  ├─ Customers.vue
   │  ├─ Agents.vue
   │  ├─ ConversationCenter.vue
   │  ├─ KnowledgeBase.vue
   │  ├─ SlaBoard.vue
   │  ├─ Settings.vue
   │  └─ auth/Login.vue
   └─ router/
      ├─ index.ts
      └─ routes.ts

Three files are especially important:

src/main.ts is the source entry point that will be compiled into the React entry.
src/router/index.ts is the routing adaptation entry.
src/store/useAppStore.ts manages cross-page state and is one of the most important files for validating business flows.

Step 1: Clone the repo and install dependencies

Clone the repository and install dependencies:

git clone https://github.com/vureact-js/example-customer-support-hub.git
cd customer-support-hub
npm install

After installation, confirm that package.json contains these scripts:

{
  "scripts": {
    "vr:watch": "vureact watch",
    "vr:build": "vureact build"
  }
}

Key points

this example follows a workflow where you maintain the Vue source and verify the React output
the migration starts with getting the build loop working, not by editing the generated output
if installation fails, first check Node.js, npm, and network connectivity

Success criteria

npm install completes without blocking errors
the repository root recognizes vureact.config.ts
you can proceed to npm run vr:build

Step 2: Run a full build cycle

Run a complete build first:

npm run vr:build

If you want to keep seeing updated output while you edit source files, start watch mode:

npm run vr:watch

What to expect

build statistics appear in the console
a .vureact/react-app directory is generated at the project root
the generated React output keeps a directory structure similar to the Vue source

Key points

this step is about verifying the compiler can consistently produce the React app, not about checking the UI yet
if the output directory is missing, verify that vureact.config.ts exists and is correct
this example may apply post-build output adjustments, so rely on the final generated entry and stylesheet imports

Troubleshooting

if the build fails, inspect the source for syntax or configuration issues
if the output folder is missing, confirm the command ran from the project root
if watch mode doesn’t sync, check that the watcher process is still running

Success criteria

.vureact/react-app is generated successfully
repeated runs of npm run vr:build produce stable output

Step 3: Understand the key files

This step is not about reading every file in detail; it is about knowing which files to watch during migration.

1. Routing entry

src/router/index.ts should be your first stop because it defines how the app transitions from Vue routing into the React output:

router: {
  configFile: 'src/router/index.ts',
}

2. State entry

src/store/useAppStore.ts manages session state, filter conditions, activity streams, and other cross-page data. When the state flow works, page interactions usually work too.

3. Page entry points

The pages under src/pages/ define the main business surface you will validate:

Dashboard.vue
TicketsList.vue
TicketDetail.vue
Customers.vue
Agents.vue
KnowledgeBase.vue
SlaBoard.vue
Settings.vue
auth/Login.vue

Key points

inspect routing first, then state, then pages
in migration scenarios, problems are more often caused by page/state interaction than by a single component
if you can explain which page reads which state and which actions update it, validation becomes much easier

Step 4: Start the React output

Open the generated React project and start the dev server:

cd .vureact/react-app
npm install
npm run dev

What to expect

the Vite dev server starts successfully
the browser opens to the login page first
after logging in, you can access the customer support workspace
changes to the Vue source continue to sync into the React output

Key points

this step verifies whether the generated output can run independently
in a hybrid project, Vue source and React output exist in parallel but serve different roles
treat the React output as generated artifacts for validation, not as the main source to edit

Success criteria

npm run dev launches successfully
the app navigates from login into the business interface
source edits continue to reflect in the generated output

Step 5: Complete the business validation

Once the app is running, validate it using this flow:

What you should be able to do

sign in from the login page and enter the system
open Dashboard, Tickets, Customers, KnowledgeBase, SlaBoard, and Settings pages
filter, switch, and view ticket details in the ticket list
view risk information on the customer page and observe state updates
see risk status changes on the SLA board
browse and search knowledge base content

What to pay attention to

whether session state drives login and route guards correctly
whether ticket filters refresh the list as expected
whether activity records update when ticket actions occur
whether SLA board data updates after slaConfig changes

Troubleshooting

if the app returns to login after signing in, check route guards and session state first
if list filters do not work, verify the filter state is written correctly to the store
if the activity stream does not update, confirm the action calls the correct mock API

Success criteria

core flows for login, routing, filtering, details, SLA, and knowledge base all work
you can clearly explain which state and actions each page depends on
you have completed a full validation cycle from Vue source to React output

Summary

This example is not about memorizing the file tree; it is about following the steps to complete a real migration cycle.

If you complete clone, install, build, launch, and validate in that order, you have established the minimum VuReact workflow: get the build working first, then get the generated output running, then verify it through business flows.

Appendix: Troubleshooting references

routing errors: Router Adaptation Guide
build warning guidance: Compilation Specification
report issues:
- Compiler Issues
- Router Issues

Vue to React Migration in Action: Real CRM Admin Case

Ryan John — Fri, 12 Jun 2026 14:00:00 +0000

This is a hands-on migration walkthrough designed to take you from a standard Vue 3 + Vue Router admin project to a complete VuReact migration cycle.

In this guide, you will learn:

how to clone and install the example repository
how to locate the key migration files through the project structure
how to run the build and inspect the generated React output
how to start the generated application and verify business flows

If you want to try it online first, use the links below:

Repository: https://github.com/vureact-js/example-crm-admin-backend
Live demo: https://codesandbox.io/p/github/vureact-js/example-crm-admin-backend/master
Preview: https://r862dm-5173.csb.app

Project structure overview

Start by getting a high-level view of the admin project layout. The source tree looks roughly like this:

crm-admin-backend/
├─ package.json
├─ vureact.config.ts
├─ vite.config.ts
├─ index.html
├─ public/
│  ├─ config.js
│  ├─ logo.png
│  └─ File
├─ git-shells/
│  ├─ git-sync-hub.sh
│  └─ git-sync-hub.en.sh
└─ src/
   ├─ main.ts
   ├─ App.vue
   ├─ styles/
   │  └─ app.scss
   ├─ data/
   │  ├─ mock.ts
   │  └─ mock-api.ts
   ├─ components/
   │  ├─ CustomerTable.vue
   │  ├─ ThemeCard.vue
   │  ├─ FilterBar.vue
   │  └─ ...
   ├─ pages/
   │  ├─ Dashboard.vue
   │  ├─ Customers.vue
   │  ├─ LeadsPipeline.vue
   │  ├─ TasksBoard.vue
   │  ├─ NotificationsCenter.vue
   │  ├─ ApprovalsCenter.vue
   │  ├─ Settings.vue
   │  └─ auth/
   │     ├─ Login.vue
   │     └─ Register.vue
   └─ router/
      ├─ index.ts
      └─ routes.ts

The files you should focus on first are:

src/main.ts — it controls how the source app entry is compiled into a React entry
src/router/index.ts — it determines how routing is wired into VuReact’s adapter layer
src/data/mock-api.ts — it drives the simulated backend state changes used by the demo
src/pages/ — the pages here represent the main business flows you’ll verify

Step 1: Clone the repo and install dependencies

Clone the repository and install dependencies:

git clone https://github.com/vureact-js/example-crm-admin-backend.git
cd crm-admin-backend
npm install

After installation, make sure the package.json scripts include:

{
  "scripts": {
    "vr:watch": "vureact watch",
    "vr:build": "vureact build"
  }
}

Key points

This is a normal admin project, so it’s ideal for running the full source → output → launch → validation workflow.
Unlike mixed Vue/React projects, this example is best for observing routing, pages, and state interactions in the generated React output.
If installation fails, first check your Node.js version, npm setup, and network access.

Success criteria

npm install completes without blocking errors
the repository root recognizes vureact.config.ts
you can proceed to npm run vr:build

Step 2: Run a full build cycle

Run a complete build first:

npm run vr:build

If you want to keep seeing updated output while editing source files, start watch mode instead:

npm run vr:watch

What to expect

build statistics appear in the console
a .vureact/react-app directory is generated at the project root
the produced React output preserves a structure similar to the original Vue source

Key points

this step is about verifying the compiler can consistently generate the output, not about checking the UI yet
if the output directory doesn’t appear, first review vureact.config.ts
the project includes common admin patterns like routing, forms, lists, and dashboards, so a successful build makes later validation much clearer

Troubleshooting

if the build fails, inspect the source for syntax or configuration issues
if the output folder is missing, confirm the command ran from the project root
if watch mode doesn’t sync, verify the watcher process is still running

Success criteria

.vureact/react-app is generated successfully
repeated runs of npm run vr:build produce stable output

Step 3: Understand the key files

This step helps you identify the entry points to watch during migration.

1. Routing entry

src/router/index.ts is one of the most important files. It handles route guards, page transitions, and the adapter entry, and it is often the first place to check during validation.

When route adaptation is enabled, the config usually points explicitly to it:

router: {
  configFile: 'src/router/index.ts',
}

2. Business state entry

src/data/mock-api.ts and src/data/mock.ts define the demo state and actions for the backend scenario. Understanding these files makes it much easier to follow page interactions.

3. Page entry points

The main business validation surface lives under src/pages/:

Dashboard.vue
Customers.vue
LeadsPipeline.vue
TasksBoard.vue
NotificationsCenter.vue
ApprovalsCenter.vue
Settings.vue
auth/Login.vue
auth/Register.vue

Key points

review routing first, then state, then pages
for admin-style projects, issues are often caused by page navigation, guards, or state update flow rather than a single component
if you can clearly explain which page reads which state and which actions update it, validation becomes straightforward

Step 4: Start the generated React app

Open the generated React project and start the dev server:

cd .vureact/react-app
npm install
npm run dev

What to expect

Vite dev server starts successfully
the browser opens to the login page first
after login, you can access the CRM main interface
changes to the Vue source continue to sync into the React output

Key points

this step verifies that the generated output can run independently
for a standard admin app, routing and page interaction are the first things to confirm
treat the React output as generated artifacts for validation, not as the primary source to edit directly

Success criteria

npm run dev launches successfully
the app navigates from login into the business interface
source edits continue to reflect in the generated output

Step 5: Complete the business validation

Once the app is running, validate it using the following flow:

What you should be able to do

sign in from the login page and enter the system
open Dashboard, Customers, LeadsPipeline, TasksBoard, NotificationsCenter, ApprovalsCenter, and Settings pages
perform filtering, keyword search, and single-item actions in the notifications center
create, approve, reject, and review history in the approvals center
observe approval updates in the leads pipeline
observe blocking and collaboration notifications on the task board
see summary data update on the dashboard

What to pay attention to

whether route guards allow the login page but block business pages when appropriate
whether actions in mock-api drive page data changes
whether lists, boards, and summary widgets update as state changes

Troubleshooting

if the app returns to login after signing in, check route guards and session state first
if data does not refresh, confirm the page is calling the correct mock-api functions
if a board does not update, verify the state is written correctly and subscribed by the page

Success criteria

core flows for login, routing, notifications, approvals, leads, tasks, and dashboard all work
you can clearly explain which state and actions each page depends on
you have completed a full validation cycle from Vue source to React output

Summary

This example is not about memorizing the folder tree; it is about following a practical step-by-step workflow to run an admin project from source through validation.

If you complete clone, install, build, launch, and validate in that order, you have completed the standard VuReact migration workflow: get the build working first, then get the generated output running, then verify it through business flows.

Appendix: Troubleshooting references

Routing errors: Router Adaptation Guide
Build warning guidance: Compilation Specification
Report issues:
- Compiler Issues
- Router Issues

Vue to React Migration: Why Runtime Wrappers Hit a Ceiling

Ryan John — Thu, 11 Jun 2026 14:00:00 +0000

If you have ever loved Vue's Composition API and <script setup> but still had to ship a React codebase because of platform or team constraints, you already know the pain: the code is runnable, but it feels awkward, brittle, and expensive to maintain.

That tension is exactly what VuReact is designed to solve. VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.

In this post, I want to answer a very practical question:

Can we write with familiar Vue semantics and still end up with clean, idiomatic React?

The answer is yes. And more importantly, the final output is not a pile of wrapper code. It is maintainable React that fits the target ecosystem.

You do not need to learn a brand-new authoring model, and you do not need to keep bouncing between Vue and React mental models. The examples in this article all have source-to-output references in the semantic conversion guide, so you can compare the input and the generated result side by side.

The Limits of Existing Approaches

Let us start with the reality of migration work.

Manual rewriting gives you the most control, but the cost is obvious: duplicated business logic, larger test surface area, and a long period where old and new code coexist.

Many syntax conversion tools are also limited in a similar way. They can do surface-level replacement, recognize v-if, and mechanically rewrite v-model, but they cannot understand the full semantic contract behind computed, scoped slots, or the data flow hidden inside a component design.

The final output often looks like React, but behaves like a fragile transplant.

Some teams then ask the obvious next question:

What if we just let AI rewrite the code?

That route looks fast, but it hides a few serious problems. AI is great at generating new code, yet it is not naturally good at preserving the logic, lifecycle assumptions, and edge-case behavior of an existing codebase. It can miss business intent, fail to respect why a particular watch exists, and still fall short of faithfully mapping Vue's reactivity model into React.

Single-pass generation is useful. But when the project evolves, it becomes difficult to safely patch or maintain code that was produced as a black box. And because AI output can vary from prompt to prompt, the hidden cost of long-term maintainability becomes very real.

Another common path is a dual-runtime bridge between Vue and React. That can work for a while, but the bundle weight, debugging complexity, and mental overhead all go up. More importantly, that is not a true migration. It is a long-term coexistence strategy.

So the real problem is not whether cross-framework conversion is possible. It is whether it can be done in a way that is stable, controllable, and maintainable over time.

That is the core problem VuReact is trying to solve.

How VuReact Approaches It

VuReact is built around semantic-aware compilation, not string replacement.

The difference matters:

String replacement only cares whether two snippets look similar.
Semantic-aware compilation first understands what the source code means, then decides how that meaning should be expressed in React.

From the compiler pipeline perspective, VuReact is a full flow: parsing, semantic analysis, transformation, and code generation.

You write Vue concepts such as template syntax, <script setup>, the Composition API, and TypeScript types. The output is standard React code that is readable, predictable, and easy to maintain.

The value proposition can be summarized in five points:

Semantic awareness: it understands templates, directives, lifecycle patterns, and type shapes instead of blindly replacing syntax.
Incremental migration: you can start with a single module and expand step by step.
Convention-driven output: it follows a compilation specification, so the generated result is predictable and CI-friendly.
Full feature alignment: Vue core concepts are mapped into React implementation paths, including scoped style handling during compilation.
Smart dependency collection: reactive dependencies are traced and analyzed automatically to generate precise React Hook dependency arrays.

Most importantly, the output is pure React. It does not depend on a Vue runtime, and it does not hide Vue inside a React container. That is what makes it suitable for long-term maintenance, not just demos.

What the Translation Actually Looks Like

The easiest way to understand VuReact is to look at the actual semantic mappings.

The point is not whether the output "looks like React." The real question is whether the core Vue semantics are faithfully mapped into a standard React implementation.

The code below is intentionally simplified to focus on the conversion logic.

1. Default Slot `<slot>` → React `props.children`

Vue Code:

<!-- Child.vue -->
<template>
  <section class="card">
    <slot></slot>
  </section>
</template>

<!-- Parent usage -->
<Child>
  <p>Order Overview</p>
</Child>

VuReact compiled React code:

// Child.tsx
type IChildProps = {
  children?: React.ReactNode;
};

function Child(props: IChildProps) {
  return <section className="card">{props.children}</section>;
}

export default memo(Child)

// Parent usage
<Child>
  <p>Order Overview</p>
</Child>;

From this example, you can clearly see that Vue's default slot is not "guessed and changed", but explicitly compiled into React's children. This aligns with the official semantic mapping documentation: slot outlets are mapped to React's most native content distribution mechanism.

💡 For more details, see the official documentation Template Semantic Mapping - Slots.

2. Scoped Slot → React Function `props.children()`

Vue Code:

<!-- List.vue -->
<template>
  <ul>
    <li v-for="(item, i) in props.items" :key="item.id">
      <slot :item="item" :index="i"></slot>
    </li>
  </ul>
</template>

<!-- Parent usage -->
<List :items="users">
  <template v-slot="slotProps">
    <div>{{ slotProps.index + 1 }}. {{ slotProps.item.name }}</div>
  </template>
</List>

VuReact compiled React code:

// List.tsx
type IListProps = {
  items: any[];
  children?: (slotProps: { item: any; index: number }) => React.ReactNode;
};

function List(props: IListProps) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={item.id}>{props.children?.({ item, index })}</li>
      ))}
    </ul>
  );
}

export default memo(List)

// Parent usage
<List 
  items={users} 
  children={(slotProps) => (
    <div>{ slotProps.index + 1 }. { slotProps.item.name }</div>
  )}>
</List>

This is what I consider VuReact's most compelling capability. Scoped slots are essentially a mechanism for "child components to pass rendering data back to the parent". VuReact doesn't flatten them crudely; instead, it compiles them into parameterized children functions, preserving the data flow semantics completely.

💡 For more details, see the official documentation Template Semantic Mapping - v-slot.

3. `computed()` → `useComputed()`, `defineEmits()` → `props.onXxx()`

Vue Code:

<script setup lang="ts">
  const emit = defineEmits<{
    (e: 'update:name', value: string): void;
  }>();

  const state = reactive({ count: 1, price: 99 });
  const totalPrice = computed(() => state.count * state.price);

  const submit = () => {
    emit('update:name', 'next');
  };
</script>

VuReact compiled React code:

import { useCallback } from 'react'
import { useReactive, useComputed } from '@vureact/runtime-core'

type ICompProps = {
  onUpdateName?: (value: string) => void;
};

// ... component wrapper omitted
const state = useReactive({ count: 1, price: 99 });
const totalPrice = useComputed(() => state.count * state.price);

const submit = useCallback(() => {
  props.onUpdateName?.('next');
}, [props.onUpdateName]);

This code block contains two key transformations. First, computed is compiled into useComputed, preserving dependency tracking and caching semantics. Second, update:name inside defineEmits is mapped to React's onUpdateName callback. The former addresses "how reactivity lands in React", and the latter addresses "how component communication lands in React".

💡 For more details, see the official documentation Script Semantic Mapping - defineEmits.

4. `<style scoped>` → `data-css-{hash}` Scoped Styles

Vue Code:

<template>
  <div class="parent">
    <div class="global-class">Global Class</div>
    <Button class="deep-btn">Deeply Nested Component</Button>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid #e5e5e5;
  border-radius: 8px;

  :global(.global-class) {
    color: red;
  }
}

.parent :deep(.deep-btn) {
  background: yellow;
}
</style>

VuReact compiled React code:

import './card-xyz1234.css';

// ... component wrapper omitted
<div className="parent" data-css-xyz1234>
  <div className="global-class" data-css-xyz1235>Global Class</div>
  <Button className="deep-btn" data-css-xyz1234>Deeply Nested Component</Button>
</div>

/* card-xyz1234.css */
.parent[data-css-xyz1234] {
  border: 1px solid #e5e5e5;
  border-radius: 8px;

  .global-class {
    color: green;
  }
}

.parent[data-css-xyz1234] .deep-btn {
  background: yellow;
}

Many migration tools start to lose fidelity at the styling layer, especially with scoped / deep selectors. But VuReact compiles <style scoped> into a CSS file with scoped identifiers and injects data-css-{hash} into corresponding DOM nodes. This means the style isolation you depend on in Vue remains valid in React.

💡 For more details, see the official documentation Style Semantic Mapping - scoped.

5. `defineExpose` → React `forwardRef` + `useImperativeHandle`

Vue Code:

<script setup lang="ts">
 // @vr-name: Child
 defineProps<{ title: string }>();

 const count = ref(0);
 const increment = () => count.value++;

 defineExpose({ count, increment });
</script>

VuReact compiled React code:

import { forwardRef, useImperativeHandle, memo, useCallback } from 'react';
import { useVRef } from '@vureact/runtime-core';

type IComponentProps = { title: string };

const Child = memo(
  forwardRef<any, IComponentProps>((props, expose) => {
    const count = useVRef(0);

    const increment = useCallback(() => {
      count.value++;
    }, [count.value]);

    useImperativeHandle(expose, () => ({
      count,
      increment,
    }));

    return <></>;
  }),
);

export default Child;

Vue parent accessing defineExpose content → React parent ref.current

In Vue, the parent component accesses child-exposed content via ref and expose. In React, VuReact compiles this to useRef + ref.current access, forming a closed loop with the defineExpose handling above.

Vue Code:

<template>
  <Child ref="childRef" />
</template>

<script setup lang="ts">
// @vr-name: Parent
import { ref } from 'vue';

const childRef = ref();

onMounted(() => {
  // Access child-exposed content
  childRef.value?.count.value; // 0
  childRef.value?.increment(); // Call child method, count becomes +1
  childRef.value?.count.value; // 1
});
</script>

VuReact compiled React code:

import { useRef } from 'react';
import { useMounted } from '@vureact/runtime-core'

const Parent = memo(() => {
  const childRef = useRef();

  useMounted(() => {
    // Access child-exposed content
    childRef.current?.count.value; // 0
    childRef.current?.increment(); // Call child method, count becomes +1
    childRef.current?.count.value; // 1
  });

  return <Child ref={childRef} />;
});

export default Parent;

This is another ultimate highlight of VuReact: Vue's defineExpose is handled as React's forwardRef and useImperativeHandle. VuReact keeps the exposed object structure unchanged; the exposed ref object still retains the .value access style, consistent with Vue.

💡 For more details, see the official documentation Script Semantic Mapping - defineExpose.

Looking at these five points together, you'll notice a common characteristic: VuReact does not do "superficially similar" replacements. Instead, it delivers semantically equivalent implementations across three dimensions: template, script, and style. That's the real reason it can be used in real engineering projects.

Why This Matters in the AI Era

People often ask: if AI is so powerful now, why do we still need a compiler?

My answer is simple: AI is for exploration, and the compiler is for certainty.

In migration work, uncertainty is the enemy. Pure AI rewriting can be fast, but the output may shift with the prompt. A pure rules engine is stable, but not flexible enough. A semantic compiler gives us the middle ground: deterministic output with room for higher-level automation.

That means AI and VuReact are not competing tools. They are complementary.

VuReact gives you a reliable base. AI can then help with refactoring, naming cleanup, structural extraction, and test generation on top of that base.

For teams migrating a real codebase, that is much more realistic than asking AI to replace everything in one pass.

Real Projects, Not Just a Concept

VuReact is already running in two real backend-oriented projects:

A standard TypeScript + Vue + Vite + Vue Router admin backend.
A mixed Vue/React project that uses Ant Design and Zustand in a collaborative workflow.

These are not demo-only toy examples. They are online, inspectable projects with real implementation details.

Online demo: CRM admin backend
Online demo: Customer support hub

If you want to see how the migration strategy plays out in a real project, I also recommend checking the follow-up case studies linked from the project site.

How to Get Started

You can start with a very lightweight path.

First, install the compiler in an existing Vue 3 project or in a demo repo:

npm install -D @vureact/compiler-core

Then read the quick start guide and run through the smallest possible example. The goal of that first pass is not speed. It is to build confidence around what gets converted cleanly and what needs a convention.

Next, pick a small component with a clear boundary and verify three things:

Is the generated code readable?
Is the conversion cost acceptable?
Does the team feel comfortable maintaining the result?

If you are a tech lead, this is easier to manage because the migration scope is explicit, the progress is measurable, and the return on effort is visible.

If you are a front-end developer, it is easier to get moving because you can keep writing with familiar Vue mental models while producing standard React.

GitHub: https://github.com/vureact-js/core

Closing Thoughts

I have always believed that the end goal of cross-framework development is not to make you memorize more syntax. It is to let you express ideas in a familiar way and deliver them safely into the target ecosystem.

That is what VuReact is built for: taking Vue semantics and generating maintainable React.

If you want to take the next step, I would suggest this order:

Read the semantic mapping guide.
Try the online demos to validate the actual experience.
Inspect the GitHub repo and documentation for the implementation details.

In the AI agent era, the strongest combination is not "AI alone." It is "compiler certainty + AI flexibility." When those two work together, teams can move faster with less risk.

Official site: vureact.top | GitHub | CRM demo | Customer support demo

Vue to React: Stop Treating Migration Like a Toy Problem

Ryan John — Wed, 10 Jun 2026 14:00:00 +0000

Vue-to-React migration is not a game of "can it run?" The real question is whether the final result is pure React, semantically faithful, and maintainable enough to enter a real engineering workflow.

Vue to React has never been a fake problem. The two ecosystems are not as unrelated as Java and Python, but they are still distinct enough that migration is a real engineering task rather than a simple search-and-replace exercise.

What is truly misleading is not the migration goal itself. It is the two long-running shortcuts that have confused the field:

runtime wrappers that make it look like you migrated
half-finished conversion tools that claim to solve everything with "50% automated conversion"

Those approaches may be enough for demos, but they do not answer the hard questions:

Will the final product be pure React?
Will semantic fidelity survive?
Can the result be verified, reviewed, and maintained in a real workflow?

Why the Wrong Routes Poison the Field

1. Runtime wrappers create a false sense of completion

Runtime wrapper solutions often look impressive in the first few minutes. Components mount, pages render, and basic interaction works. But the real question is not whether the demo runs.

The real question is whether you actually migrated anything.

If the final output still depends on Vue runtime behavior, or if React only exists as a shell around a Vue container, then the team has not really landed on React. It has only created a more complicated dual-runtime structure.

That leads to predictable problems:

debugging becomes harder because the failure could be on the Vue side, the React side, or the bridge itself
performance becomes harder to measure because two runtimes are stacked together
team collaboration slows down because everyone must understand two mental models at once

Short term convenience, long term debugging black hole.

2. Half-finished converters are dangerous in a different way

These tools are often marketed as "90% automated" or "50% automated," but in enterprise codebases the missing 10% or 50% is exactly where the real complexity lives.

The hard parts are not class to className. The hard parts are:

slot and v-slot
defineEmits
v-model
watch
scoped styles
component-boundary semantics

Once those pieces lose fidelity, the remaining automation mostly becomes a pretense of productivity.

Why the Field Gets a Bad Reputation

The bigger danger is not that one tool fails. It is that these tools produce a shared market memory.

After enough broken demos, the market starts to believe:

"Vue to React? It is all just toy tooling."

That is a severe problem, because it shifts the evaluation criteria away from engineering reality and toward shallow demo success.

From that point on, teams stop asking whether a solution is semantically correct or operationally maintainable. They only ask whether it can make a proof-of-concept look alive.

That is exactly the wrong standard.

The Right Standard Should Have Four Baselines

If we want a serious Vue-to-React strategy, it should satisfy at least these four requirements:

The final output must be pure React.
The conversion must be semantic, not just textual.
The process must be gradual and verifiable.
The output must be suitable for real engineering workflows.

If a solution cannot do those things, it should not be treated as a real migration path.

Why Compile-Time Is the Only Serious Route

If the goal is to fully leave Vue behind and adopt React, runtime solutions create an uncomfortable middle state:

the code is still authored in Vue
the bundle already contains React
the team is now responsible for two runtime models

VuReact takes the opposite route:

compile first
validate the result
expand gradually

That is not just a different implementation choice. It is a different migration philosophy.

The reason it works better is simple:

the output is pure React
the semantics are preserved at the source level
the artifacts are reviewable and testable
the migration can be introduced batch by batch

The Evidence Chain

VuReact does not rely on slogans. It makes the translation visible and inspectable.

Props, emits, and `v-model`

Vue component contracts are explicitly mapped:

defineProps becomes React props typing
defineEmits becomes callback props such as onXxx
v-model:name becomes the standard name + onUpdateName pair

This keeps the contract understandable to React developers while preserving the intent of the original Vue component API.

`ref`, `watch`, and `defineExpose`

These are the places where many conversion tools fall apart.

VuReact maps:

ref to useVRef
watch to useWatch
defineExpose to forwardRef plus useImperativeHandle

That is a semantic rewrite, not a shallow JSX rewrite.

Slots and scoped styles

Slots are not just "children in disguise."

VuReact maps default slots to props.children and scoped slots to function children, preserving the data flow that Vue developers rely on.

For styles, VuReact also keeps the important pieces:

scoped styles become hashed CSS with data-css-{hash} markers
CSS Modules preserve class mapping through module imports

That means the generated React output still supports real component isolation.

The Practical Choice

This is why I would draw the line like this:

If you need temporary coexistence, a runtime bridge can be useful.
If you need real migration, runtime coexistence is not enough.
If you need pure React output with semantic fidelity and a reviewable workflow, compile-time migration is the serious option.

That is the difference between "making it work" and "making it maintainable."

Closing Thoughts

Vue to React migration is not broken. The narrative around it has been broken by bad tools and worse evaluation standards.

If the industry keeps rewarding tools only for demoability, we will keep producing solutions that look good in videos and collapse in production.

The standard should be much higher:

pure React output
semantic preservation
gradual migration
engineering-grade verification

That is why compile-time migration is the correct direction.

VuReact is not trying to sell a story. It is trying to provide a verifiable migration path.

Resources

Project: https://github.com/vureact-js/core
Docs: https://vureact.top/en

Vue-to-React Migration Deep Dive: Vuera, Veaury, and VuReact

Ryan John — Mon, 08 Jun 2026 14:00:00 +0000

Cross-framework migration is not a syntax substitution problem. It is a systems problem involving runtime models, team mental models, and long-term maintenance costs.

In the evolution of frontend engineering, Vue-to-React migration has never been a simple "rewrite the syntax" task. It is a systemic migration that involves runtime models, team habits, engineering foundations, and long-term maintenance cost. Whether the motivation comes from architecture consolidation or ecosystem evolution, one question keeps showing up:

How do you move a mature Vue codebase into React without turning the project into a high-risk rewrite?

This article compares three representative approaches to Vue/React interoperability:

Vuera
Veaury
VuReact

The real question is not "can it run?"

The real question is:

Can it produce maintainable output?
Can it preserve semantics under pressure?
Can it support gradual, verifiable migration in a real codebase?

Three Approaches, Three Tradeoffs

Vuera: a runtime wrapper from another era

Vuera was one of the earliest cross-framework experiments, and it was relevant in the Vue 2 and React 15/16 era. Its core idea is straightforward: mount the other framework's component instance at runtime and use a container component as an adapter.

That made historical sense, but it also means the solution lives entirely at runtime. In a modern production environment, especially one based on Vue 3 and React 18, that approach no longer looks like a practical long-term migration strategy.

It is better understood as a historical reference for runtime wrapping than as a production-ready migration path.

Veaury: a modern runtime bridge

Veaury is built for Vue 3 and React 17/18, and it is explicitly designed for coexistence rather than migration. Through APIs such as applyReactInVue and applyVueInReact, Vue and React components can reference each other inside the same project, and cross-framework data passing is supported through Context and slot-like mechanisms.

This is useful when a team needs to temporarily embed existing Vue components in a React project, or vice versa, and accepts the cost of running two ecosystems side by side.

But it is important to be precise: this is coexistence, not migration.

VuReact: a compile-time migration toolchain

VuReact follows a different path.

It is neither a runtime wrapper nor a dual-engine bridge. It is a compile-time toolchain that compiles Vue 3 SFCs, especially <script setup>, into standard React 18+ code with no Vue runtime dependency in the final output.

If Vuera and Veaury are about making two frameworks coexist, VuReact is about helping teams leave Vue behind and land on React with the lowest possible migration risk.

Where the Complexity Lives

The key difference between these approaches is not just performance. It is where the complexity ends up.

Dimension	Vuera	Veaury	VuReact
Core architecture	Runtime wrapper around Vue 2 / React 16	Runtime dual-engine bridge for Vue 3 / React 18	Compile-time AST-to-AST migration for Vue 3 to React 18
Where complexity lives	Entirely at runtime	Mostly in the bridge layer	Moved into compilation
Final runtime cost	High	Medium	Zero Vue runtime cost
Output readability	Low	Medium	High, generated output is standard React
Debugging experience	Hard	Still cross-framework	Native React debugging with clear output
Ecosystem integration	Weak	Good for coexistence	Strong, because the output is pure React
Migration posture	Wrapper-first	Coexistence-first	Migration-first

The core conclusion is simple:

VuReact chooses to pay complexity earlier, during compilation, so the final product becomes lighter, cleaner, and easier to verify.

That is a much better trade when the end goal is maintainable React, not temporary interoperability.

Why Compile-Time Wins for Real Migration

If the goal is a complete Vue-to-React migration, runtime wrappers tend to create an awkward middle state:

The code is still authored in Vue
The bundle already carries React
The team now has to understand two runtime models
Debugging becomes harder because failures can come from either side of the bridge

In the short term, that can feel convenient. In the long term, it becomes technical debt.

VuReact is built around the opposite idea:

compile first
validate the result
then expand gradually

That gives teams a migration path that can be reviewed, tested, and rolled back.

Evidence, Not Hype

VuReact does not try to "magically" solve migration. It makes the semantic mapping explicit.

`props`, `emits`, and `v-model`

Vue component contracts are not just JSX with a different shape. They are explicit semantics:

defineProps becomes React props typing
defineEmits becomes callback props such as onXxx
v-model:name becomes a standard name + onUpdateName contract

This is the difference between a shallow rewrite and a semantic rewrite.

`ref`, `watch`, and `defineExpose`

Reactive state and side effects are where most half-baked tools break.

VuReact maps:

ref to useVRef
watch to useWatch
defineExpose to forwardRef plus useImperativeHandle

These are not cosmetic replacements. They are the places where a migration either preserves behavior or quietly breaks it.

Slots and scoped styles

Slots are another example of why "just make it look like React" is not enough.

VuReact maps default slots to props.children and scoped slots to function children, which is much closer to the actual data-flow semantics of Vue slots.

For styles, VuReact handles both:

scoped styles through data-css-{hash} attributes
CSS Modules through module imports and preserved class mappings

That means the final React output still has real component-level style isolation, not just a hand-wavy conversion.

When Runtime Tools Still Make Sense

This is not an anti-runtime argument.

If you need to embed a few existing Vue 3 components inside a React project for a short period, a runtime bridge like Veaury can be a practical choice. It is useful when the team explicitly accepts coexistence as the goal.

What it is not, however, is a full migration strategy.

If the goal is long-term maintainability, pure React output, and a clean engineering path, runtime coexistence is usually the wrong endpoint.

Why VuReact Is the Better Fit for Full Migration

If your team is doing one of these:

migrating a large Vue 3 codebase in batches
standardizing on React as the long-term target
trying to keep the generated output readable and reviewable
wanting the result to fit directly into the React ecosystem

then VuReact is the most production-oriented option among the three.

It does not promise to erase complexity.

It moves complexity to the place where it belongs: compile time, where it can be analyzed, tested, and controlled.

That is a much better engineering trade than hiding complexity inside a runtime wrapper.

Closing Thoughts

Vue-to-React migration is still a real problem, but the wrong tools have distorted how people evaluate it.

If you only ask whether a solution can "run a demo," you will keep rewarding half-finished strategies.

If you instead ask whether a solution can produce:

pure React output
semantic fidelity
gradual migration
testable and reviewable artifacts

then the picture becomes much clearer.

For temporary coexistence, runtime bridges can be useful.
For full migration, compile-time semantic transformation is the better path.

That is why I believe VuReact is the most serious engineering answer among the three.

Resources

Project: https://github.com/vureact-js/core
Docs: https://vureact.top/en

Vue to React with VuReact: A Fast Start Guide

Ryan John — Sat, 06 Jun 2026 14:00:00 +0000

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. It can compile Vue 3 code into standard, maintainable React, helping you generate equivalent React components from Vue source.

In this guide, we will walk through a complete Vue 3 project to React project migration with VuReact. By the end, you will understand:

What rules make an SFC compile reliably
What the output directory looks like after compilation
How the generated TSX relates to the original SFC
How the compiler automatically analyzes React hook dependencies

1. Create a Vite + Vue project

Start with a standard Vue 3 + TypeScript project:

npx create-vite@latest vue-app --template vue-ts

When prompted with Install with npm and start now?, choose No.

You should end up with a project structure similar to this:

vue-app/
  public/
  src/
    assets/
    components/
      HelloWorld.vue
    App.vue
    main.ts
    style.css
  index.html
  package.json
  tsconfig.json
  vite.config.ts
  ...

2. Install VuReact

Move into the project and install dependencies:

cd vue-app
npm install

Then install the VuReact compiler core:

npm install -D @vureact/compiler-core

3. Configure VuReact

Create vureact.config.ts in the vue-app root:

// vue-app/vureact.config.ts
import { defineConfig } from '@vureact/compiler-core';

export default defineConfig({
  // Input path: Vue files to compile. Single files like 'xxx.vue' are allowed.
  input: './src',

  // Exclude Vue entry files to avoid semantic conflicts.
  exclude: ['src/main.ts'],

  output: {
    // Workspace directory for build artifacts and cache.
    workspace: '.vureact',

    // Output directory for the generated React project.
    outDir: 'react-app',

    // Automatically bootstrap a Vite + React environment.
    bootstrapVite: true,
  },
});

Except for exclude, all options can use their defaults.

4. Write a Vue component

Replace the original HelloWorld.vue with a counter component:

<!-- src/components/HelloWorld.vue -->
<template>
  <section class="counter-card">
    <h1>{{ props.title }}</h1>
    <h2>
      <span class="vureact">VuReact</span>
      <span class="vue">Vue</span>
      <span class="react">React</span>
      ({{ count }})
    </h2>
    <p>{{ title }}</p>
    <button @click="increment">+1</button>
    <button @click="methods.decrease">-1</button>
  </section>
</template>

<script setup lang="ts">
// @vr-name: HelloWorld
import { computed, ref, watch } from 'vue';

// You can also use defineOptions({ name: 'HelloWorld' })
const props = defineProps<{ title?: string }>();

const emits = defineEmits<{
  (e: 'update', value: number): void;
}>();

const step = ref(1);
const count = ref(0);
const title = computed(() => `Step: ${step.value}`);

const increment = () => {
  count.value += step.value;
  emits('update', count.value);
};

const methods = {
  decrease() {
    count.value -= step.value;
    emits('update', count.value);
  },
};

watch(count, (newVal) => {
  step.value = Math.floor(newVal / 10) || 1;
});
</script>

<style scoped>
.counter-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;

  .vureact {
    color: #9932cc;
  }

  .vue {
    color: #42b883;
  }

  .react {
    color: #61dafb;
  }
}
</style>

Then update App.vue:

<!-- src/App.vue -->
<script setup lang="ts">
// @vr-name: App
import HelloWorld from './components/HelloWorld.vue';
</script>

<template>
  <HelloWorld
    title="Counter component"
    @update="(v) => { console.log(v) }"
  />
</template>

5. Compile to React

You can compile in either of these ways:

# Full or incremental compilation
npx vureact build

# Watch mode
npx vureact watch

Or add scripts to package.json:

"scripts": {
  "vr:build": "vureact build",
  "vr:watch": "vureact watch"
}

Then run:

npm run vr:build

After compilation, the terminal will print relevant build information.

6. Inspect the output

The generated files are placed under .vureact/react-app, for example:

vue-app/
  .vureact/
    cache/
    react-app/
      src/
        components/
          HelloWorld.tsx
          HelloWorld-[hash].css
        App.tsx
        index.css
        main.tsx
        style.css
      package.json
      tsconfig.json
      vite.config.ts
      ...
    src/
    vureact.config.js

7. Run the React app

cd .vureact/react-app
npm run install
npm run dev

If the styling looks slightly different from the Vue version, that is usually because Vite injects a default index.css into main.tsx. Adjusting that file is enough in most cases.

If you run into issues, check the FAQ in the documentation.

8. Compare the generated result

Here is a simplified version of the output. The exact hashes and helper names may differ depending on the generated artifact:

import { useComputed, useVRef, useWatch } from '@vureact/runtime-core';
import { memo, useCallback, useMemo } from 'react';
import './HelloWorld-ebf8d8dc.css';

export type IHelloWorldProps = {
  title?: string;
} & {
  onUpdate?: (value: number) => void;
};

const HelloWorld = memo((props: IHelloWorldProps) => {
  const step = useVRef(1);
  const count = useVRef(0);
  const title = useComputed(() => `Step: ${step.value}`);

  const increment = useCallback(() => {
    count.value += step.value;
    props.onUpdate?.(count.value);
  }, [count.value, step.value, props.onUpdate]);

  const methods = useMemo(
    () => ({
      decrease() {
        count.value -= step.value;
        props.onUpdate?.(count.value);
      },
    }),
    [count.value, step.value, props.onUpdate],
  );

  useWatch(count, (newVal) => {
    step.value = Math.floor(newVal / 10) || 1;
  });

  return (
    <section className="counter-card" data-css-ebf8d8dc>
      <h1 data-css-ebf8d8dc>{props.title}</h1>
      <h2 data-css-ebf8d8dc>
        <span className="vureact" data-css-ebf8d8dc>VuReact</span>
        <span className="vue" data-css-ebf8d8dc>Vue</span>
        <span className="react" data-css-ebf8d8dc>React</span>
        ({count.value})
      </h2>
      <p data-css-ebf8d8dc>{title.value}</p>
      <button onClick={increment} data-css-ebf8d8dc>
        +1
      </button>
      <button onClick={methods.decrease} data-css-ebf8d8dc>
        -1
      </button>
    </section>
  );
});

export default HelloWorld;

.counter-card[data-css-ebf8d8dc] {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  background: #fafafa;
}

.counter-card[data-css-ebf8d8dc] .vureact[data-css-ebf8d8dc] {
  color: #9932cc;
}

.counter-card[data-css-ebf8d8dc] .vue[data-css-ebf8d8dc] {
  color: #42b883;
}

.counter-card[data-css-ebf8d8dc] .react[data-css-ebf8d8dc] {
  color: #61dafb;
}

Key things to notice

@vr-name: Counter defines the component name.
defineProps and defineEmits are converted into TypeScript props types.
Non-UI components are wrapped in memo by default.
ref, computed, and watch become runtime adapter APIs such as useVRef, useComputed, and useWatch.
Template event handlers become React-style onClick handlers.
Top-level arrow functions are analyzed and may become useCallback.
Top-level variable declarations are analyzed and may become useMemo.
Old ref or computed values in JSX are rewritten with .value.
Scoped styles generate hashed CSS files and matching scope attributes on DOM elements.

FAQ

For common issues during usage, see:

Summary

By following the steps above, you have completed a full migration flow from a Vue SFC project to a React project.

At a high level:

Create a standard Vue + TypeScript project
Install @vureact/compiler-core
Configure vureact.config.ts
Write SFCs using the expected conventions
Run the compiler from the CLI
Start the generated React project and verify the output

VuReact can handle the following core transformations:

Vue template syntax to React JSX, including v-if, v-slot, v-model, and <slot>
Composition API to React Hooks, such as ref to useVRef and computed to useComputed
Reactive dependency analysis to automatic useCallback and useMemo dependency arrays
Component communication to props typing and event callback mapping
Style handling to scoped CSS, CSS Modules, and preprocessor compilation

If you want to test the real demos:

Customer support collaboration backend: https://codesandbox.io/p/github/vureact-js/example-customer-support-hub/master?import=true
CRM admin backend: https://codesandbox.io/p/github/vureact-js/example-crm-admin-backend/master

VuReact complete guide: a Vue-to-React semantic compilation reference

Ryan John — Fri, 05 Jun 2026 14:00:00 +0000

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. It supports progressive migration, semantic compilation, zero-runtime overhead, and end-to-end engineering workflows.

In frontend migration and cross-framework development, Vue and React are two major ecosystems with clear differences in syntax, API design, reactive models, and rendering behavior. Those differences are exactly what makes Vue-to-React migration difficult for many teams. To reduce learning cost, cut down manual rewrites, and achieve a semantic, low-cost, predictable migration, we compiled this VuReact complete guide.

This article covers three major areas: template syntax and built-in components, script-level core APIs and logic, and style systems. It gives a complete one-to-one mapping between common Vue features and their React equivalents. All examples are taken from real VuReact compilation results, so you can compare them directly and use them as a practical migration reference.

Core Resources

Official docs: https://vureact.top/en
GitHub: https://github.com/vureact-js/core

Template Guide

Vue template syntax to React

Script Guide

Vue logic-layer APIs to React

Style Guide

Vue style system to React

Closing

This guide is a living reference for VuReact's Vue-to-React semantic compilation. It will continue to evolve as the tool expands and gradually covers more Vue 3 features.

If you run into a Vue API, directive, scenario, or bug that is not covered yet, you can:

Star the project on GitHub
Open an issue on GitHub Issues

Playground

Customer support collaboration backend: https://codesandbox.io/p/github/vureact-js/example-customer-support-hub/master?import=true
CRM admin backend: https://codesandbox.io/p/github/vureact-js/example-crm-admin-backend/master

How does VuReact compile Vue 3 scoped styles to React?

Ryan John — Thu, 04 Jun 2026 14:00:00 +0000

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we will look at how Vue SFC <style scoped> blocks are compiled into React code.

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 scoped styles in Vue 3 SFCs.

Compilation Mapping

Scoped style conversion

VuReact compiles scoped styles into CSS that carries a scope identifier, then injects the corresponding data-css-{hash} attribute into matching DOM elements.

<!-- Counter.vue -->
<template>
  <div class="card">
    <p>Header</p>
    <p class="content">Content</p>
  </div>
  <button>Submit</button>
</template>

<style scoped>
.card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.card:hover {
  background: #2a8c5e;
}
.content {
  font-size: 12px;
}
</style>

Compiled React

// Counter.jsx
import './counter-abc1234.css';

function Counter() {
  return (
    <div className="card" data-css-abc1234>
      <p data-css-abc1234>Header</p>
      <p className="content" data-css-abc1234>Content</p>
    </div>
    <button data-css-abc1234>Submit</button>
  );
}

/* counter-abc1234.css */
.card[data-css-abc1234] {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.card[data-css-abc1234]:hover {
  background: #2a8c5e;
}
.content[data-css-abc1234] {
  font-size: 12px;
}

As the example shows, Vue <style scoped> blocks are compiled into CSS files with scope markers, and React DOM elements receive the matching data-css-{hash} attribute.

Scoped attribute rules

The scope attribute is not applied to every selector in the same way. Vue's scoped-style exceptions are preserved through these compilation rules:

Template elements do not receive scoped attributes.
Slot content does not receive scoped attributes.

Scope isolation principles

CSS selector rewriting: .card becomes .card[data-css-hash].
DOM attribute injection: matching elements receive the data-css-hash attribute.
Style isolation: styles apply only to elements that share the same scope marker.
Collision prevention: component styles remain isolated from each other.

Compilation summary

VuReact's scoped-style compilation shows a complete scoped selector transformation pipeline:

:global() is unwrapped and emitted as global CSS.
:deep() is split so the left side keeps the scope marker while the inner selector remains penetrative.
:slotted() is simplified, with full semantic handling still in progress.
Pseudo selectors such as :hover, ::before, and :not() are preserved with scope added before the pseudo selector.
Nested selectors work naturally with SCSS/Less-style nesting syntax.

Supported penetrative selectors:

Selector	Status	Notes
`:deep()`	Supported	Scoped on the left, penetrative on the right
`:global()`	Supported	Emits global CSS without scope wrapping
`:slotted()`	Partial	De-structuring handled, full semantics still evolving

VuReact keeps Vue's scoped-style isolation semantics while still allowing flexible penetrative selectors where needed.

How does VuReact compile Vue 3 style syntax into React?

Ryan John — Thu, 04 Jun 2026 01:18:08 +0000

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we will look at how Vue style syntax such as SCSS and Less is compiled into React code.

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 CSS preprocessor usage.

Compilation Mapping

1. `<style lang>` support in SFCs

VuReact supports common CSS preprocessors such as SCSS and Less inside Vue SFCs, and compiles them into standard CSS during transformation.

SCSS example

<!-- Button.vue -->
<template>
  <button class="button">Click me</button>
</template>

<style lang="scss">
$primary: #42b883;

.button {
  background: $primary;
  padding: 12px 24px;
  border-radius: 4px;
  color: white;

  &:hover {
    background: darken($primary, 10%);
  }
}
</style>

Compiled React

// Button.jsx
import './button.css';

function Button() {
  return <button className="button">Click me</button>;
}

/* button.css */
.button {
  background: #42b883;
  padding: 12px 24px;
  border-radius: 4px;
  color: white;
}

.button:hover {
  background: rgba(#42b883, 10%);
}

As the example shows, Vue <style lang="scss"> blocks are compiled into standard CSS files, and preprocessor syntax is transformed during compilation.

Less example

<!-- Card.vue -->
<template>
  <div class="card">
    <h3 class="title">Card Title</h3>
  </div>
</template>

<style lang="less">
@border-color: #e5e5e5;

.card {
  border: 1px solid @border-color;
  border-radius: 8px;
  padding: 16px;

  .title {
    color: #333;
    font-size: 18px;
  }
}
</style>

Compiled React

// Card.jsx
import './card.css';

function Card() {
  return (
    <div className="card">
      <h3 className="title">Card Title</h3>
    </div>
  );
}

/* card.css */
.card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
}

.card .title {
  color: #333;
  font-size: 18px;
}

Preprocessor support means VuReact can convert SCSS and Less syntax into standard CSS while preserving the structure of the original styles.

Preprocessor support highlights

Syntax conversion: preprocessor syntax is transformed into standard CSS during compilation.
Variable handling: Less @variable and SCSS $variable are both parsed correctly.
Nesting support: nested selector syntax is preserved.
Helper functions: color helpers such as darken() and lighten() are supported.

Independent style files

VuReact also supports standalone style files outside of SFCs, and the handling strategy is similar to the <style lang> blocks above.

Standalone SCSS example

Project structure

src/
  components/
    Button.vue
    button.scss
    other.scss

button.scss

@import url('./other.scss');

$primary: #42b883;

.button {
  background: $primary;
  padding: 12px 24px;
  border-radius: 4px;
  color: white;

  &:hover {
    background: darken($primary, 10%);
  }
}

Used in Button.vue

<template>
  <button class="button">Click me</button>
</template>

<script setup>
import './button.scss';
</script>

Compiled React

// Button.jsx
import './button.css';

function Button() {
  return <button className="button">Click me</button>;
}

/* button.css */
@import url('./other.css');

.button {
  background: #42b883;
  padding: 12px 24px;
  border-radius: 4px;
  color: white;
}

.button:hover {
  background: rgba(#42b883, 10%);
}

Standalone Less example

Project structure

src/
  components/
    Card.vue
    card.less

card.less

@border-color: #e5e5e5;

.card {
  border: 1px solid @border-color;
  border-radius: 8px;
  padding: 20px;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .title {
    font-size: 18px;
    color: #333;
  }
}

Used in Card.vue

<template>
  <div class="card">
    <h3 class="title">Card Title</h3>
  </div>
</template>

<script setup>
import './card.less';
</script>

Compiled React

// Card.jsx
import './card.css';

function Card() {
  return (
    <div className="card">
      <h3 className="title">Card Title</h3>
    </div>
  );
}

/* card.css */
.card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card .title {
  font-size: 18px;
  color: #333;
}

Compilation summary

VuReact's style-language compilation shows a complete preprocessor transformation pipeline:

Language detection based on the lang attribute or file extension.
Syntax conversion from preprocessor syntax to standard CSS.
CSS file generation for the compiled output.
Import adaptation for React.
Support for @import statements.

Supported preprocessors:

SCSS/Sass
Less

VuReact preserves the original style authoring experience while producing React-friendly output that fits naturally into the target project structure.

How does VuReact compile Vue 3's CSS Modules to React?

Ryan John — Wed, 03 Jun 2026 14:30:00 +0000

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.

In this article, we will look at how Vue SFC <style module> blocks are compiled into React code.

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 CSS Modules in Vue 3.

Compilation Mapping

Module style transformation

Vue CSS Modules are transformed into a React-compatible module import format while preserving class-name mapping.

<!-- Component.vue -->
<template>
  <div :class="$style.container">Hello</div>
</template>

<style module>
.container {
  padding: 20px;
  background: #f5f5f5;
}
</style>

Compiled React

// Component.jsx
import $style from './component-abc1234.module.css';

function Component() {
  return <div className={$style.container}>Hello</div>;
}

/* component-abc1234.module.css */
.container {
  padding: 20px;
  background: #f5f5f5;
}

As the example shows, Vue <style module> blocks are compiled into CSS Modules files, then used in React through module imports. That preserves the familiar $style.container access pattern and keeps module scoping intact.

Custom module names

CSS Modules also support named module imports.

Default module name: $style -> $style
Custom module name: <style module="custom"> -> custom

<!-- Component.vue -->
<template>
  <div :class="custom.container">Custom Module</div>
</template>

<style module="custom">
.container {
  margin: 10px;
  border: 1px solid #ccc;
}
</style>

Compiled React

// Component.jsx
import custom from './component-xyz123.module.css';

function Component() {
  return <div className={custom.container}>Custom Module</div>;
}

The generated code keeps the module import style consistent with Vue's usage while adapting it to React's module import conventions.

CSS Modules with scoped styles

CSS Modules can also be combined with scoped styles for stronger isolation.

<!-- Component.vue -->
<template>
  <div :class="$style.wrapper">
    <span :class="$style.text">Text Content</span>
  </div>
</template>

<style module scoped>
.wrapper {
  padding: 20px;
  background: #f8f8f8;
}

.text {
  color: #333;
  font-size: 16px;
}
</style>

Compiled React

// Component.jsx
import $style from './component-abc123.module.css';

function Component() {
  return (
    <div className={$style.wrapper} data-css-abc123>
      <span className={$style.text} data-css-abc123>
        Text Content
      </span>
    </div>
  );
}

/* component-abc123.module.css */
.wrapper[data-css-abc123] {
  padding: 20px;
  background: #f8f8f8;
}

.text[data-css-abc123] {
  color: #333;
  font-size: 16px;
}

The combination of scoped plus CSS Modules gives you both module-level encapsulation and per-component style isolation.

Compilation summary

VuReact's CSS Modules compilation strategy shows a complete module-style migration path:

CSS Modules are extracted into standalone .module.css files.
Class mappings are preserved, including $style.className syntax.
React-compatible module imports are generated automatically.

That lets the compiled React output keep Vue's CSS Modules experience while fitting naturally into React's module-based styling model.

How does VuReact handle Vue 3's top-level TypeScript declarations in React?

Ryan John — Wed, 03 Jun 2026 14:00:00 +0000

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.

In this article, we will look at how VuReact handles top-level TypeScript declarations when compiling Vue 3 code to React.

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 TypeScript.

Compilation Mapping

Top-level TypeScript declarations -> hoisted outside the React component

In Vue, top-level TypeScript declarations inside <script setup> such as interface, type, or enum are purely static language constructs. They do not produce runtime behavior.

VuReact performs static analysis on those declarations and hoists them outside the generated React component so they remain at module scope, preserve their intended visibility, and do not interfere with runtime logic.

<script setup lang="ts">
export interface ExampleInterface { /* ... */ }

enum ExampleEnum { /* ... */ }

function func() {
  type ExampleType = { /* ... */ };
}
</script>

Compiled React

export interface ExampleInterface { /* ... */ }

enum ExampleEnum { /* ... */ }

const Example = memo(() => {
  function func() {
    type ExampleType = { /* ... */ };
  }

  return <></>;
});

As the example shows, top-level type declarations are preserved outside the component as module-level TypeScript declarations, while inner type declarations remain inside their original function scope.

That allows VuReact to preserve TypeScript semantics without introducing unnecessary changes to the runtime structure of the compiled React component.

DEV Community: Ryan John

How does VuReact compile Vue 3's defineModel to React?

Before We Start

Compilation Mapping

Vue defineModel → useVRef + useUpdated for auto-sync

defineModel(name, options) → typed prop declaration with default

Direct .value assignment → auto-sync with parent

v-model in templates → React controlled components

Unsupported defineModel patterns

Full example

Related Links

VuReact | Vue to React Hybrid Migration Practice: Real Support Hub Case

Project structure overview

Step 1: Clone the repo and install dependencies

Key points

Success criteria

Step 2: Run a full build cycle

What to expect

Key points

Troubleshooting

Success criteria

Step 3: Understand the key files

1. Routing entry

2. State entry

3. Page entry points

Key points

Step 4: Start the React output

What to expect

Key points

Success criteria

Step 5: Complete the business validation

What you should be able to do

What to pay attention to

Troubleshooting

Success criteria

Summary

Appendix: Troubleshooting references

Vue to React Migration in Action: Real CRM Admin Case

Project structure overview

Step 1: Clone the repo and install dependencies

Key points

Success criteria

Step 2: Run a full build cycle

What to expect

Key points

Troubleshooting

Success criteria

Step 3: Understand the key files

1. Routing entry

2. Business state entry

3. Page entry points

Key points

Step 4: Start the generated React app

What to expect

Key points

Success criteria

Step 5: Complete the business validation

What you should be able to do

What to pay attention to

Troubleshooting

Success criteria

Summary

Appendix: Troubleshooting references

Vue to React Migration: Why Runtime Wrappers Hit a Ceiling

The Limits of Existing Approaches

How VuReact Approaches It

What the Translation Actually Looks Like

1. Default Slot <slot> → React props.children

2. Scoped Slot → React Function props.children()

3. computed() → useComputed(), defineEmits() → props.onXxx()

4. <style scoped> → data-css-{hash} Scoped Styles

5. defineExpose → React forwardRef + useImperativeHandle

Why This Matters in the AI Era

Real Projects, Not Just a Concept

How to Get Started

Closing Thoughts

Vue to React: Stop Treating Migration Like a Toy Problem

Why the Wrong Routes Poison the Field

1. Runtime wrappers create a false sense of completion

2. Half-finished converters are dangerous in a different way

Vue `defineModel` → `useVRef` + `useUpdated` for auto-sync

`defineModel(name, options)` → typed prop declaration with default

Direct `.value` assignment → auto-sync with parent

`v-model` in templates → React controlled components

Unsupported `defineModel` patterns

1. Default Slot `<slot>` → React `props.children`

2. Scoped Slot → React Function `props.children()`

3. `computed()` → `useComputed()`, `defineEmits()` → `props.onXxx()`

4. `<style scoped>` → `data-css-{hash}` Scoped Styles

5. `defineExpose` → React `forwardRef` + `useImperativeHandle`

Props, emits, and `v-model`

`ref`, `watch`, and `defineExpose`

`props`, `emits`, and `v-model`

`ref`, `watch`, and `defineExpose`

1. `<style lang>` support in SFCs