cross-framework

Source-to-source compiler: React (JSX / TSX) → Vue 3 single-file components. Parse with Babel, normalize hooks into an intermediate representation, emit <script setup> and <template>—not regex rewrites.

License: MIT — see LICENSE. Branding: the names cross-framework and cross-ui identify this project; see BRANDING.md.

Documentation & website

• Live playground: cross-framework.netlify.app
• Documentation: cross-framework-doc.netlify.app

The repository may be private; this README is what ships on npm.

Install & CLI

npm install cross-framework

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

Writes Component.vue beside the source, or use --out-dir for another folder. The CLI is also available as cross-ui.

Programmatic API

import { convertCode } from "cross-framework"

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

Only from: "react" and to: "vue" are supported in this release.

What it does (short)

• One main React function component per file; default or named export (including common memo / forwardRef wrappers).
• Hooks: useState, useRef, useMemo, useEffect lowered toward Vue ref, computed, watch, watchEffect, onMounted where possible.
• JSX: spreads, events, lists, conditionals, fragments—lowered to a template IR, then printed as Vue markup (className → class / :class, etc.).

Limits: imports are not rewritten; multi-component files and design-system props may need manual follow-up. More frameworks and targets are planned.

Contact

• Questions or bugs: email [email protected] (more channels may be added later).
• Contributors who want to join the team: send email to the same address and say you’re interested in contributing long-term.

Changelog

See CHANGELOG.md in the repository when you have access to the source tree.