generator-jhipster 7.3.1 → 7.4.0

package/generators/client/templates/vue/package.json.ejs

@@ -66,27 +66,21 @@
     "ts-node": "8.10.1",
     "webdriver-manager": "12.1.8",
 <%_ } _%>
-    "babel-core": "<%= dependabotPackageJson.devDependencies['babel-core'] %>",
     "@types/jest": "<%= dependabotPackageJson.devDependencies['@types/jest'] %>",
     "@types/node": "<%= dependabotPackageJson.devDependencies['@types/node'] %>",
     "@types/sinon": "<%= dependabotPackageJson.devDependencies['@types/sinon'] %>",
     "@types/vuelidate": "<%= dependabotPackageJson.devDependencies['@types/vuelidate'] %>",
     "@typescript-eslint/eslint-plugin": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/eslint-plugin'] %>",
     "@typescript-eslint/parser": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/parser'] %>",
-    "@vue/cli-plugin-eslint": "<%= dependabotPackageJson.devDependencies['@vue/cli-plugin-eslint'] %>",
-    "@vue/cli-plugin-typescript": "<%= dependabotPackageJson.devDependencies['@vue/cli-plugin-typescript'] %>",
-    "@vue/cli-service": "<%= dependabotPackageJson.devDependencies['@vue/cli-service'] %>",
     "@vue/eslint-config-prettier": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-prettier'] %>",
     "@vue/eslint-config-typescript": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-typescript'] %>",
     "@vue/test-utils": "<%= dependabotPackageJson.devDependencies['@vue/test-utils'] %>",
     "axios-mock-adapter": "<%= dependabotPackageJson.devDependencies['axios-mock-adapter'] %>",
     "autoprefixer": "<%= dependabotPackageJson.devDependencies['autoprefixer'] %>",
-    "browser-sync": "<%= dependabotPackageJson.devDependencies['browser-sync'] %>",
     "browser-sync-webpack-plugin": "<%= dependabotPackageJson.devDependencies['browser-sync-webpack-plugin'] %>",
     "copy-webpack-plugin": "<%= dependabotPackageJson.devDependencies['copy-webpack-plugin'] %>",
     "css-loader": "<%= dependabotPackageJson.devDependencies['css-loader'] %>",
     "css-minimizer-webpack-plugin": "<%= dependabotPackageJson.devDependencies['css-minimizer-webpack-plugin'] %>",
-    "file-loader": "<%= dependabotPackageJson.devDependencies['file-loader'] %>",
     "fork-ts-checker-webpack-plugin": "<%= dependabotPackageJson.devDependencies['fork-ts-checker-webpack-plugin'] %>",
 <%_ if (!skipJhipsterDependencies) { _%>
     "generator-jhipster": "<%= packagejs.version %>",
@@ -106,7 +100,6 @@
 <%_ } _%>
     "mini-css-extract-plugin": "<%= dependabotPackageJson.devDependencies['mini-css-extract-plugin'] %>",
     "numeral": "<%= dependabotPackageJson.devDependencies['numeral'] %>",
-    "postcss": "<%= dependabotPackageJson.devDependencies['postcss'] %>",
     "postcss-import": "<%= dependabotPackageJson.devDependencies['postcss-import'] %>",
     "postcss-loader": "<%= dependabotPackageJson.devDependencies['postcss-loader'] %>",
     "postcss-url": "<%= dependabotPackageJson.devDependencies['postcss-url'] %>",
@@ -129,8 +122,11 @@
     "eslint-plugin-prettier": "<%= dependabotPackageJson.devDependencies['eslint-plugin-prettier'] %>",
     "eslint-plugin-vue": "<%= dependabotPackageJson.devDependencies['eslint-plugin-vue'] %>",
     "typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",
-    "url-loader": "<%= dependabotPackageJson.devDependencies['url-loader'] %>",
+<%_ if (microfrontend) { _%>
+    "@vue/vue2-jest": "<%= dependabotPackageJson.devDependencies['@vue/vue2-jest'] %>",
+<%_ } else { _%>
     "vue-jest": "<%= dependabotPackageJson.devDependencies['vue-jest'] %>",
+<%_ } _%>
     "vue-loader": "<%= dependabotPackageJson.devDependencies['vue-loader'] %>",
     "vue-template-compiler": "<%= dependabotPackageJson.dependencies['vue'] %>",
     "webpack": "<%= dependabotPackageJson.devDependencies['webpack'] %>",
