N
Nuxt•5mo ago
BobLamarley

Vuera and nuxt - Use react components in vue

Hello, I'm having trouble setting up vuera via the nuxt.config.js in order to be able to use React component in vue Has anyone already done this ? 🙂 Here is my nuxt.config.js: 
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import react from '@vitejs/plugin-react';

const isDevelopment = process.env.NODE_ENV === 'development';

export default defineNuxtConfig({
  srcDir: "src",
  pages: true,
  devtools: { 
    enabled: true,
    timeline: {
      enabled: true,
    } 
  },
  ssr: true,
  runtimeConfig: {
    public: {
        domain: process.env.NUXT_PUBLIC_DOMAIN_NAME,
        http: process.env.NUXT_PUBLIC_HTTP,
    }
  },
  build: {
    transpile: ['vuetify', 'vue-sonner'],
    babel: {
      "presets": "react",
      "plugins": ["vuera/babel"]
    }
  },
  plugins: [
    { src: '~/plugins/plausible.js', mode: 'client' },
    { src: '~/plugins/matomo.js', mode: 'client' }
  ],  
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    '@pinia/nuxt',
    'nuxt3-leaflet',
    '@sidebase/nuxt-pdf',
  ],
  vite: {
    server: isDevelopment ? {
      https: false,
      hmr: {
        protocol: "ws"
      }
    } : {
      https: true,
      hmr: {
        protocol: 'wss'
      }
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
    plugins: [react()],
  },
})
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import react from '@vitejs/plugin-react';

const isDevelopment = process.env.NODE_ENV === 'development';

export default defineNuxtConfig({
  srcDir: "src",
  pages: true,
  devtools: { 
    enabled: true,
    timeline: {
      enabled: true,
    } 
  },
  ssr: true,
  runtimeConfig: {
    public: {
        domain: process.env.NUXT_PUBLIC_DOMAIN_NAME,
        http: process.env.NUXT_PUBLIC_HTTP,
    }
  },
  build: {
    transpile: ['vuetify', 'vue-sonner'],
    babel: {
      "presets": "react",
      "plugins": ["vuera/babel"]
    }
  },
  plugins: [
    { src: '~/plugins/plausible.js', mode: 'client' },
    { src: '~/plugins/matomo.js', mode: 'client' }
  ],  
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    '@pinia/nuxt',
    'nuxt3-leaflet',
    '@sidebase/nuxt-pdf',
  ],
  vite: {
    server: isDevelopment ? {
      https: false,
      hmr: {
        protocol: "ws"
      }
    } : {
      https: true,
      hmr: {
        protocol: 'wss'
      }
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
    plugins: [react()],
  },
})
Here is my react component in my vue project, JBrowseComponent.jsx: 
import React from 'react';
import { createViewState, JBrowseLinearGenomeView } from '@jbrowse/react-linear-genome-view';
import { observer } from 'mobx-react';

const JBrowseComponent = observer(({ config }) => {
  const state = createViewState(config);

  return <JBrowseLinearGenomeView viewState={state} />;
});

export default JBrowseComponent;
import React from 'react';
import { createViewState, JBrowseLinearGenomeView } from '@jbrowse/react-linear-genome-view';
import { observer } from 'mobx-react';

const JBrowseComponent = observer(({ config }) => {
  const state = createViewState(config);

  return <JBrowseLinearGenomeView viewState={state} />;
});

export default JBrowseComponent;
`
1 Reply
BobLamarley
BobLamarleyOP•5mo ago
And here is my vue Wrapper Component around the react component using vuera: 
<script setup>
    import { ref } from 'vue'
    import JBrowseComponent from '~/components/JBrowseComponent.jsx'

    const JBrowseComponentRef = ref(JBrowseComponent)

    const jbrowseConfig = ref({});
</script>

<template>
    <div>
        <ReactWrapper :component="JBrowseComponent" :props="jbrowseConfig" />
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import JBrowseComponent from '~/components/JBrowseComponent.jsx'

    const JBrowseComponentRef = ref(JBrowseComponent)

    const jbrowseConfig = ref({});
</script>

<template>
    <div>
        <ReactWrapper :component="JBrowseComponent" :props="jbrowseConfig" />
    </div>
</template>
This seems like the correct approach to do this ?

Did you find this page helpful?