generator-jhipster 7.1.0 → 7.4.0

package/generators/client/templates/vue/src/main/webapp/app/admin/tracker/tracker.service.ts.ejs

@@ -15,7 +15,7 @@ export default class TrackerService {
 
   private router: VueRouter;
 
-  constructor(router: VueRouter) {
+  constructor(router: VueRouter<%_ if (authenticationTypeSession) { _%>, private cookie: any<%_ } _%>) {
     this.router = router;
     this.connection = this.createConnection();
     this.listener = this.createListener();
@@ -28,19 +28,20 @@ export default class TrackerService {
     // building absolute path so that websocket doesn't fail when deploying with a context path
     const loc = window.location;
     const baseHref = document.querySelector('base').getAttribute('href');
-    let url;
-    url = '//' + loc.host + baseHref + 'websocket/tracker';
 <%_ if (authenticationTypeJwt) { _%>
+    let url = '//' + loc.host + baseHref + 'websocket/tracker';
     const authToken = localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken');
     if (authToken) {
       url += '?access_token=' + authToken;
     }
+<%_ } else { _%>
+    const url = '//' + loc.host + baseHref + 'websocket/tracker';
 <%_ } _%>
     const socket = new SockJS(url);
     this.stompClient = Stomp.over(socket, { protocols: ['v12.stomp'] });
     const headers = {};
 <%_ if (authenticationTypeSession) { _%>
-    headers['X-XSRF-TOKEN'] = (<any>this).$cookie.get('JSESSIONID') || (<any>this).$cookie.get('XSRF-TOKEN');
+    headers['X-XSRF-TOKEN'] = this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN');
 <%_ } _%>
     this.stompClient.connect(headers, () => this.afterConnect());
   }

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-edit.component.ts.ejs

@@ -2,6 +2,7 @@ import { email, maxLength, minLength, required } from 'vuelidate/lib/validators'
 import { Component, Inject, Vue } from 'vue-property-decorator';
 import UserManagementService from './user-management.service';
 import { IUser, User } from '@/shared/model/user.model';
+import AlertService from '@/shared/alert/alert.service';
 
 const loginValidator = (value: string) => {
   if (!value) {
@@ -37,6 +38,8 @@ const validations: any = {
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
   @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('alertService') private alertService: () => AlertService;
+
   public userAccount: IUser;
   public isSaving = false;
   public authorities: any[] = [];
@@ -87,6 +90,9 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
           solid: true,
           autoHideDelay: 5000,
         });
+      }).catch(error => {
+        this.isSaving = true;
+        this.alertService().showHttpError(this,error.response);
       });
     } else {
 <%_ if (!enableTranslation) { _%>
@@ -101,6 +107,9 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
           solid: true,
           autoHideDelay: 5000,
         });
+      }).catch(error => {
+        this.isSaving = true;
+        this.alertService().showHttpError(this,error.response);
       });
     }
   }

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-view.component.ts.ejs

@@ -1,10 +1,13 @@
 import Vue from 'vue';
 import { Component, Inject } from 'vue-property-decorator';
 import UserManagementService from './user-management.service';
+import AlertService from '@/shared/alert/alert.service';
 
 @Component
 export default class <%=jhiPrefixCapitalized%>UserManagementView extends Vue {
   @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('alertService') private alertService: () => AlertService;
+
   public user: any = null;
 
   beforeRouteEnter(to, from, next) {
@@ -17,6 +20,8 @@ export default class <%=jhiPrefixCapitalized%>UserManagementView extends Vue {
   public init(userId: <% if (userPrimaryKeyTypeString || userPrimaryKeyTypeUUID) { %>string<% } else { %>number<% } %>): void {
     this.userManagementService().get(userId).then(res => {
       this.user = res.data;
+    }).catch(error => {
+      this.alertService().showHttpError(this,error.response);
     });
   }
 }

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs

@@ -1,12 +1,15 @@
 import { Component, Inject, Vue } from 'vue-property-decorator';
 import Vue2Filters from 'vue2-filters';
 import UserManagementService from './user-management.service';
+import AlertService from '@/shared/alert/alert.service';
 
 @Component({
   mixins: [Vue2Filters.mixin]
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends Vue {
   @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('alertService') private alertService: () => AlertService;
+
   public error = '';
   public success = '';
   public users: any[] = [];
@@ -110,6 +113,8 @@ _%>
       this.removeId = null;
       this.loadAll();
       this.closeDialog();
+    }).catch(error => {
+      this.alertService().showHttpError(this,error.response);
     });
   }
 
@@ -127,6 +132,6 @@ _%>
   }
 
   public get username(): string {
-    return this.$store.getters.account ? this.$store.getters.account.login : '';
+    return this.$store.getters.account?.login ?? '';
   }
 }

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.service.ts.ejs

