{"id":26022161,"url":"https://github.com/akashgoswami/vue-reactflow","last_synced_at":"2025-10-14T13:33:07.187Z","repository":{"id":80966249,"uuid":"389430632","full_name":"akashgoswami/vue-reactflow","owner":"akashgoswami","description":"An experiment to render a React component inside a Vue.js application.","archived":false,"fork":false,"pushed_at":"2021-07-25T21:07:43.000Z","size":756,"stargazers_count":23,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-10T10:34:24.690Z","etag":null,"topics":["flowchart","flowgraph","graph","react","reactflow","reactinvue","reactjs","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://akashgoswami.github.io/vue-reactflow/dist/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akashgoswami.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-25T19:58:07.000Z","updated_at":"2025-03-14T02:26:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"c576e69f-b887-4684-be3d-b341b13cd001","html_url":"https://github.com/akashgoswami/vue-reactflow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akashgoswami/vue-reactflow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashgoswami%2Fvue-reactflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashgoswami%2Fvue-reactflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashgoswami%2Fvue-reactflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashgoswami%2Fvue-reactflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akashgoswami","download_url":"https://codeload.github.com/akashgoswami/vue-reactflow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashgoswami%2Fvue-reactflow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018708,"owners_count":26086609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flowchart","flowgraph","graph","react","reactflow","reactinvue","reactjs","vue","vuejs"],"created_at":"2025-03-06T09:54:32.982Z","updated_at":"2025-10-14T13:33:07.170Z","avatar_url":"https://github.com/akashgoswami.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-reactflow\n\nThis 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. \nUsing React inside Vue is definitely an anti-pattern, however sometimes it may be required to use it. \n\n[Live Demo](https://akashgoswami.github.io/vue-reactflow/dist/index.html)\n\n\n![image](https://user-images.githubusercontent.com/1212881/126913408-2e8d47a0-bb99-4d7f-8122-0bfc250e70b4.png)\n\nIn 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. \n\n# Important \nThis is a proof of concept experiment, do not use in production without properly understanding the implication. \nAny suggestions to improve the integration or streamline the codebase are more than welcome. \n\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashgoswami%2Fvue-reactflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakashgoswami%2Fvue-reactflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashgoswami%2Fvue-reactflow/lists"}