feat: load Catalog remote with SFC compatibility

Author: andretorquato

src/views/Catalog.vue

@@ -1,20 +1,36 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-const Catalog = defineAsyncComponent(
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	() => import("catalog/Catalog")
-);
-</script>
-
-<template>
-	<div>
-		<Catalog v-if="!!Catalog" />
+import { shallowRef, onMounted, h, defineComponent } from "vue";
+import { applyDocumentMeta } from "../utils/applyDocumentMeta";
+import { createRemoteAppComponent } from "@module-federation/bridge-vue3";
 
-		<router-link class="btn" to="/player">Player</router-link>
-		<router-link class="btn" to="/">Landing</router-link>
+const innerComp = shallowRef<any>(null);
 
+onMounted(() => {
+  const remoteModule = createRemoteAppComponent({
+    loader: () => import("catalog/Catalog"),
+    asyncComponentOptions: {
+      loadingComponent: defineComponent({
+        name: "LoadingComponent",
+        setup() {
+          return () => h("div", "Loading catalog...");
+        },
+      }),
+    }
+  });
 
-	</div>
+  innerComp.value = defineComponent({
+    name: "CatalogRemoteWrapper",
+    setup() {
+      applyDocumentMeta({
+        title: "Moduflix - Início",
+        description: "Application with Vue.js",
+      });
 
+      return () => h(remoteModule);
+    },
+  });
+});
+</script>
+<template>
+  <component :is="innerComp" v-if="innerComp" />
 </template>