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: about 1 month 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-07T23:35:11.000Z (over 7 years ago)
• Last Synced: 2024-12-17T19:11:12.629Z (about 1 month ago)
• Topics: babel, plugin, react, vue
• Language: JavaScript
• Homepage: https://babel-plugin-transform-react-to-vue.netlify.com
• Size: 137 KB
• Stars: 164
• Watchers: 11
• Forks: 18
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-transform-react-to-vue

[![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&style=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)

## 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

[![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)

---|---

[EGOIST](http://github.com/egoist) | [Nick Messing](https://github.com/nickmessing)