@@ -150,14 +146,15 @@
   "scripts": {
     "prettier:check": "prettier --check \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
     "prettier:format": "prettier --write \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
-    "lint": "vue-cli-service lint --no-fix",
-    "lint:fix": "vue-cli-service lint",
+    "lint": "eslint . --ext .ts,.vue ",
+    "lint:fix": "eslint . --ext .ts,.vue --fix",
     "cleanup": "rimraf <%= DIST_DIR %>",
     "clean-www": "rimraf <%= DIST_DIR %>app/{src,<%= BUILD_DIR %>}",
     "start": "<%= clientPackageManager %> run webapp:dev --",
     "start-tls": "<%= clientPackageManager %> run webapp:dev -- --env.tls",
     "serve": "<%= clientPackageManager %> run start --",
     "build": "<%= clientPackageManager %> run webapp:prod --",
+    "build-watch": "concurrently 'npm run webapp:build:dev -- --watch'<% if(!skipServer) { %> npm:backend:start<% } %>",
 <%_ if (protractorTests && !cypressTests) { _%>
     "e2e": "<%= clientPackageManager %> run e2e:protractor --",
     "e2e:headless": "<%= clientPackageManager %> run e2e:protractor:headless --",
@@ -184,6 +181,7 @@
     "test": "<%= clientPackageManager %> run jest --",
     "test-ci": "<%= clientPackageManager %> run lint && <%= clientPackageManager %> run jest:update --",
     "test:watch": "<%= clientPackageManager %> run jest -- --watch",
+    "watch": "concurrently npm:start<% if(!skipServer) { %> npm:backend:start<% } %>",
     "webapp:build": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:dev --",
     "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --mode development --progress=profile --env stats=minimal",
     "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --mode production --progress=profile --env stats=minimal",

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

@@ -88,9 +88,8 @@ export default class AccountService {
       const token = <%_ if (authenticationTypeJwt) { _%> localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken'); <%_ } else { _%> this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN'); <%_ } _%>
       if (!this.store.getters.account && !this.store.getters.logon && token) {
         return this.retrieveAccount();
-      } else {
-        return Promise.resolve(false);
       }
+      return Promise.resolve(false);
     }
 
     for (const authority of authorities) {

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

@@ -3,7 +3,13 @@
     <div class="row justify-content-center">
       <div class="col-md-8 toastify-container">
         <h2 v-if="username" id="settings-title">
-          <span v-html="$t('settings.title', { 'username': username })">User settings for [<strong>{{username}}</strong>]</span>
+          <span v-html="$t('settings.title', { 'username': username })">
+            User settings for [
+            <strong>
+              {{username}}
+            </strong>
+            ]
+          </span>
         </h2>
 
         <div class="alert alert-success" role="alert" v-if="success" v-html="$t('settings.messages.success')">

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

@@ -17,7 +17,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="entry in orderBy(filterBy(configuration, filtered), orderProp, reverse === true ? 1 : -1)"
+          <tr v-for="entry in orderBy(filterBy(configuration, filtered), orderProp, reverse ? 1 : -1)"
             :key="entry.prefix">
             <td>
               <span>{{ entry.prefix }}</span>

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

@@ -107,7 +107,7 @@ export default class <%=jhiPrefixCapitalized%>Metrics extends Vue {
         } else {
           plural = '';
         }
-        time_string += Math.floor(ms / times[key]).toString() + ' ' + key.toString() + plural + ' ';
+        time_string += `${Math.floor(ms / times[key])} ${key}${plural} `;
         ms = ms - times[key] * Math.floor(ms / times[key]);
       }
     }

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

@@ -5,7 +5,18 @@ import AccountService from '@/account/account.service';
 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;

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/client/templates/vue/src/main/webapp/app/index.ts.ejs

@@ -0,0 +1,19 @@
+<%#
+ 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.
+-%>
+import('./main');

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

@@ -11,6 +11,19 @@ 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;
@@ -19,23 +32,27 @@ export default class TranslationService {
       this.i18n.setLocaleMessage(currentLanguage, {});
       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

@@ -26,6 +26,7 @@ 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';
@@ -122,9 +123,13 @@ new Vue({
 <%_ } _%>
     // jhipster-needle-add-entity-service-to-main - JHipster will import entities services here
     accountService: () => accountService,
-    alertService: () => new AlertService()
-
+    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/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/shims-vue.d.ts.ejs

@@ -16,16 +16,6 @@
  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;
-<%_ } _%>
-
 declare module '*.vue' {
   import Vue from 'vue';
   export default Vue;

package/generators/client/templates/vue/src/test/javascript/jest.conf.js.ejs

@@ -1,38 +1,49 @@
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
 const config = require('../../../webpack/config');
+const { compilerOptions: { paths = {}, baseUrl = './' } } = require('../../../tsconfig.json');
 
 module.exports = {
+  rootDir: '../../../',
+  roots: ['<rootDir>', `<rootDir>/${baseUrl}`, `<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/app/`],
+  preset: 'ts-jest',
   testEnvironment: 'jsdom',
   coverageDirectory: '<rootDir>/<%= BUILD_DIR %>test-results/',
   coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/<%= CLIENT_TEST_SRC_DIR %>', '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/router', '.*.json'],
   moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
   transform: {
-    '.*\\.(vue)$': 'vue-jest',
-    '^.+\\.tsx?$': 'ts-jest'
+    '.*\\.(vue)$': '<%= microfrontend ? '@vue/vue2-jest' : 'vue-jest' %>',
+    '^.+\\.tsx?$': 'ts-jest',
   },
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/$1'
+    '^@/(.*)$': '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/$1',
+    ...pathsToModuleNameMapper(paths, { prefix: `<rootDir>/${baseUrl}/` }),
+<%_ if (applicationTypeGateway) { _%>
+    '^@(<%= remotes.map(remote => remote.lowercaseBaseName).join('|') %>)/(.*)$': '<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/app/microfrontends/$2',
+<%_ } _%>
   },
   reporters: [
     'default',
-    [ 'jest-junit', { outputDirectory: './<%= BUILD_DIR %>test-results/', outputName: 'TESTS-results-jest.xml' } ]
+    [ 'jest-junit', { outputDirectory: './<%= BUILD_DIR %>test-results/', outputName: 'TESTS-results-jest.xml' } ],
   ],
   testResultsProcessor: 'jest-sonar-reporter',
   testMatch: ['<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/**/@(*.)@(spec.ts)'],
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
-  rootDir: '../../../',
   globals: {
 <%_ if (enableTranslation) { _%>
     I18N_HASH: 'generated_hash',
 <%_ } _%>
     SERVER_API_URL: config.serverApiUrl,
     VERSION: config.version,
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
   },
   coverageThreshold: {
     global: {
       statements: 80,
       branches: 60,
       functions: 70,
-      lines: 80
-    }
-  }
+      lines: 80,
+    },
+  },
 };

