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:
Here is my react component in my vue project, JBrowseComponent.jsx:
`
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()],
},
})
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
And here is my vue Wrapper Component around the react component using vuera:
This seems like the correct approach to do this ?
<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>