@@ -3,6 +3,7 @@ import buildPaginationQueryOpts from '@/shared/sort/sorts';
 <%_ if (databaseTypeCassandra) { _%>
 import {Authority} from '@/shared/security/authority'
 <%_ } _%>
+import { IUser } from '@/shared/model/user.model';
 
 export default class UserManagementService {
 
@@ -10,11 +11,11 @@ export default class UserManagementService {
     return axios.get(`api/admin/users/${userId}`);
   }
 
-  public create(user): Promise<any> {
+  public create(user: IUser): Promise<any> {
     return axios.post('api/admin/users', user);
   }
 
-  public update(user): Promise<any> {
+  public update(user: IUser): Promise<any> {
     return axios.put('api/admin/users', user);
   }
 

package/generators/client/templates/vue/src/main/webapp/app/constants.ts.ejs

@@ -1,13 +1,22 @@
-// These constants are injected via webpack environment variables.
-// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
-// If you change the values in the webpack config files, you need to re run webpack to update the application
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
 
-export const VERSION = process.env.VERSION;
-// export const DEBUG_INFO_ENABLED: boolean = !!process.env.DEBUG_INFO_ENABLED;
-export const SERVER_API_URL = process.env.SERVER_API_URL;
-export const BUILD_TIMESTAMP = process.env.BUILD_TIMESTAMP;
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
 // Errors
 export const PROBLEM_BASE_URL = 'https://www.jhipster.tech/problem';
-export const EMAIL_ALREADY_USED_TYPE = PROBLEM_BASE_URL + '/email-already-used';
-export const LOGIN_ALREADY_USED_TYPE = PROBLEM_BASE_URL + '/login-already-used';
+export const EMAIL_ALREADY_USED_TYPE = `${PROBLEM_BASE_URL}/email-already-used`;
+export const LOGIN_ALREADY_USED_TYPE = `${PROBLEM_BASE_URL}/login-already-used`;

package/generators/client/templates/vue/src/main/webapp/app/core/home/home.component.ts.ejs

@@ -20,6 +20,6 @@ export default class Home extends Vue {
   }
 
   public get username(): string {
-    return this.$store.getters.account ? this.$store.getters.account.login : '';
+    return this.$store.getters.account?.login ?? '';
   }
 }

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -1,12 +1,22 @@
 import { Component, Inject, Vue } from 'vue-property-decorator';
-import { VERSION } from '@/constants';
 import LoginService from '@/account/login.service';
 import AccountService from '@/account/account.service';
 <%_ if (enableTranslation) { _%>
 import TranslationService from '@/locale/translation.service';
 <%_ } %>
 
-@Component
+import EntitiesMenu from '@/entities/entities-menu.vue';
+
+@Component({
+  components: {
+    'entities-menu': EntitiesMenu,
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+    '<%= remote.lowercaseBaseName %>-menu': () => import('@<%= remote.lowercaseBaseName %>/entities-menu'),
+  <%_ } _%>
+<%_ } _%>
+  },
+})
 export default class JhiNavbar extends Vue {
   @Inject('loginService')
   private loginService: () => LoginService;
@@ -14,7 +24,7 @@ export default class JhiNavbar extends Vue {
   @Inject('translationService') private translationService: () => TranslationService;
 <%_ } %>
   @Inject('accountService') private accountService: () => AccountService;
-  public version = VERSION ? 'v' + VERSION : '';
+  public version = 'v' + VERSION;
   private currentLanguage = this.$store.getters.currentLanguage;
   private languages: any = this.$store.getters.languages;
   private hasAnyAuthorityValue = false;
@@ -47,26 +57,16 @@ export default class JhiNavbar extends Vue {
 <%_ if (!authenticationTypeJwt) { _%>
     this.loginService().logout().then(response => {
       this.$store.commit('logout');
-      this.$router.push('/', () => {});
+      this.$router.push('/');
   <%_ if (authenticationTypeOauth2) { _%>
-      const data = response.data;
-      let logoutUrl = data.logoutUrl;
-      // if Keycloak, uri has protocol/openid-connect/token
-      if (logoutUrl.indexOf('/protocol') > -1) {
-        logoutUrl = logoutUrl + '?redirect_uri=' + window.location.origin;
-      } else {
-        // Okta
-        logoutUrl = logoutUrl + '?id_token_hint=' +
-        data.idToken + '&post_logout_redirect_uri=' + window.location.origin;
-      }
-      window.location.href = logoutUrl;
+      window.location.href = response.data.logoutUrl;
   <%_ } _%>
     });
 <%_ } else { _%>
     localStorage.removeItem('<%=jhiPrefixDashed %>-authenticationToken');
     sessionStorage.removeItem('<%=jhiPrefixDashed %>-authenticationToken');
     this.$store.commit('logout');
-    this.$router.push('/', () => {});
+    this.$router.push('/');
 <%_ } _%>
   }
 

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs

@@ -33,6 +33,12 @@
             <font-awesome-icon icon="th-list" />
             <span class="no-bold" v-text="$t('global.menu.entities.main')">Entities</span>
           </span>
+          <entities-menu></entities-menu>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+          <<%= remote.lowercaseBaseName %>-menu></<%= remote.lowercaseBaseName %>-menu>
+  <%_ } _%>
+<%_ } _%>
           <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
         </b-nav-item-dropdown>
         <b-nav-item-dropdown

