From 2d5646641fde88f39125a0669040469b53662dbf Mon Sep 17 00:00:00 2001
From: vvnsrzn <vivian.sarazin@gmail.com>
Date: Mon, 10 Aug 2026 09:42:50 +0200
Subject: [PATCH] feat: import remote types components

---
 apps/host/app/app.vue                         |  8 +++--
 apps/remote/app/app.vue                       |  2 +-
 .../remote/app/components/exposed/Counter.vue |  5 +++
 apps/remote/app/components/exposed/Widget.vue |  7 ++++
 packages/nuxt/src/remotes.ts                  | 34 ++++++-------------
 5 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/apps/host/app/app.vue b/apps/host/app/app.vue
index b457ed5..9b2e6ff 100644
--- a/apps/host/app/app.vue
+++ b/apps/host/app/app.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import HostCard from "./components/HostCard.vue";
 import HostSsrComponent from "./components/HostSsrComponent.vue";
+
+const message = "Hello World";
 </script>
 
 <template>
@@ -11,13 +13,15 @@ import HostSsrComponent from "./components/HostSsrComponent.vue";
     <div class="component-grid">
       <HostSsrComponent />
       <Suspense>
-        <RemoteWidget />
+        <RemoteWidget :message />
         <template #fallback>
           <div>Loading remote widget...</div>
         </template>
       </Suspense>
       <Suspense>
-        <RemoteCounter />
+        <RemoteCounter>
+          <template #footer> Slot from host </template>
+        </RemoteCounter>
         <template #fallback>
           <div>Loading remote counter...</div>
         </template>
diff --git a/apps/remote/app/app.vue b/apps/remote/app/app.vue
index 6611ee6..94f56cb 100644
--- a/apps/remote/app/app.vue
+++ b/apps/remote/app/app.vue
@@ -1,3 +1,3 @@
 <template>
-  <Widget />
+  <Widget message="Remote Hello" />
 </template>
diff --git a/apps/remote/app/components/exposed/Counter.vue b/apps/remote/app/components/exposed/Counter.vue
index 4928382..850aa58 100644
--- a/apps/remote/app/components/exposed/Counter.vue
+++ b/apps/remote/app/components/exposed/Counter.vue
@@ -2,6 +2,10 @@
 const count = ref(0);
 const hydrated = ref(false);
 
+const slots = defineSlots<{
+  footer(): any;
+}>();
+
 onMounted(() => {
   hydrated.value = true;
 });
@@ -48,6 +52,7 @@ onMounted(() => {
     >
       Remote counter: {{ count }}
     </button>
+    <slot name="footer"> Default footer </slot>
     <span
       :style="{
         alignItems: 'center',
diff --git a/apps/remote/app/components/exposed/Widget.vue b/apps/remote/app/components/exposed/Widget.vue
index 9d59a57..5a33333 100644
--- a/apps/remote/app/components/exposed/Widget.vue
+++ b/apps/remote/app/components/exposed/Widget.vue
@@ -1,4 +1,10 @@
 <script setup lang="ts">
+interface Props {
+  message: string;
+}
+
+defineProps<Props>();
+
 const count = ref(0);
 const hydrated = ref(false);
 
@@ -22,6 +28,7 @@ onMounted(() => {
     "
     data-e2e="APP__CARD"
   >
+    <h1>Message: {{ message }}</h1>
     <div class="icon">
       <svg
         enable-background="new 0 0 512 512"
diff --git a/packages/nuxt/src/remotes.ts b/packages/nuxt/src/remotes.ts
index 21fdb3d..afe947f 100644
--- a/packages/nuxt/src/remotes.ts
+++ b/packages/nuxt/src/remotes.ts
@@ -211,30 +211,18 @@ export function registerRemoteComponents(
     addTypeTemplate({
       filename: "types/module-federation-components.d.ts",
       getContents() {
-        return `
-          import type { Component } from "vue";
-
-          ${components
-            .map(
-              (component) => `
-                declare module ${JSON.stringify(component.importPath)} {
-                  const component: Component;
-                  export default component;
-                }
-              `,
-            )
-            .join("\n")}
-
-          declare module "vue" {
-            export interface GlobalComponents {
-              ${components
-                .map((component) => `${component.componentName}: Component;`)
-                .join("\n")}
-            }
-          }
+        return `declare module "vue" {
+  export interface GlobalComponents {
+    ${components
+      .map(
+        (component) =>
+          `${component.componentName}: typeof import("../../../${component.remoteName}/.nuxt/components.d.ts")["${component.exposedName}"];`,
+      )
+      .join("\n\t\t")}
+  }
+}
 
-          export {};
-        `;
+export { };`;
       },
     });
   }