https://github.com/vueact/babel-plugin-transform-react-to-vue
Transform React component to Vue component (beta)
https://github.com/vueact/babel-plugin-transform-react-to-vue
babel plugin react vue
Last synced: 11 months ago
JSON representation
Transform React component to Vue component (beta)
- Host: GitHub
- URL: https://github.com/vueact/babel-plugin-transform-react-to-vue
- Owner: vueact
- License: mit
- Created: 2017-07-23T04:02:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-07T23:35:11.000Z (almost 9 years ago)
- Last Synced: 2025-06-13T09:58:41.266Z (about 1 year ago)
- Topics: babel, plugin, react, vue
- Language: JavaScript
- Homepage: https://babel-plugin-transform-react-to-vue.netlify.com
- Size: 137 KB
- Stars: 165
- Watchers: 10
- Forks: 18
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-transform-react-to-vue
[](https://npmjs.com/package/babel-plugin-transform-react-to-vue) [](https://npmjs.com/package/babel-plugin-transform-react-to-vue) [](https://circleci.com/gh/vueact/babel-plugin-transform-react-to-vue/tree/master) [](https://github.com/egoist/donate) [](https://codecov.io/gh/vueact/babel-plugin-transform-react-to-vue)
## Install
```bash
yarn add babel-plugin-transform-react-to-vue --dev
```
## Usage
```js
{
"plugins": ["transform-react-to-vue"]
}
```
> **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.
Input:
```js
import ReactDOM from 'react-dom'
import React, { Component } from 'react'
class App extends Component {
state = {
hello: 'world'
}
myMethod = () => {
this.setState({ hello: 'not world ;)' })
}
render() {
return (
Hello {this.state.hello}
To get started, edit src/App.js and save to reload.
)
}
componentDidMount = () => console.log(this.state)
}
ReactDOM.render(, document.getElementById('root'))
```
Output:
```js
import Vue from 'vue'
const App = {
data: () => ({
hello: 'world'
}),
render() {
return (
Hello {this.$data.hello}
To get started, edit src/App.js and save to reload.
)
},
mounted() {
return console.log(this.$data)
},
methods: {
myMethod() {
this.hello = 'not world ;)'
}
}
}
new Vue({
el: document.getElementById('root'),
render() {
return
}
})
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Team
[](https://github.com/egoist) | [](https://github.com/nickmessing)
---|---
[EGOIST](http://github.com/egoist) | [Nick Messing](https://github.com/nickmessing)