package/generators/client/templates/vue/src/main/webapp/app/declarations.d.ts.ejs

@@ -0,0 +1,41 @@
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+// These constants are injected via webpack environment variables.
+// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
+// If you change the values in the webpack config files, you need to re run webpack to update the application
+
+declare const SERVER_API_URL: string;
+declare const VERSION: string;
+<%_ if (enableTranslation) { _%>
+declare const I18N_HASH: string;
+<%_ } _%>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-router' {
+  const _default: [];
+  export default _default;
+}
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-menu' {
+  const _default: unknown;
+  export default _default;
+}
+  <%_ } _%>
+<%_ } _%>

package/generators/client/templates/vue/src/main/webapp/app/entities/entities-menu.component.ts.ejs

@@ -0,0 +1,34 @@
+import {
+  Component,
+  Inject,
+  Vue,
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+  Watch,
+<%_ } _%>
+} from 'vue-property-decorator';
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+import TranslationService from '@/locale/translation.service';
+<%_ } _%>
+
+@Component
+export default class EntitiesMenu extends Vue {
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+  @Inject({ default: true }) private readonly microfrontendI18n!: boolean;
+  @Inject('translationService') private translationService: () => TranslationService;
+
+  @Watch('$i18n.locale')
+  onLocaleChanged() {
+    this.loadLanguage();
+  }
+
+  created(): void {
+    this.loadLanguage();
+  }
+
+  private loadLanguage() {
+    if (this.microfrontendI18n) {
+      this.translationService().loadTranslations('<%= frontendAppName %>', '<%= endpointPrefix %>/', I18N_HASH);
+    }
+  }
+<%_ } _%>
+}

package/generators/client/templates/vue/src/main/webapp/app/entities/entities-menu.vue.ejs

@@ -0,0 +1,13 @@
+<template>
+  <div>
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+    <b-dropdown-item to="/<%= entity.entityPage %>">
+      <font-awesome-icon icon="asterisk" />
+      <span v-text="$t('global.menu.entities.<%= entity.entityTranslationKeyMenu %>')"><%= entity.entityClassHumanized %></span>
+    </b-dropdown-item>
+<%_ } _%>
+    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
+  </div>
+</template>
+
+<script lang="ts" src="./entities-menu.component.ts"></script>

