init

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.data
+.env
+dist

README.md

@@ -0,0 +1,22 @@
+# MFE nuxt x nuxt
+
+MFE with Nuxt being the Host and Remote 
+
+```
+cd host
+pnpm i
+pnpm generate
+pnpm serve
+```
+
+```
+cd remote
+pnpm i
+pnpm generate
+pnpm serve
+```
+
+# TODO
+
+- Enable CORS on remote JS assets
+- Scoped style still not works

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"
+}

remote/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="container mx-auto p-4">
+    <h1 class="text-2xl font-bold mb-4">Nuxt 3 MFE Remote App</h1>
+    <RemoteComponent />
+  </div>
+</template>

remote/components/RemoteComponent.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="p-4 border rounded bg-blue-50 sty1">
+    <h2 class="text-xl mb-2">Remote Component</h2>
+    <p>This component is exposed from the remote application</p>
+  </div>
+</template>
+
+<script setup>
+defineComponent({
+  name: 'RemoteComponent'
+})
+
+onMounted(() => {
+  console.log('mounted')
+})
+</script>
+
+<style>
+  .sty1 {
+    background: pink;
+  }
+</style>

remote/nuxt.config.ts

@@ -0,0 +1,24 @@
+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: 'remote-app',
+        filename: 'remoteEntry.js',
+        exposes: {
+          './RemoteComponent': './components/RemoteComponent.vue'
+        },
+        shared: []
+        // shared: ['vue']
+      })
+    ],
+    build: {
+      target: 'esnext'
+    }
+  }
+})

remote/package.json

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

remote/public/robots.txt

@@ -0,0 +1 @@
+

remote/tsconfig.json

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