Transform React component to Vue component (beta)

babel-plugin-transform-react-to-vue

Install

yarn add babel-plugin-transform-react-to-vue --dev

Usage

{
  "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:

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 (
      <div className="App">
        <div className="App-header" onClick={this.myMethod}>
          <h2>
            Hello {this.state.hello}
          </h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
  componentDidMount = () => console.log(this.state)
}

ReactDOM.render(<App />, document.getElementById('root'))

Output:

import Vue from 'vue'

const App = {
  data: () => ({
    hello: 'world'
  }),

  render() {
    return (
      <div class="App">
        <div class="App-header" onClick={this.myMethod}>
          <h2>
            Hello {this.$data.hello}
          </h2>
        </div>
        <p class="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  },

  mounted() {
    return console.log(this.$data)
  },

  methods: {
    myMethod() {
      this.hello = 'not world ;)'
    }
  }
}

new Vue({
  el: document.getElementById('root'),

  render() {
    return <App />
  }
})

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

Download Details:

Author: vueact

Live Demo: https://babel-plugin-transform-react-to-vue.netlify.com/

GitHub: https://github.com/vueact/babel-plugin-transform-react-to-vue

#vuejs #javascript #vue-js #react