package/generators/client/templates/vue/src/main/webapp/app/entities/entities.component.ts.ejs

@@ -0,0 +1,12 @@
+import { Component, Provide, Vue } from 'vue-property-decorator';
+
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+import <%= entity.entityAngularName %>Service from './<%= entity.entityFolderName %>/<%= entity.entityFileName %>.service';
+<%_ } _%>
+
+@Component
+export default class Entities extends Vue {
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+  @Provide('<%= entity.entityInstance %>Service') private <%= entity.entityInstance %>Service = () => new <%= entity.entityAngularName %>Service();
+<%_ } _%>
+}

package/generators/client/templates/vue/src/main/webapp/app/entities/entities.vue.ejs

@@ -0,0 +1,5 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script lang="ts" src="./entities.component.ts"></script>

package/generators/{common/templates/.huskyrc.ejs → client/templates/vue/src/main/webapp/app/index.ts.ejs}

@@ -16,8 +16,4 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-{
-  "hooks": {
-    "pre-commit": "lint-staged"
-  }
-}
+import('./main');

package/generators/client/templates/vue/src/main/webapp/app/locale/translation.service.ts.ejs

@@ -1,7 +1,6 @@
 import axios from 'axios';
 import VueI18n from 'vue-i18n';
 import { Store } from 'vuex';
-import { BUILD_TIMESTAMP } from '@/constants';
 import dayjs from 'dayjs';
 
 export default class TranslationService {
@@ -12,31 +11,48 @@ export default class TranslationService {
     this.store = store;
     this.i18n = i18n;
   }
+<%_ if (microfrontend) { _%>
+
+  public loadTranslations(appKey: string, urlPrefix: string, hash: string) {
+    const currentLanguage = this.store.getters.currentLanguage;
+    if (!this.i18n) return;
+
+    axios.get(`${urlPrefix}i18n/${currentLanguage}.json?_=${hash}`).then((res: any) => {
+      if (res.data) {
+        this.i18n.mergeLocaleMessage(currentLanguage, res.data);
+      }
+    });
+  }
+<%_ } _%>
 
   public refreshTranslation(newLanguage: string) {
     let currentLanguage = this.store.getters.currentLanguage;
     currentLanguage = newLanguage ? newLanguage : '<%= nativeLanguage %>';
     if (this.i18n && !this.i18n.messages[currentLanguage]) {
       this.i18n.setLocaleMessage(currentLanguage, {});
-      axios.get(`i18n/${currentLanguage}.json?buildTimestamp=${BUILD_TIMESTAMP}`).then((res) => {
+      axios.get(`i18n/${currentLanguage}.json?_=${I18N_HASH}`).then((res: any) => {
         if (res.data) {
-          dayjs.locale(currentLanguage);
           this.i18n.setLocaleMessage(currentLanguage, res.data);
-          this.i18n.locale = currentLanguage;
-          this.store.commit('currentLanguage', currentLanguage);
+          this.setLocale(currentLanguage);
         }
       });
     } else if (this.i18n) {
-      dayjs.locale(currentLanguage);
-      this.i18n.locale = currentLanguage;
-      this.store.commit('currentLanguage', currentLanguage);
+      this.setLocale(currentLanguage);
     }
+  }
+
+  private setLocale(lang: string) {
+    dayjs.locale(lang);
+    this.i18n.locale = lang;
+    this.store.commit('currentLanguage', lang);
+    axios.defaults.headers.common['Accept-Language'] = lang;
+    document.querySelector('html').setAttribute('lang', lang);
 <%_ if (enableI18nRTL) { _%>
-      this.updatePageDirection(currentLanguage);
+    this.updatePageDirection(lang);
 <%_ } _%>
   }
-
 <%_ if (enableI18nRTL) { _%>
+
     private isRTL(lang: string): boolean {
       const languages = this.store.getters.languages;
       return languages[lang] && languages[lang].rtl;

package/generators/client/templates/vue/src/main/webapp/app/main.ts.ejs

@@ -24,7 +24,9 @@ import UserManagementService from '@/admin/user-management/user-management.servi
 <%_ } _%>
 import LoginService from './account/login.service';
 import AccountService from './account/account.service';
+import AlertService from './shared/alert/alert.service';
 
+import '../content/scss/global.scss';
 import '../content/scss/vendor.scss';
 <%_ if (enableTranslation) { _%>
 import TranslationService from '@/locale/translation.service';
@@ -59,7 +61,7 @@ const i18n = config.initI18N(Vue);
 const store = config.initVueXStore(Vue);
 
 <%_ if (communicationSpringWebsocket) { _%>
-const trackerService = new TrackerService(router);
+const trackerService = new TrackerService(router<%_ if (authenticationTypeSession) { _%>, (<any>Vue).cookie<%_ } _%>);
 <%_ } _%>
 <%_ if (enableTranslation) { _%>
 const translationService = new TranslationService(store, i18n);
@@ -120,9 +122,14 @@ new Vue({
     translationService: () => translationService,
 <%_ } _%>
     // jhipster-needle-add-entity-service-to-main - JHipster will import entities services here
-    accountService: () => accountService
-
+    accountService: () => accountService,
+    alertService: () => new AlertService(),
+<%_ if (applicationTypeMicroservice && microfrontend) { _%>
+    microfrontendI18n: false,
+<%_ } _%>
   },
-<%_ if (enableTranslation) { _%>    i18n,<%_ } _%>
-  store
+<%_ if (enableTranslation) { _%>
+  i18n,
+<%_ } _%>
+  store,
 });

package/generators/client/templates/vue/src/main/webapp/app/router/admin.ts.ejs

@@ -76,17 +76,17 @@ export default [
       name: '<%= jhiPrefixCapitalized %>ConfigurationComponent',
       component: <%= jhiPrefixCapitalized %>ConfigurationComponent,
       meta: { authorities: [Authority.ADMIN] }
-    }
+    },
 <%_ } _%>
-<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>,
+<%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
     {
       path: '/admin/gateway',
       name: '<%= jhiPrefixCapitalized %>GatewayComponent',
       component: <%= jhiPrefixCapitalized %>GatewayComponent,
       meta: { authorities: [Authority.ADMIN] }
-    }
+    },
 <%_ } _%>
