{"id":12608,"library":"vue-to-react","title":"Vue to React Component Transformer CLI","description":"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.","status":"abandoned","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/dwqs/vue-to-react","tags":["javascript","react","vue","transformation","vue-to-react"],"install":[{"cmd":"npm install vue-to-react","lang":"bash","label":"npm"},{"cmd":"yarn add vue-to-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-to-react","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The tool is designed for global installation to make the `vtr` command available system-wide. Local installation typically does not expose the command directly.","wrong":"npm install vue-to-react","symbol":"vtr","correct":"npm install -g vue-to-react"},{"note":"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`).","wrong":"import { MyVueComponent } from 'vue-to-react';","symbol":"vtr (JSX Transformation)","correct":"vtr -i path/to/MyVueComponent.js -o output/directory -n ReactJsxComponent"},{"note":"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.","wrong":"node_modules/.bin/vtr path/to/MyVueComponent.vue","symbol":"vtr (SFC Transformation)","correct":"vtr -i path/to/MyVueComponent.vue -o output/directory -n ReactSfcComponent"}],"quickstart":{"code":"// Example Vue SFC (input.vue) for transformation\n// \n// \n// \n\n// To run the transformation:\n// 1. Save the above Vue component content as `input.vue` in your project root.\n// 2. Install the tool globally:\n// npm install -g vue-to-react\n// 3. Run the transformation command:\n// vtr -i input.vue -o ./output -n ReactComponent\n//\n// This will create 'output/ReactComponent.js' which is the transformed React component.","lang":"javascript","description":"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."},"warnings":[{"fix":"Refactor Vue components to use a computed property that returns the desired class string, then bind `v-bind:class=\"computedClasses\"`.","message":"Direct object or array syntax for `v-bind:class` is not supported for transformation. The CLI cannot automatically convert these dynamic class bindings.","severity":"gotcha","affected_versions":"<=1.0.0"},{"fix":"Refactor Vue components to use a computed property that returns the desired style object, then bind `v-bind:style=\"computedStyle\"`.","message":"Direct object or array syntax for `v-bind:style` is not supported for transformation. Complex inline style bindings will not be converted.","severity":"gotcha","affected_versions":"<=1.0.0"},{"fix":"Manually rewrite `watch` logic in the transformed React component, typically using `componentDidUpdate` lifecycle method or `useEffect` hooks in functional components.","message":"The `watch` property of Vue components is not translated to React equivalents. Any reactive `watch` logic will be lost during transformation.","severity":"breaking","affected_versions":"<=1.0.0"},{"fix":"For Vue JSX components, ensure all sub-components are globally available or manually integrate them into the resulting React component after transformation.","message":"The `components` property for defining local components is not supported when transforming Vue JSX components. This limitation applies only to JSX, not SFCs.","severity":"gotcha","affected_versions":"<=1.0.0"},{"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.","message":"Only 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`.","severity":"gotcha","affected_versions":"<=1.0.0"},{"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\"`).","message":"Vue `v-bind` shorthand (`:prop=\"value\"`) and `v-on` shorthand (`@event=\"handler\"`) are not supported for SFC transformation. They will not be converted correctly.","severity":"breaking","affected_versions":"<=1.0.0"},{"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.","message":"Custom directives and filter expressions in Vue Single File Components are not transformed. Their functionality will be entirely absent in the generated React component.","severity":"breaking","affected_versions":"<=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `vue-to-react` package was not installed globally, or its executable path is not included in the system's PATH environment variable.","error":"vtr: command not found"},{"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.","cause":"The input path specified with the `-i` (or `--input`) option does not point to an existing Vue component file or directory.","error":"Error: ENOENT: no such file or directory, stat 'my/vue/component'"},{"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.","cause":"The original Vue component likely utilized features or syntax patterns not supported by `vue-to-react`, leading to incomplete or erroneous transformation.","error":"Transformed React component has incorrect or missing logic."}],"ecosystem":"npm"}