This is a Work in Progress

To demonstrate how to use React components inside your Vue application we will be using some components from the Ant Design UI Framework.

Install the plugin

First of all, import and install the plugin:

import VueReact from 'vue-react';
Vue.use(VueReact);

require('../node_modules/antd/dist/antd.min.css');

Button

You can set attributes, events and the inner HTML in this simple button. See Button Component

// app.js
import { Button } from 'antd';
Vue.react('Button', Button);

<!-- App.vue -->
<template>
    <!-- ... -->
    <Button type="danger" size="large" @click="buttonClicked">I am a React Button</Button>
    <!-- ... -->
</template>

<script>
export default {
    methods: {
        buttonClicked() {
            alert("Button Clicked");
        }
    }
};
</script>

PRO Tip: All events names will be changed to React pattern (onEvent). Both @click and @onClick will be registered as onClick.