Can't use React component (react-grid-layout) in Vue

[mateuszlewko]

Hi,

I'm trying to use react-grid-layout in Vue using your awesome library. Here is what I have:

// Grid.vue
<template>
  <GridLayout className="layout" :cols="12" :rowHeight="30" :width="1200">
    <div key="a" :data-grid="{x: 0, y: 0, w: 1, h: 2, static: true}">a</div>
    <div key="b" :data-grid="{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}">b</div>
    <div key="c" :data-grid="{x: 4, y: 0, w: 1, h: 2}">c</div>
  </GridLayout>
</template>

<script lang="ts">
// @ts-ignore
import GridLayout from 'react-grid-layout';

export default {
  name : 'Grid',
  components: { GridLayout },
};
</script>
<style>
@import '/node_modules/react-grid-layout/css/styles.css';
@import '/node_modules/react-resizable/css/styles.css';
</style>

// App.vue
<template>
  <div id="app">
    <Grid/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @ts-ignore
import Grid from './components/Grid.vue';

@Component({
  components: {
    Grid,
  },
})

export default class App extends Vue {}

</script>

As you can see I'm using GridLayout component from react and wrapping it into Vue component (Grid). First of all, am I doing this correctly? Grid component doesn't get displayed at all, but I don't see any errors in yarn serve output. I can see <react-wrapper> under <GridLayout in Vue's DOM (with Vue-devtools). I've tried doing it as in issue 26, but still no success. Do you know how to fix this?

My dependencies:

"dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-grid-layout": "^0.16.6",
    "vue": "^2.5.16",
    "vue-class-component": "^6.0.0",
    "vue-grid-layout": "^2.1.13",
    "vue-property-decorator": "^6.0.0",
    "vuera": "^0.2.2"
  },

Thanks!

[akxcv]

Hi! Sorry for not responding, I've been quite busy. I'll try to look at your problem this week.

[mateuszlewko]

Awesome, thank you!

[mateuszlewko]

I've managed to fix the problem. First I created a react component as suggested here: https://github.com/akxcv/vuera/issues/26, and then added transform-react-jsx to babel plugins. I'm also using Vue components in that react component through VueWrapper: <VueWrapper component={VueComponent} />. I see it's not a recommended way of using vue in react, but I wonder whether it has any downsides?

[akxcv]

Hi again. Sorry that I couldn't help, but it's great that you figured out the problem!

I'm not sure why you aren't able to use Vue components inside of React via the recommended way. But, to answer your question, no, using the VueWrapper does not have any downsides aside from aesthetics.