N
Nuxt•2mo ago
makssieve

Current state of Module Federation for Nuxt

Hi, everyone! I'm researching how to make a microfrontent with Nuxt using the module federation, but cannot found any actual doc/information. There are some old repos with examples, but they are irrelevant. Now I'm trying to understand if it is possible to expose components from Nuxt. Or shouuld I use plain Vue for this goal?
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Maks Sieve. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there isn't specific information about Module Federation for Nuxt. However, I can provide some insights about sharing components between Nuxt applications or between Nuxt and Vue applications. For sharing components from a Nuxt application, you have a few options: 1. Create a component library: You can extract your components into a separate package and publish it to npm. This approach is mentioned in a Stack Overflow post where someone published Nuxt 3 components that can be used in both Nuxt and regular Vue 3 projects: 
{
  "name": "@harikrishnan_pv/test-buttons",
  "version": "1.0.6",
  "description": "A collection of reusable Nuxt 3 components",
  "files": [
    "components", // to include components folder
    "layouts" // to include layouts folder
  ],
  "type": "module"
}
{
  "name": "@harikrishnan_pv/test-buttons",
  "version": "1.0.6",
  "description": "A collection of reusable Nuxt 3 components",
  "files": [
    "components", // to include components folder
    "layouts" // to include layouts folder
  ],
  "type": "module"
}
Then you can import these components in any Vue or Nuxt project: 
import blue from '@harikrishnan_pv/test-buttons/components/Button/blue.vue';
import blue from '@harikrishnan_pv/test-buttons/components/Button/blue.vue';
Stack Overflow Post 2. Create a Nuxt module: Nuxt has a robust module system that allows you to extend functionality and share components. You can create a module that registers your components: 
import { defineNuxtModule, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  hooks: {
    'components:dirs': (dirs) => {
      const { resolve } = createResolver(import.meta.url)
      // Add ./components dir to the list
      dirs.push({
        path: resolve('./components'),
        prefix: 'awesome'
      })
    }
  }
})
import { defineNuxtModule, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  hooks: {
    'components:dirs': (dirs) => {
      const { resolve } = createResolver(import.meta.url)
      // Add ./components dir to the list
      dirs.push({
        path: resolve('./components'),
        prefix: 'awesome'
      })
    }
  }
})
Library Authors documentation While these approaches don't specifically use Module Federation, they provide ways to share components between applications. If you specifically need Module Federation for more advanced microfrontend architecture, you might need to look beyond the provided knowledge sources or consider using plain Vue as you suggested, which might have more direct support for Module Federation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@178930371109322752> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?