DEV Community: Ryan John

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.

How does VuReact optimize Vue 3's top-level arrow functions for React?

Ryan John — Tue, 02 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 optimizes top-level arrow functions 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 top-level arrow functions in Vue 3 and dependency optimization in React.

Compilation Mapping

Top-level Vue arrow functions -> React `useCallback()`

Inside Vue <script setup>, top-level arrow functions are often used for event handlers, helper methods, and lightweight business logic.

VuReact analyzes the external dependencies of those top-level arrow functions during compilation. When appropriate, it compiles them into useCallback() and generates the dependency array automatically.

<script setup lang="ts">
const inc = () => {
  count.value++;
};

const fn = () => {};

const fn2 = () => {
  const value = foo.value;
  const fn4 = () => {
    value + state.bar.c--;
  };

  fn();
};
</script>

Compiled React

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

// No optimization is applied to dependency-free arrow functions
const fn = () => {};

const fn2 = useCallback(() => {
  const value = foo.value;

  // Local nested functions are not forced into useCallback
  const fn4 = () => {
    value + state.bar.c--;
  };

  fn();
}, [foo.value, state.bar.c]);

As the example shows, VuReact can generate useCallback() automatically for top-level arrow functions that depend on reactive values, so developers do not have to manage the dependency array manually.

What dependency analysis actually does

VuReact's optimization follows a few practical rules:

Only top-level arrow functions are considered for useCallback() optimization.
Local or nested functions are left alone.
Dependency collection follows React rules and only tracks values that are meaningfully referenced from outside the function body.
Dependency-free top-level functions remain plain functions to avoid unnecessary Hook overhead.

Why this matters

In React, function components recreate function definitions on every render. For event handlers or callbacks passed to child components, that can cause unnecessary re-renders or unstable references.

By optimizing at compile time, VuReact can:

Improve callback stability.
Reduce avoidable child re-renders.
Preserve the original Vue authoring style without forcing explicit useCallback() usage.

How does VuReact optimize Vue 3's top-level constants and variables for React?

Ryan John — Tue, 02 Jun 2026 01:12: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 optimizes top-level constants and variables 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 top-level const declarations and variable optimization in Vue 3.

Compilation Mapping

Top-level Vue `const` -> static hoisting outside the React component

In Vue, top-level constants inside <script setup> are often used for static configuration, default values, and fixed flags.

VuReact performs static analysis on these declarations. If the initializer is a simple literal such as a string, number, or boolean, it can be hoisted outside the React component so it is not recreated on every render.

<script setup lang="ts">
const defaultValue = 1;
const isEnabled = true;
</script>

Compiled React

const defaultValue = 1;
const isEnabled = true;

const Comp = memo(() => {
  return <></>;
});

For simple top-level constants, VuReact lifts the value out of the component body and avoids repeated initialization during re-renders.

Top-level computed variables -> React `useMemo()` with automatic dependency analysis

When a top-level variable is derived from an expression that depends on reactive state, VuReact can compile it into useMemo() and generate the dependency array automatically.

Purely static expressions are left as normal values instead of being wrapped unnecessarily.

<script setup lang="ts">
const count = ref(0);
const state = reactive({ foo: 'bar', bar: { c: 1 } });

const memoizedObj = {
  title: 'test',
  bar: count.value,
  add: () => {
    state.bar.c++;
  },
};

const staticObj = {
  foo: 1,
  state: { bar: { c: 1 } },
};

const reactiveList = [count.value, 1, 2];
</script>

Compiled React

const count = useVRef(0);
const state = useReactive({ foo: 'bar', bar: { c: 1 } });

const memoizedObj = useMemo(
  () => ({
    title: 'test',
    bar: count.value,
    add: () => {
      state.bar.c++;
    },
  }),
  [count.value, state.bar.c],
);

const staticObj = {
  foo: 1,
  state: {
    bar: { c: 1 },
  },
};

const reactiveList = useMemo(() => [count.value, 1, 2], [count.value]);

In this example:

memoizedObj becomes useMemo() because it depends on count.value and state.bar.c.
staticObj stays a normal static object because it does not depend on reactive state.
reactiveList is also compiled into useMemo() with an automatically generated dependency array.

That gives React the memoization it needs without forcing developers to write dependency logic by hand.

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

Ryan John — Tue, 02 Jun 2026 00:11:23 +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's built-in <TransitionGroup> component 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 Vue 3 <TransitionGroup>.

Compilation Mapping

List transition animations

<TransitionGroup> is Vue's built-in component for entering, leaving, and moving list items. It is the list-oriented counterpart to <Transition>.

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>