-<%_ if (communicationSpringWebsocket) { _%>,
+<%_ if (communicationSpringWebsocket) { _%>
     {
       path: '/admin/tracker',
       name: '<%= jhiPrefixCapitalized %>TrackerComponent',

package/generators/client/templates/vue/src/main/webapp/app/router/entities.ts.ejs

@@ -1,9 +1,52 @@
 import {Authority} from "@/shared/security/authority";
 /* tslint:disable */
 // prettier-ignore
+const Entities = () => import('@/entities/entities.vue');
 
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+const <%= entity.entityAngularName %> = () => import('@/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>.vue');
+  <%_ if (!entity.readOnly) { _%>
+const <%= entity.entityAngularName %>Update = () => import('@/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>-update.vue');
+  <%_ } _%>
+const <%= entity.entityAngularName %>Details = () => import('@/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>-details.vue');
+
+<%_ } _%>
 // jhipster-needle-add-entity-to-router-import - JHipster will import entities to the router here
 
 export default [
-  // jhipster-needle-add-entity-to-router - JHipster will add entities to the router here
+  {
+    path: '/<%= applicationTypeMicroservice ? baseName.toLowerCase() : '' %>',
+    component: Entities,
+    children: [
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+      {
+        path: '<%= entity.entityFileName %>',
+        name: '<%= entity.entityAngularName %>',
+        component: <%= entity.entityAngularName %>,
+        meta: { authorities: [Authority.USER] },
+      },
+  <%_ if (!entity.readOnly) { _%>
+      {
+        path: '<%= entity.entityFileName %>/new',
+        name: '<%= entity.entityAngularName %>Create',
+        component: <%= entity.entityAngularName %>Update,
+        meta: { authorities: [Authority.USER] },
+      },
+      {
+        path: '<%= entity.entityFileName %>/:<%= entity.entityInstance %>Id/edit',
+        name: '<%= entity.entityAngularName %>Edit',
+        component: <%= entity.entityAngularName %>Update,
+        meta: { authorities: [Authority.USER] },
+      },
+  <%_ } _%>
+      {
+        path: '<%= entity.entityFileName %>/:<%= entity.entityInstance %>Id/view',
+        name: '<%= entity.entityAngularName %>View',
+        component: <%= entity.entityAngularName %>Details,
+        meta: { authorities: [Authority.USER] },
+      },
+<%_ } _%>
+      // jhipster-needle-add-entity-to-router - JHipster will add entities to the router here
+    ],
+  },
 ];

package/generators/client/templates/vue/src/main/webapp/app/router/index.ts.ejs

@@ -15,6 +15,12 @@ import account from "@/router/account";
 import admin from "@/router/admin";
 import entities from "@/router/entities";
 import pages from "@/router/pages";
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+
+  <%_ for (const remote of remotes) { _%>
+const <%= remote.lowercaseBaseName %>Router = await import('@<%= remote.lowercaseBaseName %>/entities-router').then(module => module.default).catch(() => []);
+  <%_ } _%>
+<%_ } _%>
 
 Vue.use(Router);
 
