Archive Notice (2026-10-13): VuReact is no longer maintained. Please evaluate and maintain it yourself before using it in production. See the archive notice for details.
Write Vue. Get Pure React.
A smart compiler built for migrating Vue to React.
Converts Vue 3 Components, Scripts, and Styles into pure React (no runtime bridge), supporting progressive migration and Vue+React hybrid development.
Online Playground · Quick Start · Use Cases · Ecosystem · Compilation Conventions · Semantic Comparison · Changelog
.gif)
Showcase (Vue project on left → generated React app on right)
.gif){kind=link}
Existing solutions either wrap a runtime (bad perf, harder debugging) or provide partial conversions that fail on advanced syntax. VuReact is a compile-time approach: output is plain React code with no Vue runtime dependency, enabling progressive migration.
| Other Approaches | VuReact |
|---|---|
| Runtime wrappers (dual frameworks, poor performance, large bundles) | Compile-time output — pure React, incremental, per-module migration |
| Partial converters (fail on complex syntax) | Full support for template directives, props, slots, Composition API, scoped styles, and TypeScript typings |
| AI-based rewrites (unpredictable, require heavy manual review) | Deterministic AST-based transforms — predictable and auditable output |
👉 Learn more: Why VuReact? — more than syntax transformation
- 🕹️ Online Playground (no install)
- ✨ Core Features
- 🚀 Quick Start
- 🛠️ CLI
- 💬 Feedback & Community
- ✅ Use Cases
- 📦 Repository Packages
- ♻️ Ecosystem
- ⚙️ Processing Flow
- 🙏 Special Thanks
- 🤝 Contributing
- 📄 License
- 🩷 Sponsorship
- 🧩 Who's using VuReact
Try the full Vue → React compilation flow in 30 seconds:
Examples are hosted on CodeSandbox and start automatically — please allow a moment to load.
- Semantic, not string-based transforms: analyzes templates,
<script setup>, Composition API and TS types to generate idiomatic React code. - Convention-first, controllable & maintainable: not trying to convert everything — follows explicit compilation rules for predictable output.
- Incremental migration: convert single files or whole projects progressively, no full rewrite required.
- Comprehensive feature adaptation: reactive APIs, lifecycle, built-ins, routing, scoped/module styles, Less/Sass handled at compile time with zero runtime overhead.
- Automatic dependency inference: top-level functions are automatically wrapped with
useCallback, objects/values are memoized viauseMemo, and hook dependencies are tracked. - Dual-mode CLI:
vureact build(fast incremental builds) andvureact watch(watch mode) for a near-native developer experience.
💡 Official guide from scratch: VuReact Quick Start
💡 Hybrid migration walkthrough: Customer Support Hub (Vue + React)
In your Vue 3 project, install:
npm i -D @vureact/compiler-coreCreate vureact.config.ts in the project root:
import { defineConfig } from '@vureact/compiler-core';
export default defineConfig({
input: '', // input path: single file or directory
exclude: ['src/main.ts'], // exclude the Vue entry and files that should not be compiled
output: {
workspace: '.vureact',
outDir: 'react-app',
bootstrapVite: true,
},
onSuccess: async () => {
console.log('Compilation succeeded!');
// You can do extra work here, such as filesystem changes or calling other tools
},
});💡 More configuration options: Config API
{
input: './src/your-component.vue',
}{
input: './src',
}💡 Note: if your project uses Vue Router, see the router adaptation guide for the required setup.
npx vureact buildThe generated .vureact/react-app directory contains the converted components and the related dependency/config setup.
Project layout example:
vue-project/
├── .vureact/
│ ├── cache/ # compilation cache
│ ├── react-app/ # generated React app
│ │ ├── src/ # converted React source
│ │ ├── package.json # React app dependencies
│ │ ├── vite.config.ts # Vite config
│ │
├── src/ # original Vue source
├── package.json # original project dependencies
└── vureact.config.ts # config file💡 If you see compilation warnings, follow the hints and adjust your source. Reading the Compilation Conventions and Best Practices will help you write Vue code that converts more smoothly.
# full/incremental build
npx vureact build
# watch mode for development
npx vureact watch
# show version
npx vureact -v
# help
npx vureact --help👉 See the build/watch guides: Incremental Compilation | Watch Mode
- Problems? See the FAQ or open an Issue.
- Questions about router adaptation? See the router adaptation guide.
- Page styles look wrong? See the style troubleshooting solution.
- Share your experience on Discussions.
- Want to support the project? A ⭐ helps more people discover it.
- Projects need to migrate incrementally from Vue 3 to React, but do not want to rewrite from scratch, preferring to find existing solutions first.
- Some developers use Vue as their primary technology stack, are accustomed to its mental model, and consider React's overhead to be heavier than Vue's.
- Backend developers do not want to learn both frameworks; Vue is quick to pick up and intuitive, and they are reluctant to engage with React.
- The converted React code must completely detach from the Vue runtime to avoid performance and bundle size issues caused by a dual-framework runtime.
- Controllability first: current focus is engineering scenarios prioritizing predictability.
- Convention-driven: compilation relies on clear conventions.
- Modern syntax: targets Vue 3 Composition API and
<script setup>.
Optionally, use Hybrid Authoring to leverage React ecosystem capabilities within a Vue project.
- VuReact Runtime — lightweight React-side implementations of Vue core APIs.
- VuReact Router — adapter layer that maps Vue Router patterns to React Router.
VuReact's processing flow is divided into two main stages: compilation and runtime, achieving the conversion from Vue to React through clear division of labor.
flowchart LR
A[Vue SFC / Script Input] --> B[Parsing]
B --> C[Semantic Analysis]
C --> D[Convention Validation]
D --> E[Dependency Collection / Hook Compliance]
E --> F[React JSX / TSX Output]
F --> G[Runtime Semantic Adaptation]
G --> H[Router / Project Integration]
Compilation (Deterministic): Parse Vue SFC / Script, validate conventions, analyze dependencies, and generate TSX that closely follows React practices.
Runtime (Semantic Adaptation): Provide Vue-style APIs (such as useVRef, KeepAlive and etc.), fill in framework discrepancies that the compiler cannot resolve, and integrate the routing layer to ensure the migration covers the entire project.
👉 Learn more: VuReact Philosophy
The runtime adaptation layer was inspired and supported by the following projects:
- valtio — Vue-style reactive API ideas and Proxy-based implementation on the React side
- react-transition-group — React transition animation components
Contributions welcome — please read CONTRIBUTING.md.
MIT License © 2025 Ruihong Zhong (Ryan John)
VuReact is community-supported. Sponsorships fund maintenance, feature work and docs.
Platform: Afdian
We are collecting the first showcase entries — if you tried VuReact, please submit a case:
VuReact — exploring the feasibility of full Vue-to-React compilation through an innovative compiler architecture and runtime adaptation, aiming for unprecedented transformation depth and engineering completeness.