feat(router): adds global router to work with only one vue app

app2/src/App.vue

@@ -2,13 +2,13 @@
   <div class="w-full min-h-screen">
     <ul class="bg-blue-200 text-white text-lg p-2 flex gap-8 w-full">
       <li>
-        <router-link to="/page1">Page 1</router-link>
+        <router-link to="/app2/page1">Page 1</router-link>
       </li>|
       <li>
-        <router-link to="/page2">Page 2</router-link>
+        <router-link to="/app2/page2">Page 2</router-link>
       </li>|
       <li>
-        <router-link to="/page3">Page 3</router-link>
+        <router-link to="/home">Home</router-link>
       </li>
     </ul>
     <section class="w-full p-4">

app2/src/bootloader.ts

@@ -3,12 +3,12 @@ import { createApp } from "vue";
 import "./index.scss";
 
 import App from "./App.vue";
-import { router } from "./router";
+// import { router } from "./router";
 import { store } from "./store";
 
 const mountMfe = (el: any) => {
   const app = createApp(App);
-  app.use(router);
+  // app.use(router);
   app.use(store);
   app.mount(el);
 

app2/src/router.ts

@@ -1,11 +1,12 @@
-import { createRouter, createWebHistory } from "vue-router";
-
-export const router = createRouter({
-	history: createWebHistory(),
-	linkActiveClass: "active",
-	routes: [
-    { path: '/page1', alias: '/app2', component: () => import("./views/Page1.vue") },
-    { path: '/page2', component: () => import("./views/Page2.vue") },
-    { path: '/page3', component: () => import("./views/Page3.vue") },
-  ],
-});
+export const app2Routes = [
+  {
+    path: '/app2',
+    redirect: "/app2/page1",
+    component: () => import("./App.vue"),
+    children: [
+      { path: 'page1', component: () => import("./views/Page1.vue") },
+      { path: 'page2', component: () => import("./views/Page2.vue") },
+      { path: 'page3', component: () => import("./views/Page3.vue") },
+    ]
+  },
+];

app2/src/store.ts

@@ -3,20 +3,20 @@ import { createStore } from 'vuex'
 export const store = createStore({
   state () {
     return {
-      count: 0
+      value: 0
     }
   },
   mutations: {
     increment (state) {
-      state.count++
+      state.value++
     },
     decrement (state) {
-      state.count--
+      state.value--
     }
   },
   getters: {
-    getCount (state) {
-      return state.count;
+    getValue (state) {
+      return state.value;
     }
   }
 })

app2/src/views/Page2.vue

@@ -1,3 +1,12 @@
 <template>
-  Page 2
-</template>
+  <h1>Page 1</h1> App2 count: {{ store.getters.getValue }}
+  <div class="flex gap-4">
+    <button @click="store.commit('decrement')"> Decrement </button>
+    <button @click="store.commit('increment')"> Increment </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { store } from "../store";
+
+</script>

app2/webpack.config.js

@@ -52,7 +52,7 @@ module.exports = (_, argv) => ({
         shell: "shell@http://localhost:8080/remoteEntry.js"
       },
       exposes: {
-        "./bootloader": "./src/bootloader"
+        "./routes": "./src/router"
       },
       shared: require("./package.json").dependencies,
     }),

shell/src/mfe.d.ts

@@ -1,2 +1,2 @@
 declare module "shell/RootStore";
-declare module "app2/bootloader";
+declare module "app2/routes";

shell/src/router.ts

@@ -1,11 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
+import { app2Routes } from "app2/routes";
 
 export const router = createRouter({
 	history: createWebHistory(),
 	linkActiveClass: "active",
 	routes: [
     { path: '/home', alias: '/', component: () => import("./views/Home.vue") },
-    { path: '/app2', component: () => import("./views/App2.vue") },
+    ...app2Routes,
     { path: '/app3', component: () => import("./views/App3.vue") },
   ],
 });