package/generators/client/templates/vue/src/test/javascript/spec/app/entities/entities-menu.spec.ts.ejs

@@ -0,0 +1,52 @@
+import { createLocalVue, shallowMount, Wrapper } from '@vue/test-utils';
+import EntitiesMenu from '@/entities/entities-menu.vue';
+import EntitiesMenuClass from '@/entities/entities-menu.component';
+import * as config from '@/shared/config/config';
+
+const localVue = createLocalVue();
+config.initVueApp(localVue);
+const i18n = config.initI18N(localVue);
+localVue.component('b-dropdown-item', {});
+localVue.component('font-awesome-icon', {});
+
+describe('EntitiesMenu', () => {
+  let translationService;
+
+  beforeEach(() => {
+    translationService = { loadTranslations: jest.fn() };
+  });
+
+  describe('using microfrontendI18n', () => {
+    beforeEach(() => {
+      shallowMount<EntitiesMenuClass>(EntitiesMenu, {
+        i18n,
+        localVue,
+        provide: {
+          translationService: () => translationService,
+          microfrontendI18n: true,
+        },
+      });
+    });
+
+    it('should load translations', () => {
+      expect(translationService.loadTranslations).toHaveBeenCalled();
+    });
+  });
+
+  describe('not using microfrontendI18n', () => {
+    beforeEach(() => {
+      shallowMount<EntitiesMenuClass>(EntitiesMenu, {
+        i18n,
+        localVue,
+        provide: {
+          translationService: () => translationService,
+          microfrontendI18n: false,
+        },
+      });
+    });
+
+    it('should not load translations', () => {
+      expect(translationService.loadTranslations).not.toHaveBeenCalled();
+    });
+  });
+});

package/generators/client/templates/vue/src/test/javascript/spec/app/microfrontends/entities-menu.component.ts.ejs

@@ -0,0 +1,4 @@
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class EntitiesMenu extends Vue {}

package/generators/client/templates/vue/src/test/javascript/spec/app/microfrontends/entities-menu.vue.ejs

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <!-- 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/test/javascript/spec/app/microfrontends/entities-router.ts.ejs

@@ -0,0 +1 @@
+export default [];

package/generators/client/templates/vue/tsconfig.json.ejs

@@ -1,5 +1,7 @@
 {
     "compilerOptions": {
+        "baseUrl": "<%= CLIENT_MAIN_SRC_DIR %>app",
+        "outDir": "<%= BUILD_DIR %>out-tsc/dist",
         "target": "es5",
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
@@ -8,25 +10,19 @@
         "sourceMap": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
-        "removeComments": false,
-        "noImplicitAny": false,
-        "skipLibCheck": true,
-        "suppressImplicitAnyIndexErrors": true,
-        "outDir": "<%= DIST_DIR %>app",
         "lib": ["es7", "dom"],
         "typeRoots": [
             "node_modules/@types"
         ],
-        "baseUrl": "./",
         "paths": {
-            "@/*": ["<%= CLIENT_MAIN_SRC_DIR %>app/*"]
+            "@/*": ["*"]
         },
+        types: ["node"],
         "importHelpers": false,
         "allowJs": true
     },
     "include": [
-        "<%= CLIENT_MAIN_SRC_DIR %>app",
-        "<%= CLIENT_TEST_SRC_DIR %>spec"
+        "<%= CLIENT_MAIN_SRC_DIR %>app"
     ],
     "exclude": ["node_modules"<% if (!cypressTests) { %>,"<%= CLIENT_TEST_SRC_DIR %>cypress"<% } %>]
 }