Few blockers on Module federation | working on vue 3

[iamprobirdey]

In my case I tried with exposing few single component, which works perfect. Later I found each component has many nested component, so sharing a single component won't work.

So I shared my router, by adding the router to my host using router.addRoute(remoteRouter) works perfectly.

Host runs on
localhost:8080

remote runs on
localhost:8082

Problem 1:
My remote component api's should call port:8082 but they are calling port:8080 and I am not sure how can i fix this.

Problem 2:
Remote component has some generic files to call notification
Like

notification.ts

import {Notify} from 'quasar';

export default showError(msg: string): void{
  Notify.create({ 
  msg,
  type: 'negative'
  });
}

LandingPage.vue

  import {showError} from notification.ts
  ...
  
  showError('error')
  
  ...
  

This Notify plugin couldn't find the module in the host.

I tried with pulling notify in component rather than using in generic ts file and it works.

I think there is some ts config problem i couldn't find what could be.

Problem 3

My remote landingPage component has a button

<button href="message/create/" />

It should somehow redirect to the page itself but since it's in my host app, but it effect my host app url

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnest",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "types": ["webpack-env", "jest"],
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["src/*"]
    },
    "lib": ["esnext", "DOM", "DOM.Iterable", "ScriptHost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

vue.config.js

const path = require("path");
const MutateRuntimePlugin = require("./src/DynamicPublicPathPlugin");
const { dependencies, devDependencies } = require("./package.json");

module.exports = {
  publicPath: "",
  pluginOptions: {
    quasar: {
      importStrategy: "kebab",
      rtlSupport: false
    }
  },
  transpileDependencies: ["quasar"],
  configureWebpack: {
    devtool: "source-map",
    devServer: {
      hot: false,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods":
          "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers":
          "X-Requested-With, content-type, Authorization"
      },
      host: "0.0.0.0",
      historyApiFallback: true
    },
    resolve: {
      symlinks: false,
      alias: {
        vue: path.resolve("./node_modules/vue"),
        "~": path.resolve("./node_modules")
      }
    },
    plugins: [new MutateRuntimePlugin()]
  },
  chainWebpack: (config) => {
    // eslint-disable-next-line no-param-reassign
    config.devServer.hot = false;
    config.optimization.delete("splitChunks");
    config
      .plugin("module-federation-plugin")
      // eslint-disable-next-line @typescript-eslint/no-var-requires,global-require
      .use(require("webpack").container.ModuleFederationPlugin, [
        {
          name: "CommsManager",
          filename: "remoteEntry.js",
          remotes: {},
          exposes: {
            "./CommsStore": "./src/store/",
            "./CommsManager": "./src/CommsManager.vue",
            "./CommsRouter": "./src/router/index.ts"
          },
          shared: [
            {
              vue: {
                singleton: true
              },
              quasar: {
                singleton: true
              },
              typescript: {
                singleton: true
              }
            }
          ]
        }
      ]);
  }
};

[ScriptedAlchemy]

Help wanted here. I don't know vue