init pinia

host/error.vue

@@ -1,14 +0,0 @@
-<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

@@ -33,7 +33,7 @@ export default defineNuxtConfig({
           remotes: {
             remote: `${MFE_HOST}/_nuxt/remoteEntry.js`
           },
-          shared: ["vue"]
+          shared: ["vue", "pinia"]
         })
       ]
     },
@@ -41,6 +41,7 @@ export default defineNuxtConfig({
       plugins: []
     }
   },
+  plugins: ["~/plugins/pinia"],
   experimental: {
     asyncEntry: true
   }

host/package.json

@@ -15,13 +15,15 @@
     "serve": "serve .output/public -p 3000 --single"
   },
   "dependencies": {
+    "@pinia/nuxt": "^0.9.0",
     "nuxt": "^3.15.0",
+    "pinia": "^2.3.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "^1.3.5",
-    "serve": "~14.2.4",
     "rimraf": "6",
+    "serve": "~14.2.4",
     "vite-plugin-top-level-await": "~1.4.4"
   }
 }

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

@@ -4,7 +4,7 @@
     <div class="grid grid-cols-1 gap-4">
       <Suspense>
         <template #default>
-          <RemoteContactRouter />
+          <RemoteContactRouter label="propsFromHost" @increment="handleLog" />
         </template>
         <template #fallback>
           <div>Loading remote component...</div>
@@ -14,11 +14,15 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { defineAsyncComponent } from "vue"
 
-const RemoteContactRouter = defineAsyncComponent(() =>
-  import("remote/RemoteContactRouter")
+const handleLog = (value: number) => {
+  console.log("HOST: log increment", value)
+}
+const RemoteContactRouter = defineAsyncComponent(
+  // @ts-expect-error mfe
+  () => import("remote/RemoteContactRouter")
 )
 </script>
 

host/pages/index.vue

@@ -1,3 +1,13 @@
 <template>
-  <div>Index page</div>
+  <div>
+    Index page:
+    <p>Count: {{ counter.$state.count }}</p>
+    <button type="button" @click="() => counter.increment()">
+      increment+ pinia
+    </button>
+  </div>
 </template>
+<script setup lang="ts">
+import { useCounter } from "@/stores/counter"
+const counter = useCounter()
+</script>

host/plugins/pinia.ts

@@ -0,0 +1,9 @@
+import { createPinia } from "pinia"
+import { defineNuxtPlugin } from "#app"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const pinia = createPinia()
+  // @ts-expect-error need global
+  window.__mfeHostPinia = pinia
+  nuxtApp.vueApp.use(pinia)
+})

host/pnpm-lock.yaml

@@ -8,9 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@pinia/nuxt':
+        specifier: ^0.9.0
+        version: 0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.28.1)
       nuxt:
         specifier: ^3.15.0
         version: 3.15.0(@parcel/watcher@2.5.0)(@types/node@22.10.2)(db0@0.2.1)(ioredis@5.4.2)(magicast@0.3.5)(rollup@4.28.1)(terser@5.37.0)(typescript@5.7.2)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(terser@5.37.0)(yaml@2.6.1))(yaml@2.6.1)
+      pinia:
+        specifier: ^2.3.0
+        version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.2)
@@ -809,6 +815,11 @@ packages:
     resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
     engines: {node: '>= 10.0.0'}
 
+  '@pinia/nuxt@0.9.0':
+    resolution: {integrity: sha512-2yeRo7LeyCF68AbNeL3xu2h6uw0617RkcsYxmA8DJM0R0PMdz5wQHnc44KeENQxR/Mrq8T910XVT6buosqsjBQ==}
+    peerDependencies:
+      pinia: ^2.3.0
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -2571,6 +2582,15 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  pinia@2.3.0:
+    resolution: {integrity: sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   pkg-types@1.2.1:
     resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
 
@@ -3451,6 +3471,17 @@ packages:
   vue-bundle-renderer@2.1.1:
     resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
@@ -4320,6 +4351,15 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.0
       '@parcel/watcher-win32-x64': 2.5.0
 
+  '@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.28.1)':
+    dependencies:
+      '@nuxt/kit': 3.15.0(magicast@0.3.5)(rollup@4.28.1)
+      pinia: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -6285,6 +6325,16 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.7.2)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+    optionalDependencies:
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   pkg-types@1.2.1:
     dependencies:
       confbox: 0.1.8
@@ -7165,6 +7215,10 @@ snapshots:
     dependencies:
       ufo: 1.5.4
 
+  vue-demi@0.14.10(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.7.2)
+
   vue-devtools-stub@0.1.0: {}
 
   vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)):

host/stores/counter.ts

@@ -0,0 +1,24 @@
+import { defineStore } from "pinia"
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export const useCounter = defineStore("counter", {
+  state: () => ({
+    count: 100
+  }),
+  actions: {
+    increment() {
+      this.count += 1
+    },
+
+    async asyncIncrement() {
+      console.log("asyncIncrement called")
+      await sleep(300)
+      this.count++
+      return true
+    }
+  },
+  getters: {
+    getCount: (state) => state.count
+  }
+})

remote/components/RemoteContactRouter.vue

@@ -1,24 +1,37 @@
 <template>
   <div>
-    <component v-if="asyncPageComponent" :is="asyncPageComponent" />
+    <component
+      v-if="asyncPageComponent"
+      :is="asyncPageComponent"
+      @increment="(v: number) => emit('increment', v)"
+    />
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { defineAsyncComponent } from "vue"
+import { useHostPinia } from "~/composables/useHostPinia"
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emit = defineEmits<{
+  (e: "increment", count: number): void
+}>()
+
+useHostPinia()
 
 /**
  * @todo
  * it'll be nice if there is a way to dynamically match route and render..
  */