@@ -44,6 +50,11 @@ export default new Router({
 <%_ } _%>
     ...admin,
     ...entities,
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+    ...<%= remote.lowercaseBaseName %>Router,
+  <%_ } _%>
+<%_ } _%>
     ...pages
   ]
 });

package/generators/client/templates/vue/src/main/webapp/app/shared/alert/alert.service.ts.ejs

@@ -0,0 +1,61 @@
+import Vue from 'vue';
+
+export default class AlertService {
+  public showError(instance: Vue, message: string, params?: any) {
+    <%_ if (enableTranslation) { _%>
+    const alertMessage = instance.$t(message, params);
+    <%_ } else {_%>
+    const alertMessage = message;
+    <%_ } _%>
+    instance.$root.$bvToast.toast(alertMessage.toString(), {
+      toaster: 'b-toaster-top-center',
+      title: 'Error',
+      variant: 'danger',
+      solid: true,
+      autoHideDelay: 5000,
+    });
+  }
+
+  public showHttpError(instance: Vue, httpErrorResponse: any) {
+    switch (httpErrorResponse.status) {
+      case 0:
+        this.showError(instance,<% if (enableTranslation) { %> 'error.server.not.reachable'<% } else { %> 'Server not reachable'<% } %>);
+        break;
+
+      case 400: {
+        const arr = Object.keys(httpErrorResponse.headers);
+        let errorHeader: string | null = null;
+<%_ if (enableTranslation) { _%>
+            let entityKey: string | null = null;
+<%_ } _%>
+        for (const entry of arr) {
+          if (entry.toLowerCase().endsWith('app-error')) {
+            errorHeader = httpErrorResponse.headers[entry];
+<%_ if (enableTranslation) { _%>
+            } else if (entry.toLowerCase().endsWith('app-params')) {
+              entityKey = httpErrorResponse.headers[entry];
+<%_ } _%>
+            }
+        }
+        if (errorHeader) {
+<%_ if (enableTranslation) { _%>
+          const alertData = entityKey ? { entityName: instance.$t(`global.menu.entities.${entityKey}`) } : undefined;
+<%_ } _%>
+          this.showError(instance, errorHeader<% if (enableTranslation) { %>, alertData<% } %>);
+        } else if (httpErrorResponse.data !== '' && httpErrorResponse.data.fieldErrors) {  
+          this.showError(instance, <% if (enableTranslation) { %>httpErrorResponse.data.message<% } else { %>'Validation error'<% } %>);
+        } else {
+          this.showError(instance, httpErrorResponse.data.message);
+        }
+        break;
+      }
+
+      case 404:
+        this.showError(instance, <% if (enableTranslation) { %>'error.http.404'<% } else { %>'Not found'<% } %>);
+        break;
+
+      default:
+        this.showError(instance, httpErrorResponse.data.message);
+    }
+  }
+}