Nuxt App Doesn't Render When Used Inside Single-SPA

Hi, I’m trying to use your project to turn my Nuxtjs app into a micro frontend. I’ve configured my app to generate one bundle file called main.js. When I load this main.js into single-spa, I get no DOM. I do have an index root (pages/index.vue). Is there something else I need to include inside single-spa for this app to render?

Part of my single-spa:

    <script type="systemjs-importmap">
        { "imports": { 
            "someRandomName": "http://localhost:3000/_nuxt/main.js",
...
}
</script>

Now, I do see the lifecycle hooks firing. My mfe.js is exactly what’s provided in the example directory and I do see messages like Nuxt bootstrapped, so I can see the lifecycle hooks are working.

The issue is nothing is rendering in the DOM.

Here is my nuxt.config.js:

import colors from 'vuetify/es5/util/colors'
const bodyParser = require("body-parser");
export default {
  render: {
    resourceHints: false
  },
  serverMiddleware: [
    bodyParser.json(), // Register JSON middleware so we can handle application/json requests.
    {path: "/deliver", handler: "~/serverMiddleware/deliver.js"},
    {path: "/save", handler: "~/serverMiddleware/save.js"}
  ],
  mode: "spa",
  /*
  ** Headers of the page
  */
  head: {
    title: 'test', 
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    {src:'~/plugins/v-jsoneditor', mode:'client'}, 
    {src: "~/plugins/localStorage.js", ssr: false}
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify',
    'cookie-universal-nuxt'  ,
    ['@femessage/nuxt-micro-frontend', {force: true}]
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
    'nuxt-graphql-request',
    'cookie-universal-nuxt'  ,
    ['@femessage/nuxt-micro-frontend', {force: true}]
  ],
  graphql: {
    /**
     * Your GraphQL endpoint (required)
     */
    endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
 
    /**
     * Enable support for AST
     * default: false
     */
    AST: false,
 
    /**
     * Options
     * See: https://github.com/prisma-labs/graphql-request
     */
    options: {},
  },
  
  axios:{
     
  },
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      disable:true, 
      themes: {
        light: {
          primary: colors.blue,
          accent: colors.blueGrey,
          secondary: colors.amber,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
		quiet: false,
		optimization: {splitChunks: {chunks: "async"}, runtimeChunk: false},
		splitChunks: {layouts: false, pages: false, commons: false, vendor: false},
		filenames: {app: () => "main.js"},
    /*
    ** You can extend webpack config here
    */
   serverMiddleware: [
    { path: '/api', handler: '~/server/api.js' },
  ],

    extend (config, ctx) {
    }
  }
}

Any help on this would be greatly appreciated!

I would expect the index page to render, but it doesn’t.