-console.log(">>", window.location.pathname)
-
 const Index = defineAsyncComponent(() => import("@/pages/contact/index.vue"))
-const Properties = defineAsyncComponent(() =>
-  import("@/pages/contact/properties.vue")
+const Properties = defineAsyncComponent(
+  () => import("@/pages/contact/properties.vue")
 )
 
-let asyncPageComponent
+let asyncPageComponent: unknown
 if (/\/contact\/properties/.test(window.location.pathname)) {
   asyncPageComponent = Properties
 } else {

remote/composables/useHostPinia.ts

@@ -0,0 +1,10 @@
+import { onBeforeMount } from "vue"
+import { setActivePinia } from "pinia"
+
+export function useHostPinia() {
+  onBeforeMount(() => {
+    console.log("RMT: init pinia store from host: ")
+    // @ts-expect-error global pinia host
+    setActivePinia(window.__mfeHostPinia || createPinia())
+  })
+}

remote/nuxt.config.ts

@@ -22,8 +22,7 @@ export default defineNuxtConfig({
           exposes: {
             "./RemoteContactRouter": "./components/RemoteContactRouter.vue"
           },
-          // shared: []
-          shared: ["vue"]
+          shared: ["vue", "pinia"]
         })
       ]
     },
@@ -35,6 +34,7 @@ export default defineNuxtConfig({
     //   target: "esnext"
     // }
   },
+  modules: ["@pinia/nuxt"],
   experimental: {
     asyncEntry: true
   }

remote/package.json

@@ -15,13 +15,15 @@
     "serve": "serve .output/public -p 3001 --cors --single"
   },
   "dependencies": {
+    "@pinia/nuxt": "^0.9.0",
     "nuxt": "^3.15.0",
+    "pinia": "^2.3.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "^1.3.5",
-    "serve": "~14.2.4",
     "rimraf": "6",
+    "serve": "~14.2.4",
     "vite-plugin-top-level-await": "~1.4.4"
   }
 }

remote/pages/contact/index.vue

@@ -3,13 +3,27 @@
     <h1>rmt/pages/contact/index.vue</h1>
     <div>Contact index</div>
     <div>
-      count: {{ count }}
-      <button type="button" @click="count++">increment+</button>
+      count: {{ count }} / counterFromPinia: {{ counter.$state.count }} <br />
+      <button type="button" @click="count++">increment+ local</button>
+      <button type="button" @click="handleIncrementPinia">
+        increment+ pinia
+      </button>
     </div>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
+import { useCounter } from "@/stores/counter"
+const counter = useCounter()
 const count = ref(0)
+
+const emit = defineEmits<{
+  (e: "increment", count: number): void
+}>()
+
+const handleIncrementPinia = () => {
+  counter.increment()
+  emit("increment", counter.$state.count)
+}
 </script>
 <style scoped>
 .rmt {

remote/pnpm-lock.yaml

@@ -8,9 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@pinia/nuxt':
+        specifier: ^0.9.0
+        version: 0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.28.1)
       nuxt:
         specifier: ^3.15.0
         version: 3.15.0(@parcel/watcher@2.5.0)(@types/node@22.10.2)(db0@0.2.1)(ioredis@5.4.2)(magicast@0.3.5)(rollup@4.28.1)(terser@5.37.0)(typescript@5.7.2)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(terser@5.37.0)(yaml@2.6.1))(yaml@2.6.1)
+      pinia:
+        specifier: ^2.3.0
+        version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.2)
@@ -809,6 +815,11 @@ packages:
     resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
     engines: {node: '>= 10.0.0'}
 
+  '@pinia/nuxt@0.9.0':
+    resolution: {integrity: sha512-2yeRo7LeyCF68AbNeL3xu2h6uw0617RkcsYxmA8DJM0R0PMdz5wQHnc44KeENQxR/Mrq8T910XVT6buosqsjBQ==}
+    peerDependencies:
+      pinia: ^2.3.0
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -2571,6 +2582,15 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  pinia@2.3.0:
+    resolution: {integrity: sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   pkg-types@1.2.1:
     resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
 
@@ -3451,6 +3471,17 @@ packages:
   vue-bundle-renderer@2.1.1:
     resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
@@ -4320,6 +4351,15 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.0
       '@parcel/watcher-win32-x64': 2.5.0
 
+  '@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.28.1)':
+    dependencies:
+      '@nuxt/kit': 3.15.0(magicast@0.3.5)(rollup@4.28.1)
+      pinia: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -6285,6 +6325,16 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.7.2)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+    optionalDependencies:
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   pkg-types@1.2.1:
     dependencies:
       confbox: 0.1.8
@@ -7165,6 +7215,10 @@ snapshots:
     dependencies:
       ufo: 1.5.4
 
+  vue-demi@0.14.10(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.7.2)
+
   vue-devtools-stub@0.1.0: {}
 
   vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)):

remote/stores/counter.ts

@@ -0,0 +1,24 @@
+import { defineStore } from "pinia"
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export const useCounter = defineStore("counter", {
+  state: () => ({
+    count: 999
+  }),
+  actions: {
+    increment() {
+      this.count += 1
+    },
+
+    async asyncIncrement() {
+      console.log("asyncIncrement called")
+      await sleep(300)
+      this.count++
+      return true
+    }
+  },
+  getters: {
+    getCount: (state) => state.count
+  }
+})