From 955dd07c7f4fe29aca0c17a0697ae1b473a42f26 Mon Sep 17 00:00:00 2001
From: antony <antonybudianto@gmail.com>
Date: Sat, 21 Dec 2024 18:50:22 +0700
Subject: [PATCH] update structure

---
 host/app.vue                          | 23 -----------------------
 host/layouts/default.vue              | 17 +++++++++++++++++
 host/package.json                     |  3 ++-
 host/pages/contact/[...all].vue       | 27 +++++++++++++++++++++++++++
 host/pages/index.vue                  |  3 +++
 remote/app.vue                        |  6 ------
 remote/components/ContactRouter.vue   | 27 +++++++++++++++++++++++++++
 remote/components/RemoteComponent.vue | 22 ----------------------
 remote/layouts/default.vue            |  6 ++++++
 remote/nuxt.config.ts                 |  2 +-
 remote/package.json                   |  4 ++--
 remote/pages/about.vue                |  1 +
 remote/pages/contact/index.vue        | 12 ++++++++++++
 remote/pages/contact/properties.vue   | 11 +++++++++++
 remote/pages/index.vue                | 10 ++++++++++
 15 files changed, 119 insertions(+), 55 deletions(-)
 delete mode 100644 host/app.vue
 create mode 100644 host/layouts/default.vue
 create mode 100644 host/pages/contact/[...all].vue
 create mode 100644 host/pages/index.vue
 delete mode 100644 remote/app.vue
 create mode 100644 remote/components/ContactRouter.vue
 delete mode 100644 remote/components/RemoteComponent.vue
 create mode 100644 remote/layouts/default.vue
 create mode 100644 remote/pages/about.vue
 create mode 100644 remote/pages/contact/index.vue
 create mode 100644 remote/pages/contact/properties.vue
 create mode 100644 remote/pages/index.vue

diff --git a/host/app.vue b/host/app.vue
deleted file mode 100644
index 5147795..0000000
--- a/host/app.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/host/layouts/default.vue b/host/layouts/default.vue
new file mode 100644
index 0000000..ee32a64
--- /dev/null
+++ b/host/layouts/default.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div class="layout">
+      <NuxtLink to="/">Home</NuxtLink>
+      <NuxtLink to="/contact">Contact</NuxtLink>
+      <NuxtLink to="/contact/properties">Contact Properties</NuxtLink>
+    </div>
+    <slot />
+    <div>--HOST Footer--</div>
+  </div>
+</template>
+<style scoped>
+.layout {
+  display: flex;
+  gap: 20px;
+}
+</style>
diff --git a/host/package.json b/host/package.json
index 5fdb392..58d6da1 100644
--- a/host/package.json
+++ b/host/package.json
@@ -10,6 +10,7 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "clean": "rimraf .output",
+    "clean2": "rimraf --glob node_modules",
     "serve": "serve .output/public -p 3000"
   },
   "dependencies": {
@@ -21,4 +22,4 @@
     "rimraf": "6",
     "serve": "*"
   }