Compiled React

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

<TransitionGroup name="list" tag="ul">
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</TransitionGroup>;

As the example shows, Vue <TransitionGroup> is compiled into the VuReact Runtime TransitionGroup adapter.

This mapping preserves the core behavior of list transitions:

It keeps the Vue-style transition semantics intact.
It supports entering, leaving, and moving items in a list.
It respects the tag prop for container rendering.
It still requires stable key values for each list item.

Move transitions

<TransitionGroup> also supports smooth move animations when list items are reordered, usually through the move-class prop.

<template>
  <TransitionGroup name="list" tag="ul" move-class="list-move">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>

Compiled React

<TransitionGroup name="list" tag="ul" moveClass="list-move">
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</TransitionGroup>;

.list-move {
  transition: all 0.5s ease;
}

.list-leave-active {
  position: absolute;
}

Under the hood, move transitions are typically implemented with FLIP-style positioning and CSS transform transitions, which makes reordering feel smooth without sacrificing performance.

Custom container elements

The tag prop controls the rendered container element type.

<template>
  <TransitionGroup name="fade" tag="div" class="item-list">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.name }}
    </div>
  </TransitionGroup>
</template>

Compiled React

<TransitionGroup name="fade" tag="div" className="item-list">
  {items.map((item) => (
    <div key={item.id} className="item">
      {item.name}
    </div>
  ))}
</TransitionGroup>;

The tag prop keeps the generated DOM structure explicit and easy to reason about.

Transition features are preserved

<TransitionGroup> inherits the same transition-related capabilities as <Transition>, including classes and hooks.

<template>
  <TransitionGroup
    name="slide"
    tag="div"
    :duration="500"
    @enter="onEnter"
    @leave="onLeave"
  >
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </TransitionGroup>
</template>

Compiled React

<TransitionGroup
  name="slide"
  tag="div"
  duration={500}
  onEnter={onEnter}
  onLeave={onLeave}
>
  {items.map((item) => (
    <div key={item.id}>{item.name}</div>
  ))}
</TransitionGroup>;

VuReact preserves the transition API surface so list animations remain familiar after migration.

Compilation Summary

VuReact's TransitionGroup compilation strategy shows a complete list transition migration path:

Vue <TransitionGroup> is mapped directly to the runtime adapter.
Core props such as name, tag, and moveClass are supported.
v-for rendering becomes map() rendering in React.
Transition hooks and animation behavior are preserved.

The result is a React implementation that keeps Vue's list transition semantics while fitting into React's component model.

Vue Transition component to React: How does VuReact handle it?

Ryan John — Mon, 01 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 dive straight into the core: how Vue's built-in <Transition> component 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 <Transition> component usage.

Compilation Mapping

Transition: Single element transition animation

<Transition> is Vue's built-in component for adding enter/leave transition animations to a single element or component.

Basic Transition usage

<template>
  <Transition name="fade">
    <div v-if="show">Content</div>
  </Transition>
</template>

Compiled React

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

<Transition name="fade">
  {show ? <div>Content</div> : null}
</Transition>

As the example shows, Vue's <Transition> component is compiled into the Transition adapter component provided by VuReact Runtime — think of it as "Vue's Transition for React".

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue <Transition> behavior by implementing transition animations
CSS class names: Automatically generates and applies transition-related CSS class names
Conditional rendering: Supports transition effects for conditionally rendered elements
React integration: Implements Vue's transition semantics in the React environment

Corresponding CSS styles:

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.fade-leave-active {
  opacity: 0;
  transition: opacity 0.5s ease;
}

Transition mode control

The mode attribute controls the order of新旧 content switching, preventing enter and leave animations from running simultaneously.

<template>
  <Transition name="slide-fade" mode="out-in">
    <button v-if="state" key="on">On</button>
    <button v-else key="off">Off</button>
  </Transition>
</template>

Compiled React

<Transition name="slide-fade" mode="out-in">
  {state ? <button key="on">On</button> : <button key="off">Off</button>}
</Transition>

Transition modes:

out-in: The leave animation finishes first, then the enter animation plays
in-out: The enter animation finishes first, then the leave animation plays
Default: Enter and leave animations play simultaneously

The importance of key:

Node identification: Helps Transition identify different elements
Animation trigger: A change in key triggers the transition animation
State preservation: Ensures animations are correctly applied to the corresponding element
Automatic multi-node key handling: When no explicit key is provided, VuReact automatically generates a random identifier to ensure proper transition animation triggering

Custom transition class names

Beyond using name to auto-generate class names, you can also directly specify custom transition class names for easy integration with third-party animation libraries.

