🚀 Stop Rewriting Components — Convert React to Vue Automatically

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:

📩 [e-mail]

---

🧠 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