{"id":13671205,"url":"https://github.com/dwqs/vue-to-react","last_synced_at":"2025-09-30T05:30:59.172Z","repository":{"id":40685968,"uuid":"133839968","full_name":"dwqs/vue-to-react","owner":"dwqs","description":"🛠️ :point_right: Try to transform Vue component to React component","archived":false,"fork":false,"pushed_at":"2018-05-28T04:14:25.000Z","size":83,"stargazers_count":440,"open_issues_count":9,"forks_count":67,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-01-12T21:05:10.893Z","etag":null,"topics":["components","react","reactjs","transform","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwqs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-17T16:21:48.000Z","updated_at":"2024-12-12T11:42:09.000Z","dependencies_parsed_at":"2022-07-10T14:32:22.157Z","dependency_job_id":null,"html_url":"https://github.com/dwqs/vue-to-react","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-to-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-to-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-to-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-to-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/vue-to-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234705918,"owners_count":18874428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","react","reactjs","transform","vuejs"],"created_at":"2024-08-02T09:01:02.713Z","updated_at":"2025-09-30T05:30:53.908Z","avatar_url":"https://github.com/dwqs.png","language":"JavaScript","readme":"![npm-version](https://img.shields.io/npm/v/vue-to-react.svg) ![license](https://img.shields.io/github/license/dwqs/vue-to-react.svg) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)\n\n## vue-to-react\n🛠️ 👉 Try to transform Vue component(support [JSX](https://github.com/vuejs/babel-plugin-transform-vue-jsx) and [SFC](https://vuejs.org/v2/guide/single-file-components.html)) to React component.\n\u003e Since v0.0.8 support SFC\n\n## Preview screenshots\n**Transform JSX Component:**\n\n![jsx](https://user-images.githubusercontent.com/7871813/40406386-0bfc0396-5e93-11e8-9f74-7a45d2694ae9.png)\n\n**Transform SFC Component:**\n\n![sfc](https://user-images.githubusercontent.com/7871813/40526210-9afc8112-6017-11e8-8266-c0b7920281e2.png)\n\n### Install\nPrerequisites: [Node.js](https://nodejs.org/en/) (\u003e=8.0) and [NPM](https://www.npmjs.com/) (\u003e=5.0)\n\n```js\n$ npm install vue-to-react -g\n```\n\n### Usage\n```sh\nUsage: vtr [options]\n\nOptions:\n\n  -V, --version     output the version number\n  -i, --input       the input path for vue component\n  -o, --output      the output path for react component, which default value is process.cwd()\n  -n, --name        the output file name, which default value is \"react.js\"\n  -h, --help        output usage information\n\n```\n\nExamples:\n\n```sh\n$ vtr -i my/vue/component\n```\n\nThe above code will transform `my/vue/component.js` to `${process.cwd()}/react.js`.\n\n```sh\n$ vtr -i my/vue/component -o my/vue -n test\n```\n\nThe above code will transform `my/vue/component.js` to `my/vue/test.js`.\n\nHere is a [demo](https://github.com/dwqs/vue-to-react/tree/master/demo).\n\n## Attention\nThe following list you should be pay attention when you are using vue-to-react to transform a vue component to react component:\n\n* Not support [class object syntax binding](https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax) and [class array syntax binding](https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax)\n\n```js\n// Not support \n\u003cdiv v-bind:class=\"{ active: isActive }\"\u003e\u003c/div\u003e\n\u003cdiv v-bind:class=\"[activeClass, errorClass]\"\u003e\u003c/div\u003e\n\n// support\n\u003cdiv v-bind:class=\"classes\"\u003e\u003c/div\u003e\ncomputed: {\n    classes () {\n        // ...\n        return your-classes;\n    }\n}\n\n// ...\n\n// react component\n// ...\n\nrender () {\n    const classes = your-classes;\n    return (\n        \u003cdiv class={classes}\u003e\u003c/div\u003e \n    )\n}\n\n```\n\n* Not support [style object syntax binding](https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1) and [style array syntax binding](https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax-1)\n\n```js\n// Not support \n\u003cdiv v-bind:style=\"{ color: activeColor, fontSize: fontSize + 'px' }\"\u003e\u003c/div\u003e\n\u003cdiv v-bind:style=\"[baseStyles, overridingStyles]\"\u003e\u003c/div\u003e\n\n// support\n\u003cdiv v-bind:style=\"style\"\u003e\u003c/div\u003e\ncomputed: {\n    style () {\n        return {\n            activeColor: 'red',\n            fontSize: 30\n        }\n    }\n}\n\n// ...\n\n// react component\n// ...\n\nrender () {\n    const style = {\n      activeColor: 'red',\n      fontSize: 30\n    };\n    return (\n        \u003cdiv style={style}\u003e\u003c/div\u003e \n    )\n}\n\n```\n\n* Not support `watch` prop of vue component\n* Not support `components` prop of vue component if you are transforming a JSX component. See [component tip](https://github.com/vuejs/babel-plugin-transform-vue-jsx#component-tip). But support `components` prop when you are transforming SFC.\n* Only supports partial built-in Vue directives(SFC): `v-if`, `v-else`, `v-show`, `v-for`, `v-bind`, `v-on`, `v-text` and `v-html`.\n* Not support v-bind shorthand and v-on shorthand(SFC):\n\n```js\n// Not support\n\u003cdiv :msg=\"msg\" @click=\"clickHandler\"\u003e\u003c/div\u003e\n\n// Support\n\u003cdiv v-bind:msg=\"msg\" v-on:click=\"clickHandler\"\u003e\u003c/div\u003e\n```\n\n* Not support custom directives and filter expression(SFC).\n* Only supports partial lift-cycle methods of vue component. Lift-cycle relations mapping as follows: \n\n```js\n// Life-cycle methods relations mapping\nconst cycle = {\n    'created': 'componentWillMount',\n    'mounted': 'componentDidMount',\n    'updated': 'componentDidUpdate',\n    'beforeDestroy': 'componentWillUnmount',\n    'errorCaptured': 'componentDidCatch',\n    'render': 'render'\n};\n```\n\n* Each computed prop should be a function: \n\n```js\n// ...\n\ncomputed: {\n    // support\n    test () {\n        return your-computed-value;\n    },\n\n    // not support\n    test2: {\n        get () {},\n        set () {}\n    }\n}\n\n// ...\n```\n\n* Computed prop of vue component will be put into the render method of react component:\n\n```js\n// vue component\n// ...\n\ncomputed: {\n    // support\n    test () {\n        this.title = 'messages'; // Don't do this, it won't be handle and you will receive a warning.\n        return this.title + this.msg;\n    }\n}\n\n// ...\n\n// react component\n// ...\n\nrender () {\n    const test = this.state.title + this.state.msg;\n}\n\n// ...\n```\n\n## Development\n1. Fork it\n2. Create your feature branch (git checkout -b my-new-feature)\n3. Commit your changes (git commit -am 'Add some feature')\n4. Push to the branch (git push origin my-new-feature)\n5. Create new Pull Request\n\n## LICENSE\nThis repo is released under the [MIT](http://opensource.org/licenses/MIT).","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fvue-to-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Fvue-to-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fvue-to-react/lists"}