Skip to content
Run Vue in React and React Native
Branch: dev
Clone or download
Pull request Compare This branch is 23 commits ahead, 1095 commits behind vuejs:dev.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.vscode first commit Jun 5, 2017
benchmarks fix style (vuejs#5383) Apr 6, 2017
build
compile add react vue native support Jun 22, 2017
dist first commit Jun 5, 2017
examples pin todomvc css version Mar 24, 2017
flow
packages fix: resolve slot kebab-case props to camelCased props Jun 24, 2018
src fix: resolve slot kebab-case props to camelCased props Jun 24, 2018
test
types
.babelrc
.eslintignore
.eslintrc first commit Jun 5, 2017
.flowconfig
.gitignore
BACKERS.md update sponsors Apr 18, 2017
LICENSE
README.md Update README.md Jun 22, 2017
circle.yml bump circle node version Aug 28, 2016
package.json first commit Jun 5, 2017
react-vue.js fix: transition component enter/leave/etc callbacks aren't receiving … Aug 27, 2017
vue.js first commit Jun 5, 2017
yarn.lock

README.md

React-Vue

React-Vue is designed to connect React and Vue. Which help you run Vue in React.

There are three uses.

Reactivity System

Thanks to Vue's clear hierarchical design, we can easily pull out the reactivity system (9 KB gzipped), and drive React component rendering.

npm install --save react-vue
import React, { Component } from 'react';
import Vue, { observer } from 'react-vue';

const store = new Vue({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increase () {
      this.count ++;
    }
  }
});

@observer
export default class Demo extends Component {
  render () {
    return <h1 onClick={store.increase}>{store.count}</h1>;
  }
}

document

Vue Component

Introduce react-vue-loader, which compile the Vue component into a React component. As you might think, your previously written Vue components can run inside the React component, and your React components can also run inside the Vue component.

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-loader
// One.js
import React, { Component } from 'react';
import Two from './Two';

export default class One extends Component {
  render() {
    return <Two>Hello Vue</Two>;
  }
}
<!-- Two.vue -->
<template>
  <div @click="count++">
    <three>{{count}}</three>
    <slot></slot>
  </div>
</template>

<script>
  import Three from './Three'
  export default {
    components: { Three },
    data () {
      return {
        count: 0
      }
    }
  }
</script>
// Three.js
import React, { Component } from 'react';

export default class Three extends Component {
  render () {
    return <span>{this.props.children}</span>
  }
}

document

Native

Introduce react-vue-native-scripts, which start a server to compile the vue component into a react component.

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-native-scripts

All React Native Components exists as built-in components in Vue, you can use react native components as following

<template>
  <view>
    <view>
      <text>Hello react vue</text>
    </view>
    <animated:view>
      <text>Hello animation</text>
    </animated:view>
  </view>
</template>

The similar JSX code is as follows

import React, { Component } from 'react';
import { View, Text, Animated } from 'react-native';

export default class Demo extends Component {
  render() {
    return (
      <View>
        <View>
          <Text>Hello react native</Text>
        </View>
        <Animated.View>
          <Text>Hello animation</Text>
        </Animated.View>
      </View>
    );
  }
}

You can use all the React Native API in Vue component. The camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents

document

License

MIT

You can’t perform that action at this time.