add module fedration

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue-project-poc",
       "version": "0.0.0",
       "dependencies": {
+        "@originjs/vite-plugin-federation": "^1.3.3",
         "@sangarajuguptanisum/vue-custom-components": "^0.0.3",
         "axios": "^1.6.2",
         "vue": "^3.3.10",
@@ -2952,6 +2953,38 @@
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
       "dev": true
     },
+    "node_modules/@originjs/vite-plugin-federation": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@originjs/vite-plugin-federation/-/vite-plugin-federation-1.3.3.tgz",
+      "integrity": "sha512-EJedGCEB1vZatougqF3A+DwbcNpaAfFjlLxp/BbxpwO36vQ/WMjvtlpfkiyeIolTbFgu85OcXAc98Q2CXtCfJQ==",
+      "dependencies": {
+        "estree-walker": "^3.0.2",
+        "magic-string": "^0.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0",
+        "pnpm": ">=7.0.1"
+      }
+    },
+    "node_modules/@originjs/vite-plugin-federation/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@originjs/vite-plugin-federation/node_modules/magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3292,6 +3325,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",

package.json

@@ -4,14 +4,15 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 5000 --strictPort",
     "build": "vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --port 5000 --strictPort",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "test": "jest"
   },
   "dependencies": {
+    "@originjs/vite-plugin-federation": "^1.3.3",
     "@sangarajuguptanisum/vue-custom-components": "^0.0.3",
     "axios": "^1.6.2",
     "vue": "^3.3.10",

src/App.vue

 <template>
-  <CHeader :kartItems="$store.state.cart.length"> </CHeader>
+  <RHeader :kartItems="$store.state.cart.length"></RHeader>
   <div class="content">
     <router-view />
   </div>
-  <CFooter></CFooter>
+  <RFooter></RFooter>
 </template>
 
 <script>
-import { CHeader, CFooter } from 'vue-header-footer-mfe'
+
+//RFooter,RHeader resembles remote footer in other app
+import RFooter from 'remote-simple/remote-footer';
+import RHeader from 'remote-simple/remote-header';
 export default {
   name: 'App',
   data() {
     return {}
   },
-  components: {},
+  components: { RFooter, RHeader },
   methods: {},
 
   created() {

src/main.js

 import './assets/main.css'
-import '@sangarajuguptanisum/vue-custom-components/dist/index.css'
-import '@sangarajuguptanisum/vue-custom-components/dist/style.css'
-import 'vue-header-footer-mfe/dist/index.css'
 import vueComponents from '@sangarajuguptanisum/vue-custom-components'
-import vueCustomComponents from 'vue-header-footer-mfe'
+
 
 
 import { createApp } from 'vue'
@@ -32,7 +29,6 @@ const router = createRouter({
   ]
 })
 
-app.use(vueCustomComponents)
 app.use(vueComponents)
 app.use(router)
 app.use(store)

vite.config.js

@@ -2,12 +2,37 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import federation from '@originjs/vite-plugin-federation'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    federation({
+      name: 'remote-simple',
+      filename: 'remoteEntry.js',
+      remotes: {
+        'remote-simple': {
+          external: 'http://localhost:5001/assets/remoteEntry.js',
+          from: "vite",
+          format: 'esm'
+        }
+      },
+      shared: ['vue','vue-router',]
+    })
   ],
+  build: {
+    target: 'esnext',
+    minify: false,
+    cssCodeSplit: true,
+    rollupOptions: {
+      // sharedPlugin need input required
+      // input:{},
+      output: {
+        minifyInternalExports: false
+      }
+    }
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))