Skip to content
Turn a Vue component into a React component.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo feat: init Jul 6, 2019
.prettierrc feat: init Jul 6, 2019
LICENSE feat: init Jul 6, 2019 docs: fix readme Jul 7, 2019
yarn.lock feat: init Jul 6, 2019


NPM version NPM downloads CircleCI donate chat


yarn add @egoist/vue-to-react


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(
        on: {
          click: () => this.count++

const ReactComponent = toReact(VueComponent)

render(<ReactComponent />, document.getElementById('app'))

Passing Props

By default we pass all props from React to Vue:

const Counter = toReact({
  props: ['initialCount'],
  render(h) {
    return h('button', {}, [this.initialCount])

const App = <Counter initialCount={0} />

However you can customize how the props are passed to Vue with the passProps option:

toReact(VueComponent, {
  // Only pass `initialCount` prop
  passProps: props => ({ initialCount: props.initialCount }),
  // Or disable props
  passProps: false


  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


@egoist/vue-to-react © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list). · GitHub @EGOIST · Twitter @_egoistlily

You can’t perform that action at this time.