How to make it work with a nuxt app as origin component ?

[hlassiege]

Hi,

First of all, thanks a lot for your contribution to Nuxt. I ran it and it works perfectly.

I tried to modify it in order to use Nuxt as an origin component.

I copy pasted the modules/build content and I modified the nuxt.config.ts to expose something, instead of using a remote :

  export default defineNuxtConfig({
      buildModules: [
          ['./modules/build/ModuleFederationModule.ts', {
              federationOptions: () => ({
                  name: 'remoteNavbar',
                  filename: 'remoteNavbar.js',
  
                  remotes: {
                  },
  
                  shared: {
                      vue: {
                          requiredVersion: dependencies.vue,
                          singleton: true
                      }
                  },
  
                  exposes: {
                      './navbar': './components/Navbar.vue'
                  }
              })
          }]
      ],
        nitro: {
          externals: {
              external: ['vue']
          }
      }
  
  })

I have a very basic nuxt app with only a component in /components/Navbar.vue

When I build the application with

rimraf .nuxt .output && nuxt build

I have this error :

ERROR Could not resolve './components/Navbar' from App.vue

Do you have a sample demonstrating how it could work in this configuration ?

[phoenix-ru]

First of all, thanks a lot for your contribution to Nuxt. I ran it and it works perfectly.

Thanks for the feedback, much appreciated

I tried to modify it in order to use Nuxt as an origin component.

Looking at your configuration, it seems that you are trying to expose a Nuxt component to Module Federation. This is not really supported, as Nuxt should be used as a host, while you have plain Vue components as remotes.

And while it is theoretically possible, I would not recommend going that path, simply because it isn't worth doing (there's a ton of configuration you need to change in Nuxt to get it properly working)

What I suggest doing instead is combining all the reusable components into a separate Vue project (or several projects, depending on your liking) and then linking remotes to Nuxt. This way there's very little configuration and you may use my template project as a start.

Hope this helps

[hlassiege]

Thanks for you answer. I'll try this way instead of my first approach