Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-to-react
Turn a Vue component into a React component.
https://github.com/egoist/vue-to-react
Last synced: about 15 hours ago
JSON representation
Turn a Vue component into a React component.
- Host: GitHub
- URL: https://github.com/egoist/vue-to-react
- Owner: egoist
- License: mit
- Created: 2019-07-06T13:22:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-30T20:30:20.000Z (about 2 years ago)
- Last Synced: 2024-10-30T06:58:02.462Z (14 days ago)
- Language: TypeScript
- Homepage:
- Size: 34.2 KB
- Stars: 200
- Watchers: 2
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-to-react
[](https://npmjs.com/package/@egoist/vue-to-react) [](https://npmjs.com/package/@egoist/vue-to-react) [](https://circleci.com/gh/egoist/vue-to-react/tree/master) [](https://github.com/sponsors/egoist)
This works for both Vue 2 and Vue 3.
## Install
```bash
yarn add @egoist/vue-to-react
```
## Usage
```js
import React from 'react'
import { render } from 'react-dom'
import toReact from '@egoist/vue-to-react'
const VueComponent = {
data() {
return {
count: 0
}
},
render(h) {
return h(
'button',
{
on: {
click: () => this.count++
}
},
[this.count]
)
}
}
const ReactComponent = toReact(VueComponent)
render(, document.getElementById('app'))
```
### Passing Props
By default we pass all props from React to Vue:
```js
const Counter = toReact({
props: ['initialCount'],
render(h) {
return h('button', {}, [this.initialCount])
}
})
const App =
```
However you can customize how the props are passed to Vue with the `passProps` option:
```js
toReact(VueComponent, {
// Only pass `initialCount` prop
passProps: props => ({ initialCount: props.initialCount }),
// Or disable props
passProps: false
})
```
## 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
## Author
**@egoist/vue-to-react** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-to-react/contributors)).
> [github.com/egoist](https://github.com/egoist) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)