refactoring

host/nuxt.config.ts

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

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

@@ -2,7 +2,6 @@
   <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 />
@@ -13,14 +12,13 @@
       </Suspense>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
 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>