<template>
  <Transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div v-if="show">Custom animation</div>
  </Transition>
</template>

Compiled React

<Transition
  enterActiveClass="animate__animated animate__fadeIn"
  leaveActiveClass="animate__animated animate__fadeOut"
>
  {show ? <div>Custom animation</div> : null}
</Transition>

Custom class name attributes:

enterFromClass: Class name at the start of enter
enterActiveClass: Class name during the active enter phase
enterToClass: Class name at the end of enter
leaveFromClass: Class name at the start of leave
leaveActiveClass: Class name during the active leave phase
leaveToClass: Class name at the end of leave

JavaScript hook functions

Transition supports JavaScript hook functions for executing custom logic at different stages of the animation.

<template>
  <Transition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @leave="onLeave"
  >
    <div v-if="show">JS controlled animation</div>
  </Transition>
</template>

Compiled React

<Transition
  onBeforeEnter={onBeforeEnter}
  onEnter={onEnter}
  onAfterEnter={onAfterEnter}
  onLeave={onLeave}
>
  {show ? <div>JS controlled animation</div> : null}
</Transition>

JavaScript hooks:

onBeforeEnter: Triggered before the enter animation starts
onEnter: Triggered during the enter animation
onAfterEnter: Triggered after the enter animation completes
onLeave: Triggered during the leave animation
onAfterLeave: Triggered after the leave animation completes

Transition duration control

The duration attribute explicitly specifies the transition duration.

<template>
  <Transition :duration="800">
    <div v-if="show">Specified duration animation</div>
  </Transition>
</template>

Compiled React

<Transition duration={800}>
  {show ? <div>Specified duration animation</div> : null}
</Transition>

Duration configuration:

Number: Sets a uniform duration for both enter and leave
Object: Sets separate durations for enter and leave

<Transition duration={{ enter: 300, leave: 500 }}>
  {show ? <div>Content</div> : null}
</Transition>

Compilation strategy summary

VuReact's Transition compilation strategy demonstrates a complete transition animation conversion capability:

Direct component mapping: Maps Vue <Transition> directly to VuReact's <Transition>
Full attribute support: Supports all attributes including name, mode, custom class names, hook functions, etc.
CSS class name generation: Automatically generates and applies transition-related CSS class names
JavaScript integration: Supports animation control through JS hooks

Core features:

Automatic class names: Auto-generates CSS transition class names via the name attribute
Mode control: Controls the order of enter/leave animations via mode
Custom class names: Directly specifies transition class names, supporting third-party animation libraries
JS hooks: Executes JavaScript logic at different animation stages
Duration control: Precisely controls the duration of transition animations

Important notes:

Single child node: <Transition> can only have one direct child node
Key requirement: It is recommended to provide a stable key when switching between different elements
CSS requirement: The transition appearance must be set in *-enter-active and *-leave-active
Performance considerations: Complex animations may affect performance; use them wisely

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement transition animation logic. The compiled code preserves Vue's transition semantics and animation effects while following React's component design patterns, keeping the migrated application fully capable of transition animations.

How does VuReact implement Vue's Suspense component in React?

Ryan John — Mon, 01 Jun 2026 02: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 dive straight into the core: how Vue's built-in <Suspense> component 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 <Suspense> component usage.

Compilation Mapping

Suspense: Async component loading

<Suspense> is Vue's built-in component for handling asynchronous component loading. It displays fallback content while async dependencies are not yet resolved, improving the user experience.

Basic Suspense usage

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

Compiled React

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

<Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</Suspense>

As the example shows, Vue's <Suspense> component is compiled into the Suspense adapter component provided by VuReact Runtime — think of it as "Vue's Suspense for React".

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue <Suspense> behavior by handling async loading
Fallback content: Displays specified fallback content while async components are loading
React integration: Implements Vue's Suspense semantics in the React environment
User experience: Improves the UX during async loading

Delayed fallback content display

The timeout attribute controls when the fallback content is displayed, preventing flashing on short requests.

<template>
  <Suspense :timeout="1000">
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Over 1 second, showing loading state...</div>
    </template>
  </Suspense>
</template>

Compiled React

<Suspense 
  timeout={1000}
  fallback={<div>Over 1 second, showing loading state...</div>}
>
  <AsyncComponent />
</Suspense>

Purpose of timeout:

Anti-flash: Prevents fallback content from flashing on fast loads
User experience: Only shows loading state when loading takes longer
Performance optimization: Reduces unnecessary UI switching
Flexible configuration: Different timeout values can be set for different scenarios

Nested async dependencies

