🚀 Stop Rewriting Components — Convert React to Vue Automatically

yazar

What if switching frameworks didn’t mean rewriting everything from scratch?

Frontend developers are constantly facing this problem:

  • You start with React, then your team (or client) prefers Vue
  • You want to reuse logic across ecosystems
  • Or you’re exploring frameworks but hate duplicating effort

So I built something to challenge that.

🔥 Introducing: cross-framework

A source-to-source compiler that converts:

👉 React (JSX / TSX) → Vue 3 (Single File Components)

And no — this is not regex hacks or AI guessing.

This is a real compiler pipeline:

  • Parse code using Babel
  • Transform into an intermediate representation (IR)
  • Emit clean Vue 3 <script setup> + <template>

🎥 Demo (see it in action)

Watch the demo here:
https://x.com/i/status/2037575942160122244

🧠 Why this matters

Switching frameworks today is expensive:

  • Rewriting components manually
  • Risk of introducing bugs
  • Losing consistency across codebases

AI tools try to solve this, but:

  • ❌ Results are inconsistent
  • ❌ Require prompt engineering
  • ❌ Break structure in complex cases
  • ❌ Come with ongoing pricing plans

This project focuses on:
✔ deterministic output
✔ structured transformations
✔ developer-first control

⚙️ How it works

CLI usage

npm install cross-framework

npx cross-framework convert --from react --to vue ./path/Component.tsx

This generates: 

Component.vue

You can also specify an output directory with --out-dir.

Programmatic API

import { convertCode } from "cross-framework"

const vueCode = convertCode({
  from: "react",
  to: "vue",
  sourceCode: reactSource,
  filename: "Component.tsx",
})

🧩 What it supports

✅ React Features

  • Function components (default / named exports)
  • memo and forwardRef

✅ Hooks → Vue equivalents

  • useState → ref
  • useRef → ref
  • useMemo → computed
  • useEffect → watch, watchEffect, onMounted

✅ JSX → Vue Template

  • Props & spreads
  • Events
  • Lists (map)
  • Conditionals
  • Fragments

All transformed into clean Vue 3 template syntax:

  • className → class / :class
  • JSX → template IR → Vue output

⚠️ Current limitations

Like any early-stage compiler, there are some constraints:

  • Imports are not rewritten
  • Multi-component files may need manual adjustments
  • Design-system-heavy props might need cleanup

🌍 Try it yourself

🧪 Playground:
https://cross-framework.netlify.app/

📚 Documentation:
https://cross-framework-doc.netlify.app/

🧭 The vision

This is just the beginning.

Next steps:

  • Support more frameworks (Angular, Svelte, etc.)
  • Convert entire projects, not just components
  • Build a universal transformation pipeline for frontend code

Imagine:

Write once → run anywhere (React, Vue, more…)

❤️ Support the project

If you believe in this direction and want to see it grow:

👉 https://github.com/sponsors/parsajiravand

🤝 Join the team

I’m looking for developers who want to build something ambitious in the frontend ecosystem.

If you’re interested in contributing long-term:

📩 [email protected]

🧠 Final thought

We’ve spent years choosing frameworks.

Maybe it’s time to stop choosing…
and start abstracting the boundaries between them.

#webdevelopment #frontend #reactjs #vuejs #javascript #typescript #opensource #programming #softwareengineering #developer #coding #devtools #saas #ai #buildinpublic #100daysofcode #github #webdev #frontenddeveloper #techinnovation