Troubleshooting: Micro-frontend implementation failing with Vue3, Nuxt3, and Vite

Frontend
1

Hey everyone, I’m banging my head against the wall trying to set up a micro-frontend using Nuxt3. I started a new project with npx nuxi@latest init remote and added the vite module federation configs to my nuxt.config.ts file. I’m trying to expose a simple HelloWorld component.

Here’s what my setup looks like:

<!-- components/GreetingMessage.vue -->
<template>
  <div>
    <p>Greetings from the remote app!</p>
  </div>
</template>

// nuxt.config.ts
import moduleFed from '@originjs/vite-plugin-federation';

export default defineNuxtConfig({
  // other config stuff
  vite: {
    plugins: [
      moduleFed({
        name: 'remoteApp',
        filename: 'remoteEntry.js',
        exposes: {
          './GreetingMessage': './components/GreetingMessage.vue'
        }
      })
    ]
  }
})

But as soon as I add the moduleFed plugin, I get this nasty error:

ERROR Expression expected

The weird thing is, I can still see the output in the browser if I import the GreetingMessage component into app.vue. I’ve also tried integrating this with my host app, but I still get the same error. I’m totally stuck here. Any ideas on what might be causing this and how to fix it?

2

hey there! have u considered using a different approach? maybe try the Nuxt Module Federation plugin instead? it’s designed specifically for Nuxt and might play nicer with ur setup. Also, whats ur Nuxt version? Some folks had issues with older versions. curious to hear if u’ve explored other options?

3

hey Lu_57Read, had similar issues. try wrapping ur moduleFed config in a function:

vite: {
  plugins: [
    () => moduleFed({
      // ur config here
    })
  ]
}

this solved it for me. also double-check ur vite & module federation versions are compatible. good luck!

4

I encountered a similar issue when implementing micro-frontends with Nuxt3. Have you verified that all your dependencies are up-to-date? Incompatible versions can cause cryptic errors. Additionally, ensure that your Vite configuration is correctly set up for module federation. Sometimes, the error you’re seeing can be caused by syntax issues in the configuration file. It might be worth double-checking your import statements and plugin setup. If the problem persists, consider using Vue’s native Custom Elements as an alternative approach for component sharing between applications.