feat: import remote types components

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>

apps/remote/app/app.vue

@@ -1,3 +1,3 @@
 <template>
-  <Widget />
+  <Widget message="Remote Hello" />
 </template>

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',

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"

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 { };`;
       },
     });
   }