update structure

host/app.vue

@@ -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>

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>

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

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>

host/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Index page</div>
+</template>