refactoring

host/nuxt.config.ts

@@ -18,5 +18,8 @@ export default defineNuxtConfig({
     build: {
       target: "esnext"
     }
+  },
+  experimental: {
+    asyncEntry: true
   }
 })

host/pages/contact/[...all].vue

@@ -2,16 +2,14 @@
   <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>
-        <Suspense>
+        <template #default>
-          <template #default>
+          <RemoteContactRouter />
-            <RemoteContactRouter />
+        </template>
-          </template>
+        <template #fallback>
-          <template #fallback>
+          <div>Loading remote component...</div>
-            <div>Loading remote component...</div>
+        </template>
-          </template>
+      </Suspense>
-        </Suspense>
-      </div>
     </div>
   </div>
 </template>
@@ -20,7 +18,7 @@
 import { defineAsyncComponent } from "vue"
 
 const RemoteContactRouter = defineAsyncComponent(() =>
-  import("remote/ContactRouter")
+  import("remote/RemoteContactRouter")
 )
 </script>
 

remote/nuxt.config.ts

@@ -11,7 +11,7 @@ export default defineNuxtConfig({
         name: "remote-app",
         filename: "remoteEntry.js",
         exposes: {
-          "./ContactRouter": "./components/ContactRouter.vue"
+          "./RemoteContactRouter": "./components/RemoteContactRouter.vue"
         },
         shared: []
         // shared: ['vue']
@@ -20,5 +20,8 @@ export default defineNuxtConfig({
     build: {
       target: "esnext"
     }
+  },
+  experimental: {
+    asyncEntry: true
   }
 })

remote/pages/index.vue

@@ -1,10 +1,7 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-// 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>