Vue to React Component Transformer CLI

Common errors

• vtr: command not found

  cause 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'

  cause 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.

  cause 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.

Warnings

• gotcha Direct 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"`.
• gotcha Direct 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"`.
• breaking The `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.
• gotcha The `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.
• gotcha 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`.
  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.
• breaking Vue `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"`).
• breaking Custom 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.

Install

• npm install vue-to-react npm
• yarn add vue-to-react yarn
• pnpm add vue-to-react pnpm

Imports

• vtr
  wrong:

  npm install vue-to-react

  correct:

  npm install -g 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)
  wrong:

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

  correct:

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

  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)
  wrong:

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

  correct:

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

  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.

Quickstart

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.