From 8bacb8406eca8347b9d9af5a711e72ad842d2324 Mon Sep 17 00:00:00 2001
From: antony <antonybudianto@gmail.com>
Date: Mon, 23 Dec 2024 13:38:00 +0700
Subject: [PATCH] tmp fix reactive

---
 README.md                      |  5 +++--
 host/error.vue                 | 14 +++++++++++++
 host/nuxt.config.ts            | 31 +++++++++++++++++------------
 host/package.json              |  2 +-
 remote/nuxt.config.ts          | 36 ++++++++++++++++++++--------------
 remote/package.json            |  2 +-
 remote/pages/contact/index.vue |  8 +++++++-
 7 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 host/error.vue

diff --git a/README.md b/README.md
index c05db25..0c2f654 100644
--- a/README.md
+++ b/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)
diff --git a/host/error.vue b/host/error.vue
new file mode 100644
index 0000000..6b28ba8
--- /dev/null
+++ b/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>
diff --git a/host/nuxt.config.ts b/host/nuxt.config.ts
index 5782803..727c455 100644
--- a/host/nuxt.config.ts
+++ b/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
diff --git a/host/package.json b/host/package.json
index d561e68..942eef6 100644
--- a/host/package.json
+++ b/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",
diff --git a/remote/nuxt.config.ts b/remote/nuxt.config.ts
index e1fff31..2fb8ea9 100644
--- a/remote/nuxt.config.ts
+++ b/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"
     // }
diff --git a/remote/package.json b/remote/package.json
index ea84d61..9d66c32 100644
--- a/remote/package.json
+++ b/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",
diff --git a/remote/pages/contact/index.vue b/remote/pages/contact/index.vue
index a5a4c0f..59559ad 100644
--- a/remote/pages/contact/index.vue
+++ b/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;