lazy load vue microfrontends

mshima · Oct 26, 2023 · 13fc489 · 13fc489
1 parent 0d0fbe4
commit 13fc489
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 11 deletions.
diff --git a/generators/client/templates/webpack/webpack.microfrontend.js.jhi.ejs b/generators/client/templates/webpack/webpack.microfrontend.js.jhi.ejs
@@ -48,6 +48,14 @@ module.exports = ({ serve }) => {
       chunkIds: 'named',
       runtimeChunk: false,
     },
+<%_ if (applicationTypeGateway && clientFrameworkVue) { _%>
+    resolve: {
+      fallback: {
+        // Workaround https://github.com/module-federation/universe/issues/1575
+        path: false,
+      },
+    },
+<%_ } _%>
     plugins: [
       new ModuleFederationPlugin({
 <%_ if (applicationTypeMicroservice) { _%>

diff --git a/generators/vue/resources/package.json b/generators/vue/resources/package.json
@@ -18,6 +18,7 @@
     "vue-router": "4.2.5"
   },
   "devDependencies": {
+    "@module-federation/utilities": "3.0.3-0",
     "@pinia/testing": "0.1.3",
     "@rushstack/eslint-patch": "1.5.1",
     "@tsconfig/node18": "18.2.2",

diff --git a/generators/vue/templates/package.json.ejs b/generators/vue/templates/package.json.ejs
@@ -55,6 +55,9 @@
     "vue-router": "<%= nodeDependencies['vue-router'] %>"
   },
   "devDependencies": {
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+    "@module-federation/utilities": "<%= nodeDependencies['@module-federation/utilities'] %>",
+<%_ } _%>
 <%_ if (microfrontend) { _%>
     "@originjs/vite-plugin-federation": "1.2.3",
     "browser-sync-webpack-plugin": "<%= nodeDependencies['browser-sync-webpack-plugin'] %>",

diff --git a/generators/vue/templates/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs b/generators/vue/templates/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs
@@ -11,16 +11,23 @@ import EntitiesMenu from '@/entities/entities-menu.vue';
 
 import { useStore } from '@/store';
 import { useRouter } from 'vue-router';
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { importRemote } from '@module-federation/utilities';
+<%_ } _%>
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'JhiNavbar',
   components: {
     'entities-menu': EntitiesMenu,
 <%_ if (applicationTypeGateway && microfrontend) { _%>
-  <%_ for (const microfrontend of microfrontends) { _%>
-    '<%= microfrontend.lowercaseBaseName %>-menu': defineAsyncComponent(() => {
-      return import('@<%= microfrontend.lowercaseBaseName %>/entities-menu').catch(() => import('@/core/error/error-loading.vue'));
+  <%_ for (const remote of microfrontends) { _%>
+    '<%= remote.lowercaseBaseName %>-menu': defineAsyncComponent(() => {
+      return importRemote<any>({
+        url: `./<%= remote.endpointPrefix %>`,
+        scope: '<%= remote.lowercaseBaseName %>',
+        module: './entities-menu',
+      }).catch(() => import('@/core/error/error-loading.vue'));
     }),
   <%_ } _%>
 <%_ } _%>

diff --git a/generators/vue/templates/src/main/webapp/app/router/index.ts.ejs b/generators/vue/templates/src/main/webapp/app/router/index.ts.ejs
@@ -1,4 +1,7 @@
 import { createRouter as createVueRouter, createWebHistory<% if (applicationTypeGateway && microfrontend) { %>, type RouteRecordRaw<% } %> } from 'vue-router';
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { importRemote } from '@module-federation/utilities';
+<%_ } _%>
 
 const Home = () => import('@/core/home/home.vue');
 const Error = () => import('@/core/error/error.vue');
@@ -43,7 +46,11 @@ const router = createRouter();
 <%_ if (applicationTypeGateway && microfrontend) { _%>
 export const lazyRoutes = Promise.all([
   <%_ for (const remote of microfrontends) { _%>
-  import('@<%= remote.lowercaseBaseName %>/entities-router')
+  importRemote<any>({
+    url: `./<%= remote.endpointPrefix %>`,
+    scope: '<%= remote.lowercaseBaseName %>',
+    module: './entities-router',
+  })
     .then(<%= remote.lowercaseBaseName %>Router => {
       router.addRoute(<%= remote.lowercaseBaseName %>Router.default as RouteRecordRaw);
       return <%= remote.lowercaseBaseName %>Router.default;

diff --git a/generators/vue/templates/webpack/webpack.microfrontend.js.jhi.vue.ejs b/generators/vue/templates/webpack/webpack.microfrontend.js.jhi.vue.ejs
@@ -22,13 +22,6 @@ const { DefinePlugin } = require('webpack');
 <%_ } _%>
 <&_ } -&>
 <&_ if (fragment.moduleFederationSection) { -&>
-<%_ if (applicationTypeGateway) { _%>
-        remotes: {
-  <%_ for (const remote of microfrontends) { _%>
-          '@<%= remote.lowercaseBaseName %>': `<%= remote.lowercaseBaseName %>@/<%= remote.endpointPrefix %>/remoteEntry.js`,
-  <%_ } _%>
-        },
-<%_ } _%>
 <%_ if (applicationTypeMicroservice) { _%>
         exposes: {
           './entities-router': './<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/router/entities',