tmp fix reactive

README.md

@@ -18,5 +18,6 @@ pnpm serve
 
 # TODO
 
-- Enable CORS on remote JS assets
-- Scoped style still not works
+- Build-mode works but Dev-mode not works
+- Enable CORS on remote JS assets (fixed)
+- Scoped style still not works (fixed)

host/error.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app"
+
+const props = defineProps({
+  error: Object as () => NuxtError
+})
+</script>
+
+<template>
+  <div>
+    <h1>Ooops... Something went wrong...</h1>
+    <NuxtLink to="/">Go back home</NuxtLink>
+  </div>
+</template>

host/nuxt.config.ts

@@ -10,19 +10,24 @@ export default defineNuxtConfig({
     preset: "static"
   },
   vite: {
-    plugins: [
-      topLevelAwait({
-        promiseExportName: "__tla",
-        promiseImportName: (i) => `__tla_${i}`
-      }),
-      federation({
-        name: "host-app",
-        remotes: {
-          remote: "http://localhost:3001/_nuxt/remoteEntry.js"
-        }
-        // shared: ["vue"]
-      })
-    ]
+    $client: {
+      plugins: [
+        topLevelAwait({
+          promiseExportName: "__tla",
+          promiseImportName: (i) => `__tla_${i}`
+        }),
+        federation({
+          name: "host-app",
+          remotes: {
+            remote: "http://localhost:3001/_nuxt/remoteEntry.js"
+          },
+          shared: ["vue"]
+        })
+      ]
+    },
+    $server: {
+      plugins: []
+    }
   },
   experimental: {
     asyncEntry: true

host/package.json

@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare",
     "clean": "rimraf .output dist",
     "clean2": "rimraf --glob node_modules",
-    "serve": "serve .output/public -p 3000"
+    "serve": "serve .output/public -p 3000 --single"
   },
   "dependencies": {
     "nuxt": "^3.13.0",

remote/nuxt.config.ts

@@ -10,21 +10,27 @@ export default defineNuxtConfig({
     preset: "static"
   },
   vite: {
-    plugins: [
-      topLevelAwait({
-        promiseExportName: "__tla",
-        promiseImportName: (i) => `__tla_${i}`
-      }),
-      federation({
-        name: "remote-app",
-        filename: "remoteEntry.js",
-        exposes: {
-          "./RemoteContactRouter": "./components/RemoteContactRouter.vue"
-        },
-        shared: []
-        // shared: ['vue']
-      })
-    ]
+    $client: {
+      plugins: [
+        topLevelAwait({
+          promiseExportName: "__tla",
+          promiseImportName: (i) => `__tla_${i}`
+        }),
+        federation({
+          name: "remote-app",
+          filename: "remoteEntry.js",
+          exposes: {
+            "./RemoteContactRouter": "./components/RemoteContactRouter.vue"
+          },
+          // shared: []
+          shared: ["vue"]
+        })
+      ]
+    },
+    $server: {
+      plugins: []
+    }
+
     // build: {
     //   target: "esnext"
     // }

remote/package.json

@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare",
     "clean": "rimraf .output dist",
     "clean2": "rimraf --glob node_modules",
-    "serve": "serve .output/public -p 3001 --cors"
+    "serve": "serve .output/public -p 3001 --cors --single"
   },
   "dependencies": {
     "nuxt": "^3.13.0",

remote/pages/contact/index.vue

@@ -2,9 +2,15 @@
   <div class="rmt">
     <h1>rmt/pages/contact/index.vue</h1>
     <div>Contact index</div>
+    <div>
+      count: {{ count }}
+      <button type="button" @click="count++">increment+</button>
+    </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+const count = ref(0)
+</script>
 <style scoped>
 .rmt {
   background-color: antiquewhite;