Effortlessly Convert React to Vue with New Compiler

In the ever-evolving world of frontend development, teams often face the challenge of switching frameworks, such as moving from React to Vue. Traditionally, this transition requires laborious rewriting of components, but a new tool aims to streamline this process.

Introducing Cross-Framework

Cross-framework is a cutting-edge source-to-source compiler designed to convert React (JSX/TSX) into Vue 3 Single File Components. Unlike solutions that rely on regex or AI predictions, this compiler uses a robust pipeline:

• Parsing: Utilizes Babel to parse the code.
• Transformation: Converts the code to an intermediate representation (IR).
• Emission: Outputs clean Vue 3 <script setup> and <template> components.

Why This Matters

Switching frameworks can be costly and risky, often involving:

• Manual component rewriting
• Potential bug introduction
• Loss of codebase consistency

While AI tools offer some solutions, they often fall short due to inconsistent results, prompt dependency, and structural issues in complex cases. Cross-framework addresses these concerns with:

• Deterministic Output: Ensures predictable results.
• Structured Transformations: Maintains code integrity.
• Developer-First Control: Prioritizes developer needs.

How It Works

CLI Usage

To use the CLI, install the tool via npm:

npm install cross-framework

Convert your React components to Vue with:

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

This will generate a Component.vue file. You can specify an output directory using --out-dir.

Programmatic API

For programmatic conversion, import the function and convert your code as follows:

import { convertCode } from "cross-framework";

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

Supported Features

React Features

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

Hooks to Vue Equivalents

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

JSX to Vue Template

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

These are all transformed into Vue 3 template syntax:

• className is converted to class or :class
• Converts JSX to template IR and then outputs Vue syntax

Current Limitations

As with any early-stage compiler, there are some caveats:

• Imports remain as they are
• Multi-component files may require manual tweaks
• Design-system-heavy props might need optimization

Get Started

Playground

Experiment with the compiler in the playground.

Documentation

Find detailed guidance in the documentation.

Future Vision

This is just the beginning. Future enhancements include:

• Supporting additional frameworks like Angular and Svelte
• Enabling conversion of entire projects
• Developing a universal transformation pipeline for frontend code

Imagine a world where you can write code once and deploy it anywhere, from React to Vue and beyond.

Support and Collaboration

If this project aligns with your vision and you'd like to support its growth, consider sponsoring it on GitHub.

For those interested in contributing to this ambitious initiative, reach out to join the team and help shape the future of frontend development.

In a world where we've spent years choosing frameworks, maybe it's time to transcend those choices and seamlessly integrate them.

#webdevelopment #frontend #reactjs #vuejs #javascript #typescript #opensource