-}
\ No newline at end of file
+}
diff --git a/host/pages/contact/[...all].vue b/host/pages/contact/[...all].vue
new file mode 100644
index 0000000..9167568
--- /dev/null
+++ b/host/pages/contact/[...all].vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="container mx-auto p-4">
+    <h1 class="text-2xl font-bold mb-4">Contact page (Host)</h1>
+    <div class="grid grid-cols-1 gap-4">
+      <div class="rmt">
+        <Suspense>
+          <template #default>
+            <RemoteContactRouter />
+          </template>
+          <template #fallback>
+            <div>Loading remote component...</div>
+          </template>
+        </Suspense>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineAsyncComponent } from "vue"
+
+const RemoteContactRouter = defineAsyncComponent(() =>
+  import("remote/ContactRouter")
+)
+</script>
+
+<style scoped></style>
diff --git a/host/pages/index.vue b/host/pages/index.vue
new file mode 100644
index 0000000..c83f0ba
--- /dev/null
+++ b/host/pages/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Index page</div>
+</template>
diff --git a/remote/app.vue b/remote/app.vue
deleted file mode 100644
index 573c609..0000000
--- a/remote/app.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/remote/components/ContactRouter.vue b/remote/components/ContactRouter.vue
new file mode 100644
index 0000000..1a98963
--- /dev/null
+++ b/remote/components/ContactRouter.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <component v-if="asyncPageComponent" :is="asyncPageComponent" />
+  </div>
+</template>
+
+<script setup>
+import { defineAsyncComponent } from "vue"
+
+/**
+ * @todo
+ * it'll be nice if there is a way to dynamically match route and render..
+ */
+console.log(">>", window.location.pathname)
+
+const Index = defineAsyncComponent(() => import("@/pages/contact/index.vue"))
+const Properties = defineAsyncComponent(() =>
+  import("@/pages/contact/properties.vue")
+)
+
+let asyncPageComponent
+if (/\/contact\/properties/.test(window.location.pathname)) {
+  asyncPageComponent = Properties
+} else {
+  asyncPageComponent = Index
+}
+</script>
diff --git a/remote/components/RemoteComponent.vue b/remote/components/RemoteComponent.vue
deleted file mode 100644
index cb00dd8..0000000
--- a/remote/components/RemoteComponent.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/remote/layouts/default.vue b/remote/layouts/default.vue
new file mode 100644
index 0000000..252847d
--- /dev/null
+++ b/remote/layouts/default.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    Remote layout
+    <slot />
+  </div>
+</template>
diff --git a/remote/nuxt.config.ts b/remote/nuxt.config.ts
index b44cae9..c68b68e 100644
--- a/remote/nuxt.config.ts
+++ b/remote/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
         name: "remote-app",
         filename: "remoteEntry.js",
         exposes: {
-          "./RemoteComponent": "./components/RemoteComponent.vue"
+          "./ContactRouter": "./components/ContactRouter.vue"
         },
         shared: []
         // shared: ['vue']
diff --git a/remote/package.json b/remote/package.json
index 845f77c..7c71990 100644
--- a/remote/package.json
+++ b/remote/package.json
@@ -10,7 +10,7 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "clean": "rimraf .output",
-    "serve": "serve .output/public -p 3001"
+    "serve": "serve .output/public -p 3001 --cors"
   },
   "dependencies": {
     "nuxt": "^3.13.0",
@@ -21,4 +21,4 @@
     "rimraf": "6",
     "@originjs/vite-plugin-federation": "^1.3.5"
   }
-}
\ No newline at end of file
+}
diff --git a/remote/pages/about.vue b/remote/pages/about.vue
new file mode 100644
index 0000000..671695b
--- /dev/null
+++ b/remote/pages/about.vue
@@ -0,0 +1 @@
+<template><div>about rmt</div></template>
diff --git a/remote/pages/contact/index.vue b/remote/pages/contact/index.vue
new file mode 100644
index 0000000..a5a4c0f
--- /dev/null
+++ b/remote/pages/contact/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="rmt">
+    <h1>rmt/pages/contact/index.vue</h1>
+    <div>Contact index</div>
+  </div>
+</template>
+<script setup></script>
+<style scoped>
+.rmt {
+  background-color: antiquewhite;
+}
+</style>
diff --git a/remote/pages/contact/properties.vue b/remote/pages/contact/properties.vue
new file mode 100644
index 0000000..154685b
--- /dev/null
+++ b/remote/pages/contact/properties.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>rmt/pages/contact/properties.vue</h1>
+    <div>Contact prop</div>
+  </div>
+</template>
+<script setup>
+definePageMeta({
+  name: "contact1"
+})
+</script>
diff --git a/remote/pages/index.vue b/remote/pages/index.vue
new file mode 100644
index 0000000..b77e3f5
--- /dev/null
+++ b/remote/pages/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// import ContactRouter from "~/components/ContactRouter.vue"
+</script>
+
+<template>
+  <div class="container mx-auto p-4">
+    <h1 class="text-2xl font-bold mb-4">Nuxt 3 MFE Remote App</h1>
+    <!-- <ContactRouter /> -->
+  </div>
+</template>