diff --git a/host/error.vue b/host/error.vue
deleted file mode 100644
index 6b28ba8..0000000
--- a/host/error.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
Ooops... Something went wrong...
- Go back home
-
-
diff --git a/host/nuxt.config.ts b/host/nuxt.config.ts
index e08bdda..1f3a291 100644
--- a/host/nuxt.config.ts
+++ b/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
}
diff --git a/host/package.json b/host/package.json
index 952f941..2fec249 100644
--- a/host/package.json
+++ b/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"
}
}
diff --git a/host/pages/contact/[...all].vue b/host/pages/contact/[...all].vue
index 5a36359..dd2d71c 100644
--- a/host/pages/contact/[...all].vue
+++ b/host/pages/contact/[...all].vue
@@ -4,7 +4,7 @@
-
+
Loading remote component...
@@ -14,11 +14,15 @@
-
diff --git a/host/pages/index.vue b/host/pages/index.vue
index c83f0ba..c4dd48d 100644
--- a/host/pages/index.vue
+++ b/host/pages/index.vue
@@ -1,3 +1,13 @@
- Index page
+
+ Index page:
+
Count: {{ counter.$state.count }}
+
+
+
diff --git a/host/plugins/pinia.ts b/host/plugins/pinia.ts
new file mode 100644
index 0000000..4d1a06a
--- /dev/null
+++ b/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)
+})
diff --git a/host/pnpm-lock.yaml b/host/pnpm-lock.yaml
index 9f370db..8da0dcc 100644
--- a/host/pnpm-lock.yaml
+++ b/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)):
diff --git a/host/stores/counter.ts b/host/stores/counter.ts
new file mode 100644
index 0000000..7a77e58
--- /dev/null
+++ b/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
+ }
+})
diff --git a/remote/components/RemoteContactRouter.vue b/remote/components/RemoteContactRouter.vue
index 1a98963..a6d7b8f 100644
--- a/remote/components/RemoteContactRouter.vue
+++ b/remote/components/RemoteContactRouter.vue
@@ -1,24 +1,37 @@
-
+ emit('increment', v)"
+ />
-