init

host/app.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container mx-auto p-4">
+    <h1 class="text-2xl font-bold mb-4">Nuxt 3 MFE Host App</h1>
+    <div class="grid grid-cols-1 gap-4">
+      <HostComponent />
+      <Suspense>
+        <template #default>
+          <RemoteComponent />
+        </template>
+        <template #fallback>
+          <div>Loading remote component...</div>
+        </template>
+      </Suspense>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineAsyncComponent } from 'vue'
+import HostComponent from './components/HostComponent.vue'
+
+const RemoteComponent = defineAsyncComponent(() => import('remote/RemoteComponent'))
+</script>

host/components/HostComponent.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="p-4 border rounded">
+    <h2 class="text-xl mb-2">Host Component</h2>
+    <p>This is a component from the host application</p>
+  </div>
+</template>
+
+<script setup>
+defineComponent({
+  name: 'HostComponent'
+})
+</script>

host/nuxt.config.ts

@@ -0,0 +1,22 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import federation from '@originjs/vite-plugin-federation'
+
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: false },
+  ssr: false,
+  vite: {
+    plugins: [
+      federation({
+        name: 'host-app',
+        remotes: {
+          remote: 'http://localhost:3001/_nuxt/remoteEntry.js',
+        },
+        // shared: ['vue']
+      })
+    ],
+    build: {
+      target: 'esnext'
+    }
+  }
+})

host/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "nuxt-mfe-host",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": " nuxt dev",
+    "pregenerate": "npm run clean",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "clean": "rimraf .output",
+    "serve": "serve .output/public -p 3000"
+  },
+  "dependencies": {
+    "nuxt": "^3.13.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@originjs/vite-plugin-federation": "^1.3.5",
+    "rimraf": "6",
+    "serve": "*"
+  }
+}

host/public/robots.txt

@@ -0,0 +1 @@
+

host/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}