When a Suspense boundary contains multiple async components, it waits for all async dependencies to resolve before switching to the content area.

<template>
  <Suspense>
    <template #default>
      <AsyncComponentA />
      <AsyncComponentB />
    </template>
    <template #fallback>
      <div>Syncing multiple async components...</div>
    </template>
  </Suspense>
</template>

Compiled React

<Suspense fallback={<div>Syncing multiple async components...</div>}>
  <AsyncComponentA />
  <AsyncComponentB />
</Suspense>

Synchronous loading:

Unified management: Waits for all async components to finish loading
Avoids partial display: Prevents layout shifts caused by some components rendering early
Consistent experience: Provides a more uniform user experience
Error handling: Unified handling of loading error scenarios

Lifecycle callbacks

Lifecycle callbacks allow you to listen to different states of Suspense.

<template>
  <Suspense 
    @pending="onPending"
    @fallback="onFallback" 
    @resolve="onResolve"
  >
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

Compiled React

<Suspense
  fallback={<div>Loading...</div>}
  onPending={onPending}
  onFallback={onFallback}
  onResolve={onResolve}
>
  <AsyncComponent />
</Suspense>

Lifecycle events:

onPending: Triggered when waiting for async dependencies begins
onFallback: Triggered when fallback content is displayed
onResolve: Triggered when all async dependencies are resolved
State tracking: Useful for recording the async boundary state

Compilation strategy summary

VuReact's Suspense compilation strategy demonstrates a complete async loading conversion capability:

Direct component mapping: Maps Vue <Suspense> directly to VuReact's <Suspense>
Full attribute support: Supports all attributes including fallback, timeout, lifecycle callbacks, etc.
Slot conversion: Converts Vue's slot syntax into React's props syntax
Async semantics preserved: Fully preserves Vue's async loading semantics

Core features:

Fallback content: Specifies the content to display during loading via the fallback attribute
Timeout control: Controls when fallback content is displayed via timeout
Multi-component sync: Supports unified loading management for multiple async components
State monitoring: Listens to loading states through lifecycle callbacks

Important notes:

fallback required: Fallback content must be provided
timeout default: Without a timeout set, fallback content is displayed immediately
Performance considerations: Set timeout wisely to avoid unnecessary UI switching
Error handling: Needs to be combined with error boundaries for handling loading failures

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement async loading logic. The compiled code preserves Vue's async loading semantics and user experience while following React's component design patterns, keeping the migrated application fully capable of asynchronous loading.

DEV Community: Ryan John

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

Three Approaches, Three Tradeoffs

Vuera: a runtime wrapper from another era

Veaury: a modern runtime bridge

VuReact: a compile-time migration toolchain

Where the Complexity Lives

Why Compile-Time Wins for Real Migration

Evidence, Not Hype

props, emits, and v-model

ref, watch, and defineExpose

Slots and scoped styles

When Runtime Tools Still Make Sense

Why VuReact Is the Better Fit for Full Migration

Closing Thoughts

Resources

Vue to React with VuReact: A Fast Start Guide

1. Create a Vite + Vue project

2. Install VuReact

3. Configure VuReact

4. Write a Vue component

5. Compile to React

6. Inspect the output

7. Run the React app

8. Compare the generated result

Key things to notice

FAQ

Summary

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

Core Resources

Template Guide

Vue template syntax to React

Script Guide

Vue logic-layer APIs to React

Style Guide

Vue style system to React

Closing

Playground

How does VuReact compile Vue 3 scoped styles to React?

Before We Start

Compilation Mapping

Scoped style conversion

Scoped attribute rules

Scope isolation principles

Compilation summary

Related Links

How does VuReact compile Vue 3 style syntax into React?

Before We Start

Compilation Mapping

1. <style lang> support in SFCs

SCSS example

Less example

Preprocessor support highlights

Independent style files

Standalone SCSS example

Standalone Less example

Compilation summary

Related Links

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

Before We Start

Compilation Mapping

Module style transformation

Custom module names

CSS Modules with scoped styles

Compilation summary

Related Links

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

Before We Start

Compilation Mapping

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

Related Links

How does VuReact optimize Vue 3's top-level arrow functions for React?

Before We Start

Compilation Mapping

Top-level Vue arrow functions -> React useCallback()

What dependency analysis actually does

Why this matters

Related Links

How does VuReact optimize Vue 3's top-level constants and variables for React?

Before We Start

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

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

1. `<style lang>` support in SFCs

Top-level Vue arrow functions -> React `useCallback()`

Top-level Vue `const` -> static hoisting outside the React component

Top-level computed variables -> React `useMemo()` with automatic dependency analysis