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.

[warheartvik]

@munawarb Hello!

I found out that the line bellow is looking for main entry file (“main”: “lib/module.js”) located in package.json 3 levels above single-spa-demo, meaning, at the root folder of the whole project modules: [ { handler: require(path.resolve(__dirname, '../../../')) } ], So, what I did to run the single-spa-demo in isolatation was to copy lib folder from root, and added it to single-spa-demo folder. On single-spa-demo/package.json added

"main": "lib/module.js", and dependecies required by module.js

"dependencies": { "concurrently": "^5.3.0", "@nuxt/utils": "latest", "lodash.isempty": "^4.4.0", "uniqid": "^5.2.0" } on nuxt-sub-app/nuxt.config.js . changed modules: [ { handler: require(path.resolve(__dirname, '../')) } ],

cd single-spa-demo yarn install yarn install:all yarn serve:all

That did it for me

https://github.com/warheartvik/nuxt-single-spa-demo

[munawarb]

Hi @warheartvik, Your solution worked 😃 I’m able to render both the sample app and also the Nuxt app I’ve created. Thanks for figuring this out. You’re a star.