Transform React component to Vue component (beta)
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
test
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
circle.yml
index.js
package.json
yarn.lock

README.md

babel-plugin-transform-react-to-vue

NPM version NPM downloads CircleCI donate codecov

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

Team

EGOIST Nick Messing
EGOIST Nick Messing