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:
`
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;