https://github.com/akashgoswami/vue-reactflow
An experiment to render a React component inside a Vue.js application.
https://github.com/akashgoswami/vue-reactflow
flowchart flowgraph graph react reactflow reactinvue reactjs vue vuejs
Last synced: 5 months ago
JSON representation
An experiment to render a React component inside a Vue.js application.
- Host: GitHub
- URL: https://github.com/akashgoswami/vue-reactflow
- Owner: akashgoswami
- Created: 2021-07-25T19:58:07.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-25T21:07:43.000Z (over 4 years ago)
- Last Synced: 2025-08-10T10:34:24.690Z (7 months ago)
- Topics: flowchart, flowgraph, graph, react, reactflow, reactinvue, reactjs, vue, vuejs
- Language: JavaScript
- Homepage: https://akashgoswami.github.io/vue-reactflow/dist/index.html
- Size: 738 KB
- Stars: 23
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-reactflow
This a demo project to showcase a React component [React Flow](https://reactflow.dev/) using [Vuera](https://github.com/akxcv/vuera) inside the Vue.js application.
Using React inside Vue is definitely an anti-pattern, however sometimes it may be required to use it.
[Live Demo](https://akashgoswami.github.io/vue-reactflow/dist/index.html)
In this case I tried putting together a child React class component inside a Vue application. Unfortunately, the property and event propogation between react child and Vue parent is not pretty seemless. I tried putting together a small event bus to make it smooth.
# Important
This is a proof of concept experiment, do not use in production without properly understanding the implication.
Any suggestions to improve the integration or streamline the codebase are more than welcome.
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).