tmp fix reactive

README.md

@@ -18,5 +18,6 @@ pnpm serve
 
 # TODO
 
-- Enable CORS on remote JS assets
-- Scoped style still not works
+- Build-mode works but Dev-mode not works
+- Enable CORS on remote JS assets (fixed)
+- Scoped style still not works (fixed)

host/error.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app"
+
+const props = defineProps({
+  error: Object as () => NuxtError
+})
+</script>
+
+<template>
+  <div>
+    <h1>Ooops... Something went wrong...</h1>
+    <NuxtLink to="/">Go back home</NuxtLink>
+  </div>
+</template>

host/nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     preset: "static"
   },
   vite: {
+    $client: {
       plugins: [
         topLevelAwait({
           promiseExportName: "__tla",
@@ -19,11 +20,15 @@ export default defineNuxtConfig({
           name: "host-app",
           remotes: {
             remote: "http://localhost:3001/_nuxt/remoteEntry.js"
-        }
-        // shared: ["vue"]
+          },
+          shared: ["vue"]
         })
       ]
     },
+    $server: {
+      plugins: []
+    }
+  },
   experimental: {
     asyncEntry: true
   }

host/package.json

@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare",
     "clean": "rimraf .output dist",
     "clean2": "rimraf --glob node_modules",
-    "serve": "serve .output/public -p 3000"
+    "serve": "serve .output/public -p 3000 --single"
   },
   "dependencies": {
     "nuxt": "^3.13.0",

remote/nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     preset: "static"
   },
   vite: {
+    $client: {
       plugins: [
         topLevelAwait({
           promiseExportName: "__tla",
@@ -21,10 +22,15 @@ export default defineNuxtConfig({
           exposes: {
             "./RemoteContactRouter": "./components/RemoteContactRouter.vue"
           },
-        shared: []
-        // shared: ['vue']
+          // shared: []
+          shared: ["vue"]
         })
       ]
+    },
+    $server: {
+      plugins: []
+    }
+
     // build: {
     //   target: "esnext"
     // }

remote/package.json

@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare",
     "clean": "rimraf .output dist",
     "clean2": "rimraf --glob node_modules",
-    "serve": "serve .output/public -p 3001 --cors"
+    "serve": "serve .output/public -p 3001 --cors --single"
   },
   "dependencies": {
     "nuxt": "^3.13.0",

remote/pages/contact/index.vue

@@ -2,9 +2,15 @@
   <div class="rmt">
     <h1>rmt/pages/contact/index.vue</h1>
     <div>Contact index</div>
+    <div>
+      count: {{ count }}
+      <button type="button" @click="count++">increment+</button>
+    </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+const count = ref(0)
+</script>
 <style scoped>
 .rmt {
   background-color: antiquewhite;