App1(host) include App2(remote), router is not working

[franklion]

App1:host, vue3, simple application, just show h1 APP1
App2:remote, vue3, with router and store

App1 include App2, use module-federation.

when i execute App1, get a warn, and router is not working :(

[Vue warn]: Failed to resolve component: router-link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[Vue warn]: Failed to resolve component: router-view
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

So if App2 is remote module, can it use router?

• app1 App.vue

<script>
import { defineAsyncComponent } from "vue";

export default {
  name: "App",
  components: {
    RemoteApp: defineAsyncComponent(() => import("app2/App")),
  },
};
</script>

<template>
  <h1>APP1</h1>
  <RemoteApp></RemoteApp>
</template>

• app1 vite.config.js

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "app1",
      filename: "remoteEntry.js",
      remotes: {
        app2: "http://localhost:4173/assets/remoteEntry.js",
      },
      shared: ["vue", "vue-router", "vuex"],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

• app2 vite.config.js

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "app2",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App.vue",
      },
      shared: ["vue", "vue-router", "vuex"],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    target: "esnext",
    minify: false,
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        minifyInternalExports: false,
      },
    },
  },
});

github-link: https://github.com/franklion/vue-module-federation

[Jiannan-dev]

Thanks for your feedback, I guess the reason for this problem is the same as the previous issue (#139 (comment)), the router should also be bound to the vue instance, remote and host are running in different vue instances, so they can't share the router, when you need to define the router, you have to define it on the host side, like this

const router = createRouter({
    history: createWebHashHistory(), 
    routes: [
        {
            path: '/',
            redirect: '/introduce'
        },
        {
            path: '/login',
            name: 'login',
            component: defineAsyncComponent(() => import("router-remote/Login"))
        },
        {
            path: '/shopping',
            name: 'shopping',
            component: () => import( '../views/Shopping.vue')
        }
        ,
        {
            path: '/account',
            name: 'account',
            component: () => import('../views/Account.vue')
        }
    ]
})

[franklion]

ok, I see. Thank you :)

By the way, if the host module is Angular or React, can i use remote module (Vue) with router?
If I want to use router, does it have to be used on the host side?

[Jiannan-dev]

By the way, if the host module is Angular or React, can i use remote module (Vue) with router?

Do you mean using Vue components in React or Angular? This is unlikely, plugins are not compatible with the differences between frameworks, if you only use Vue on the remote side (it does not need to be used in the host), then you can use the components as you wish

[Jiannan-dev]

If I want to use router, does it have to be used on the host side?

The use of router is not limited by host and remote, because it is bound to different vue instances, that is, if the component needs to run in host, then you need to define router in host, if you need to run in remote, then you need to define router in remote, these two do not conflict, you can set in remote and host for the same component in different router

[ghost]

This allows to have host routing and internal routing? Thanks.