vueact / Babel Plugin Transform React To Vue
Licence: mit
Transform React component to Vue component (beta)
Stars: ✭ 157
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Babel Plugin Transform React To Vue
S2s
Coding time Compile. A tool to write code fastest.
Stars: ✭ 254 (+61.78%)
Mutual labels: babel, plugin
Babel Plugin Partial Application
[DEPRECATED] Please use https://github.com/citycide/param.macro
Stars: ✭ 60 (-61.78%)
Mutual labels: babel, plugin
Rollup Plugin Ts
A Typescript Rollup plugin that bundles declarations and respects Browserslists
Stars: ✭ 273 (+73.89%)
Mutual labels: babel, plugin
Slinky
A light-weight, responsive, mobile-like navigation menu plugin
Stars: ✭ 649 (+313.38%)
Mutual labels: babel, plugin
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+775.16%)
Mutual labels: babel, plugin
Babel Plugin Webpack Alias
babel 6 plugin which allows to use webpack resolve options
Stars: ✭ 151 (-3.82%)
Mutual labels: babel
Webpack Fast Refresh
React Fast Refresh plugin and loader for webpack
Stars: ✭ 155 (-1.27%)
Mutual labels: plugin
Lighthouse Badges
🚦Generate badges (shields.io) based on Lighthouse performance.
Stars: ✭ 150 (-4.46%)
Mutual labels: babel
Babel Plugin Flow To Typescript
Babel plugin to convert Flow code into TypeScript
Stars: ✭ 156 (-0.64%)
Mutual labels: babel
Babel Plugin Lodash
Modular Lodash builds without the hassle.
Stars: ✭ 1,903 (+1112.1%)
Mutual labels: babel
Advanced Achievements
🎆 Popular plugin that adds unique and challenging achievements to Minecraft servers.
Stars: ✭ 151 (-3.82%)
Mutual labels: plugin
Webpack Encore
A simple but powerful API for processing & compiling assets built around Webpack
Stars: ✭ 1,975 (+1157.96%)
Mutual labels: babel
Css Modal
A modal built with pure CSS, enhanced with JavaScript
Stars: ✭ 1,829 (+1064.97%)
Mutual labels: plugin
Filepicker Plugin For Xamarin And Windows
FilePicker Plugin for Xamarin and Windows
Stars: ✭ 151 (-3.82%)
Mutual labels: plugin
Negroni Authz
negroni-authz is an authorization middleware for Negroni
Stars: ✭ 152 (-3.18%)
Mutual labels: plugin
Vue Cli Plugin Prerender Spa
Boost SEO by prerendering your Vue application. Powered by prerender-spa-plugin.
Stars: ✭ 156 (-0.64%)
Mutual labels: plugin
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 withbabel-plugin-syntax-class-properties
, orbabel-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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Team
EGOIST | Nick Messing |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].