vue-to-react

library1.0.0jsnpmunverified

The `vue-to-react` package is a command-line interface (CLI) tool designed to transform Vue components, including both JSX and Single File Components (SFCs), into React components. It aims to assist developers in migrating existing Vue.js codebases to React by automating the conversion of component structure and partial logic. The package reached its 1.0.0 version but development appears to have ceased around 2018, indicating an abandoned status rather than active development. Key differentiators included its attempt to support both Vue JSX and SFCs, and its mapping of a limited set of Vue lifecycle methods to their React equivalents. However, it has significant limitations, explicitly stating it does not support advanced Vue features like object/array syntax for class/style bindings, `watch` or `components` props for JSX components, custom directives, filter expressions, and certain `v-bind`/`v-on` shorthands. Its utility is thus restricted to very simple component structures.

devops

npm install vue-to-react

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TO-REACT

vue-to-react

devopsjavascriptv1.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vtr

✓ npm install -g vue-to-react

✗ npm install vue-to-react

The tool is designed for global installation to make the `vtr` command available system-wide. Local installation typically does not expose the command directly.

vtr (JSX Transformation)

✓ vtr -i path/to/MyVueComponent.js -o output/directory -n ReactJsxComponent

✗ import { MyVueComponent } from 'vue-to-react';

This is a CLI tool; do not attempt to `import` or `require` it as a module. It transforms Vue JSX files, requiring input (`-i`), output directory (`-o`), and an optional output name (`-n`).

vtr (SFC Transformation)

✓ vtr -i path/to/MyVueComponent.vue -o output/directory -n ReactSfcComponent

✗ node_modules/.bin/vtr path/to/MyVueComponent.vue

Supports `.vue` Single File Components. While the `node_modules/.bin` path might work for local installs, global installation is the intended use. Remember to specify the output name for clarity.

Demonstrates the global installation of the `vue-to-react` CLI tool and how to use it to transform a basic Vue Single File Component (`.vue` file) into a React component, specifying input, output directory, and file name.

// Example Vue SFC (input.vue) for transformation // <template> // <div v-if="isVisible" v-bind:class="classes" v-on:click="handleClick"> // Hello, {{ name }}! // <p v-text="message"></p> // </div> // </template> // <script> // export default { // props: ['name'], // data() { // return { // message: 'Welcome to Vue.', // isActive: true, // hasError: false // }; // }, // computed: { // classes() { // return { active: this.isActive, 'text-danger': this.hasError }; // }, // isVisible() { // return this.name === 'World'; // } // }, // methods: { // handleClick() { // console.log('Clicked!'); // } // }, // mounted() { // console.log('Vue component mounted.'); // } // } // </script> // <style scoped> // .active { color: blue; } // .text-danger { color: red; } // </style> // To run the transformation: // 1. Save the above Vue component content as `input.vue` in your project root. // 2. Install the tool globally: // npm install -g vue-to-react // 3. Run the transformation command: // vtr -i input.vue -o ./output -n ReactComponent // // This will create 'output/ReactComponent.js' which is the transformed React component.

vue-to-react --version

Debug

Known issues

gotchaDirect object or array syntax for `v-bind:class` is not supported for transformation. The CLI cannot automatically convert these dynamic class bindings.

fix

Refactor Vue components to use a computed property that returns the desired class string, then bind `v-bind:class="computedClasses"`.

affects: <=1.0.0

gotchaDirect object or array syntax for `v-bind:style` is not supported for transformation. Complex inline style bindings will not be converted.

fix

Refactor Vue components to use a computed property that returns the desired style object, then bind `v-bind:style="computedStyle"`.

affects: <=1.0.0

breakingThe `watch` property of Vue components is not translated to React equivalents. Any reactive `watch` logic will be lost during transformation.

fix

Manually rewrite `watch` logic in the transformed React component, typically using `componentDidUpdate` lifecycle method or `useEffect` hooks in functional components.

affects: <=1.0.0

gotchaThe `components` property for defining local components is not supported when transforming Vue JSX components. This limitation applies only to JSX, not SFCs.

fix

For Vue JSX components, ensure all sub-components are globally available or manually integrate them into the resulting React component after transformation.

affects: <=1.0.0

gotchaOnly a partial set of built-in Vue directives are supported when transforming Single File Components (SFCs). Supported directives include `v-if`, `v-else`, `v-show`, `v-for`, `v-bind`, `v-on`, `v-text`, and `v-html`.

fix

Avoid using unsupported directives or manually refactor the associated logic in the resulting React component. Check the documentation for the complete list of supported directives.

affects: <=1.0.0

breakingVue `v-bind` shorthand (`:prop="value"`) and `v-on` shorthand (`@event="handler"`) are not supported for SFC transformation. They will not be converted correctly.

fix

Use the full `v-bind:` and `v-on:` syntax in Vue Single File Components before running the transformation (e.g., `v-bind:prop="value"` and `v-on:event="handler"`).

affects: <=1.0.0

breakingCustom directives and filter expressions in Vue Single File Components are not transformed. Their functionality will be entirely absent in the generated React component.

fix

Remove custom directives and filter expressions from Vue components before transformation, or manually implement their equivalent logic in the resulting React component after conversion.

affects: <=1.0.0

Errors

Common errors & fixes

vtr: command not found

The `vue-to-react` package was not installed globally, or its executable path is not included in the system's PATH environment variable.

fix

Ensure the package is installed globally by running `npm install -g vue-to-react`. If the issue persists, check your `npm root -g` path and verify it's added to your system's PATH.

Error: ENOENT: no such file or directory, stat 'my/vue/component'

The input path specified with the `-i` (or `--input`) option does not point to an existing Vue component file or directory.

fix

Verify that the `--input` (`-i`) path is correct and points to an accessible Vue component file (e.g., `my/vue/component.vue` or `my/vue/component.js`). Ensure file extensions are included.

Transformed React component has incorrect or missing logic.

The original Vue component likely utilized features or syntax patterns not supported by `vue-to-react`, leading to incomplete or erroneous transformation.

fix

Refer to the 'Attention' section within the `vue-to-react` documentation to identify unsupported Vue features (e.g., complex class/style bindings, watch properties, specific directives). Refactor your Vue component to use only supported features before attempting transformation.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dwqs/vue-to-react ↗

packagehttps://www.npmjs.com/package/vue-to-react ↗