Vuera and nuxt - Use react components in vue

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;