render react components in vue

[jakubzloczewski]

Background: I'm considering switching to vue and I'm interested in possibilities of integrating current application written in react with vue. I think rendering vue inside react components would be rather easy.

The main concern:
I would like to render react components in vue. Pass data and functions in props to reuse my current foundation. Any examples or clues how it would work?

[diraol]

@jakubzloczewski were you able to do this integration?

[blocka]

There are a few people approaches some people are trying (https://github.com/SmallComfort/react-vue and https://github.com/vueact/babel-plugin-transform-react-to-vue)

I'm wondering if a very simple approach would work: simply call ReactDOM.render in mounted. Haven't tried it myself, but I don't see why it wouldn't work. As long as vue keeps the original DOM element intact, react should do it's dom diffing on that tree.

Of course it means including react and vue in the same bundle, so you have to see how much that costs.

[jakubzloczewski]

@diraol No, I gave up this topic.

[diraol]

Just for feedback and documentation purpose.

I was trying to load the Swagger-UI, which is built with ReactJS inside a 'tab' (I'm using vue-bootstrap).

I made it by doing the following on my component:

<template>                                                                                                                              
  <div>                                                                                                                                 
    <div id="swagger-ui"></div>                                                                                                         
  </div>                                                                                                                                
</template>                                                                                                                             
                                                                                                                                        
<script>                                                                                                                                
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from 'swagger-ui-dist'                                                            
import 'swagger-ui-dist/swagger-ui.css'                                                                                                 
import 'swagger-ui-themes/themes/3.x/theme-muted.css'                                                                                   
                                                                                                                                        
export default {                                                                                                                        
  name: 'nappAPI',                                                                                                                      
  props: ['napp'],                                                                                                                      
  mounted () {                                                                                                                          
    let url = this.napp.OpenAPI_URL                                                                                                     
    let spec = JSON.parse(this.napp.OpenAPI_Spec)                                                                                       
    this.buildSwagger({url: url, spec: spec})                                                                                           
  },                                                                                                                                    
  methods: {                                                                                                                            
    buildSwagger (args) {                                                                                                               
      console.log('Building swagger tab')                                                                                               
      let presets = [                                                                                                                   
        SwaggerUIBundle.presets.apis,                                                                                                   
        // SwaggerUIStandalonePreset:                                                                                                   
        //    - 0: 'TopbarPlugin' -> We do not want it!                                                                                 
        //    - 1: ConfigsPlugin                                                                                                        
        //    - 2: StandaloneLayout                                                                                                     
        // https://github.com/swagger-api/swagger-ui/blob/master/src/standalone/index.js                                                
        SwaggerUIStandalonePreset[2]                                                                                                    
      ]                                                                                                                                 
      const ui = SwaggerUIBundle({                                                                                                      
        url: args.url,                                                                                                                  
        spec: args.spec,                                                                                                                
        dom_id: '#swagger-ui',                                                                                                          
        deepLinking: false,                                                                                                             
        filter: true,                                                                                                                   
        presets: presets,                                                                                                               
        plugins: [                                                                                                                      
          SwaggerUIBundle.plugins.DownloadUrl                                                                                           
        ],                                                                                                                              
        layout: 'StandaloneLayout'                                                                                                      
      })                                                                                                                                
      window.ui = ui
    }                                                                                                                                   
  }                                                                                                                                     
}                                                                                                                                       
</script>    

I just do not remember if I really need the window.ui = ui line.