{"id":13715609,"url":"https://github.com/vueact/babel-plugin-transform-react-to-vue","last_synced_at":"2025-07-29T01:04:47.872Z","repository":{"id":57188949,"uuid":"98073515","full_name":"vueact/babel-plugin-transform-react-to-vue","owner":"vueact","description":"Transform React component to Vue component (beta)","archived":false,"fork":false,"pushed_at":"2017-09-07T23:35:11.000Z","size":140,"stargazers_count":165,"open_issues_count":9,"forks_count":18,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-13T09:58:41.266Z","etag":null,"topics":["babel","plugin","react","vue"],"latest_commit_sha":null,"homepage":"https://babel-plugin-transform-react-to-vue.netlify.com","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/vueact.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":"2017-07-23T04:02:41.000Z","updated_at":"2025-03-22T10:56:09.000Z","dependencies_parsed_at":"2022-08-28T11:11:26.739Z","dependency_job_id":null,"html_url":"https://github.com/vueact/babel-plugin-transform-react-to-vue","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/vueact/babel-plugin-transform-react-to-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueact%2Fbabel-plugin-transform-react-to-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueact%2Fbabel-plugin-transform-react-to-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueact%2Fbabel-plugin-transform-react-to-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueact%2Fbabel-plugin-transform-react-to-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueact","download_url":"https://codeload.github.com/vueact/babel-plugin-transform-react-to-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueact%2Fbabel-plugin-transform-react-to-vue/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265315224,"owners_count":23745435,"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":["babel","plugin","react","vue"],"created_at":"2024-08-03T00:01:01.047Z","updated_at":"2025-07-29T01:04:47.844Z","avatar_url":"https://github.com/vueact.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# babel-plugin-transform-react-to-vue\n\n[![NPM version](https://img.shields.io/npm/v/babel-plugin-transform-react-to-vue.svg?style=flat)](https://npmjs.com/package/babel-plugin-transform-react-to-vue) [![NPM downloads](https://img.shields.io/npm/dm/babel-plugin-transform-react-to-vue.svg?style=flat)](https://npmjs.com/package/babel-plugin-transform-react-to-vue) [![CircleCI](https://circleci.com/gh/vueact/babel-plugin-transform-react-to-vue/tree/master.svg?style=shield)](https://circleci.com/gh/vueact/babel-plugin-transform-react-to-vue/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026style=flat)](https://github.com/egoist/donate) [![codecov](https://codecov.io/gh/vueact/babel-plugin-transform-react-to-vue/branch/master/graph/badge.svg)](https://codecov.io/gh/vueact/babel-plugin-transform-react-to-vue)\n\n## Install\n\n```bash\nyarn add babel-plugin-transform-react-to-vue --dev\n```\n\n## Usage\n\n```js\n{\n  \"plugins\": [\"transform-react-to-vue\"]\n}\n```\n\n\u003e **NOTE**: If you want it to work with experimental ECMAScript feature like `class-properties`, please use the plugin with `babel-plugin-syntax-class-properties`, or `babel-plugin-transform-class-properties` if you want to transpile it.\n\nInput:\n\n```js\nimport ReactDOM from 'react-dom'\nimport React, { Component } from 'react'\n\nclass App extends Component {\n  state = {\n    hello: 'world'\n  }\n  myMethod = () =\u003e {\n    this.setState({ hello: 'not world ;)' })\n  }\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cdiv className=\"App-header\" onClick={this.myMethod}\u003e\n          \u003ch2\u003e\n            Hello {this.state.hello}\n          \u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cp className=\"App-intro\"\u003e\n          To get started, edit \u003ccode\u003esrc/App.js\u003c/code\u003e and save to reload.\n        \u003c/p\u003e\n      \u003c/div\u003e\n    )\n  }\n  componentDidMount = () =\u003e console.log(this.state)\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'))\n```\n\nOutput:\n\n```js\nimport Vue from 'vue'\n\nconst App = {\n  data: () =\u003e ({\n    hello: 'world'\n  }),\n\n  render() {\n    return (\n      \u003cdiv class=\"App\"\u003e\n        \u003cdiv class=\"App-header\" onClick={this.myMethod}\u003e\n          \u003ch2\u003e\n            Hello {this.$data.hello}\n          \u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cp class=\"App-intro\"\u003e\n          To get started, edit \u003ccode\u003esrc/App.js\u003c/code\u003e and save to reload.\n        \u003c/p\u003e\n      \u003c/div\u003e\n    )\n  },\n\n  mounted() {\n    return console.log(this.$data)\n  },\n\n  methods: {\n    myMethod() {\n      this.hello = 'not world ;)'\n    }\n  }\n}\n\nnew Vue({\n  el: document.getElementById('root'),\n\n  render() {\n    return \u003cApp /\u003e\n  }\n})\n```\n\n## Contributing\n\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. Submit a pull request :D\n\n\n## Team\n\n[![EGOIST](https://github.com/egoist.png?size=100)](https://github.com/egoist) | [![Nick Messing](https://github.com/nickmessing.png?size=100)](https://github.com/nickmessing)\n---|---\n[EGOIST](http://github.com/egoist) | [Nick Messing](https://github.com/nickmessing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueact%2Fbabel-plugin-transform-react-to-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueact%2Fbabel-plugin-transform-react-to-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueact%2Fbabel-plugin-transform-react-to-vue/lists"}