generator-jhipster 8.0.0 → 8.2.0

package/dist/generators/vue/resources/package.json

@@ -1,71 +1,71 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.4.2",
-    "@fortawesome/free-solid-svg-icons": "6.4.2",
-    "@fortawesome/vue-fontawesome": "3.0.3",
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/vue-fontawesome": "3.0.6",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "10.5.0",
-    "axios": "1.6.0",
+    "@vueuse/core": "10.9.0",
+    "axios": "1.6.8",
     "bootstrap": "4.6.2",
     "bootstrap-vue": "2.23.1",
-    "bootswatch": "5.3.2",
+    "bootswatch": "4.6.2",
     "deepmerge": "4.3.1",
     "js-cookie": "3.0.5",
     "pinia": "2.1.7",
-    "vue": "3.3.7",
-    "vue-i18n": "9.6.2",
-    "vue-router": "4.2.5"
+    "vue": "3.4.21",
+    "vue-i18n": "9.10.2",
+    "vue-router": "4.3.0"
   },
   "devDependencies": {
     "@module-federation/utilities": "3.0.3-0",
     "@pinia/testing": "0.1.3",
-    "@rushstack/eslint-patch": "1.5.1",
+    "@rushstack/eslint-patch": "1.8.0",
     "@tsconfig/node18": "18.2.2",
-    "@types/node": "18.18.8",
-    "@types/sinon": "10.0.20",
-    "@vitejs/plugin-vue": "4.4.0",
-    "@vue/eslint-config-prettier": "8.0.0",
+    "@types/node": "20.11.25",
+    "@types/sinon": "17.0.3",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vue/eslint-config-prettier": "9.0.0",
     "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/test-utils": "2.4.1",
-    "@vue/tsconfig": "0.4.0",
-    "autoprefixer": "10.4.16",
+    "@vue/test-utils": "2.4.5",
+    "@vue/tsconfig": "0.5.1",
+    "autoprefixer": "10.4.18",
     "axios-mock-adapter": "1.22.0",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.8.1",
-    "css-minimizer-webpack-plugin": "5.0.1",
-    "eslint": "8.52.0",
-    "eslint-plugin-prettier": "5.0.1",
+    "copy-webpack-plugin": "12.0.2",
+    "css-loader": "6.10.0",
+    "css-minimizer-webpack-plugin": "6.0.0",
+    "eslint": "8.57.0",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-vue": "8.7.1",
     "flush-promises": "1.0.2",
     "folder-hash": "4.0.4",
-    "happy-dom": "12.10.3",
-    "html-webpack-plugin": "5.5.3",
+    "happy-dom": "14.0.0",
+    "html-webpack-plugin": "5.6.0",
     "merge-jsons-webpack-plugin": "2.0.1",
-    "mini-css-extract-plugin": "2.7.6",
+    "mini-css-extract-plugin": "2.8.1",
     "numeral": "2.0.6",
-    "postcss-import": "15.1.0",
-    "postcss-loader": "7.3.3",
+    "postcss-import": "16.0.1",
+    "postcss-loader": "8.1.1",
     "postcss-url": "10.1.3",
     "rimraf": "5.0.5",
-    "rollup-plugin-copy": "3.5.0",
-    "sass": "1.69.5",
-    "sass-loader": "13.3.2",
+    "sass": "1.72.0",
+    "sass-loader": "14.1.1",
     "sinon": "17.0.1",
-    "terser-webpack-plugin": "5.3.9",
-    "ts-loader": "9.5.0",
-    "typescript": "5.2.2",
-    "vite": "4.5.0",
-    "vitest": "0.34.6",
-    "vitest-sonar-reporter": "0.5.0",
-    "vue-loader": "17.3.1",
+    "terser-webpack-plugin": "5.3.10",
+    "ts-loader": "9.5.1",
+    "typescript": "5.4.2",
+    "vite": "5.1.6",
+    "vite-plugin-static-copy": "1.0.1",
+    "vitest": "1.4.0",
+    "vitest-sonar-reporter": "2.0.0",
+    "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
-    "vue-tsc": "1.8.22",
-    "webpack": "5.89.0",
-    "webpack-bundle-analyzer": "4.9.1",
+    "vue-tsc": "2.0.6",
+    "webpack": "5.90.3",
+    "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.0.4",
     "webpack-merge": "5.10.0",
     "workbox-webpack-plugin": "7.0.0"
   }

package/dist/generators/vue/support/convert-translation.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright 2013-2024 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 { passthrough } from '@yeoman/transform';
+import { Minimatch } from 'minimatch';
+export function convertVueTranslations(body) {
+    return body.replace(/\{\{\s*(\w+)\s*\}\}/g, '{ $1 }').replace(/([@|||$])/g, "{'$1'}");
+}
+const convertTranslationsSupport = ({ clientSrcDir }) => {
+    const minimatch = new Minimatch(`**/${clientSrcDir}i18n/**/*.json`);
+    const isTranslationFile = (file) => minimatch.match(file.path);
+    const transform = passthrough(file => {
+        if (isTranslationFile(file)) {
+            file.contents = Buffer.from(convertVueTranslations(file.contents.toString()));
+        }
+    });
+    return { transform, isTranslationFile };
+};
+export default convertTranslationsSupport;

package/dist/generators/vue/support/index.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2013-2024 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.
+ */
+export { default as convertTranslationsSupport } from './convert-translation.js';
+export * from './needles.js';
+export * from './translate-vue.js';
+export { default as translateVueFilesTransform } from './translate-vue.js';
+export { default as updateLanguagesTask } from './update-languages.js';

package/dist/generators/vue/support/needles.js

@@ -0,0 +1,19 @@
+export {};
+/**
+ * Copyright 2013-2024 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.
+ */

package/dist/generators/vue/support/translate-vue.js

@@ -0,0 +1,142 @@
+/**
+ * Copyright 2013-2024 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 { passthrough } from '@yeoman/transform';
+import { Minimatch } from 'minimatch';
+function replaceTranslationAttributes({ content, getWebappTranslation }) {
+    return content.replaceAll(/v-bind:(?<tag>(?:placeholder|title|label))="(?<translate>t\$\([^"]+\))"/g, (_complete, ...args) => {
+        const groups = args.pop();
+        if (groups.translate.includes('+')) {
+            return '';
+        }
+        const translated = replaceTranslations({ content: groups.translate, type: 'vue', getWebappTranslation });
+        return `${groups.tag}="${translated}"`;
+    });
+}
+export function removeDeclarations({ content }) {
+    return content
+        .replaceAll(/\nimport {\s*useI18n\s*} from 'vue-i18n';/g, '')
+        .replaceAll(/\n\s*t\$,/g, '')
+        .replaceAll(/\n\s*t\$:\s*useI18n\(\).t,/g, '');
+}
+export function replaceTranslationTags({ body, enableTranslation, getWebappTranslation, }) {
+    body = body.replaceAll(/(?<tagWithAttributes>(?<beforeTranslateTag><(?<tagName>a|b-(?:badge|link|button|alert)|button|div|h[1-9]|input|label|p|router-link|small|span|t[hd])(?:[^>]*)) v-(?:text|html)="(?<translate>t\$\([^)]*\))"(?<afterTranslateTag>(?:(?!\/?>)[^/>])*>))(?<tagContent>(?:(?!<\/\k<tagName>(?:>|\s|\n)).|\n)*)/g, (_complete, ...args) => {
+        const groups = args.pop();
+        if (new RegExp(`<${groups.tagName}[\\s>]`, 'g').test(groups.tagContent)) {
+            throw new Error(`Nested tags identical to the translated tag are not supported: ${groups.tagWithAttributes}${groups.tagContent}`);
+        }
+        if (enableTranslation) {
+            return groups.tagWithAttributes;
+        }
+        if (groups.translate) {
+            if (groups.translate.includes('+')) {
+                this?.log.info(`Ignoring dynamic translation ${groups.translate}`);
+            }
+            else {
+                const translated = replaceTranslations({
+                    type: 'vue',
+                    content: groups.translate,
+                    getWebappTranslation,
+                });
+                if (translated !== groups.translate) {
+                    return `${groups.beforeTranslateTag}${groups.afterTranslateTag}${translated}`;
+                }
+                throw new Error(`${translated}, ${groups.translate}`);
+            }
+        }
+        return `${groups.beforeTranslateTag}${groups.afterTranslateTag}${groups.tagContent}`;
+    });
+    if (enableTranslation) {
+        return body;
+    }
+    return replaceTranslationAttributes({ content: body, getWebappTranslation });
+}
+export function replaceTranslations({ content, type, getWebappTranslation, }) {
+    const regex = type === 'ts'
+        ? /(?:this.)?(t\$|i18n.t)\((?<key>[^),]*)(?:,\s*{(?<data>[^)]*)})?\)\.toString\(\)/g
+        : /t\$\((?<key>[^),]*)(?:,\s*{(?<data>[^)]*)})?\)/g;
+    return content.replaceAll(regex, (_complete, ...args) => {
+        const groups = args.pop();
+        const key = groups.key.substring(1, groups.key.length - 1).replaceAll("\\'", "'");
+        let data;
+        if (groups.data) {
+            const interpolateMatches = groups.data.matchAll(/(?<field>[^{\s:,}]+)(?:\s*:\s*(?<value>[^,}]+))?/g);
+            data = {};
+            let templateLiteral = false;
+            for (const interpolateMatch of interpolateMatches) {
+                let { field, value } = interpolateMatch.groups || {};
+                if (/^'.*'$/.test(field) || /^".*"$/.test(field)) {
+                    // unwrap field
+                    field = field.substring(1, field.length - 1);
+                }
+                if (value === undefined) {
+                    value = field;
+                }
+                value = value.trim();
+                if (/^\d+$/.test(value)) {
+                    // convert integer
+                    value = parseInt(value, 10);
+                }
+                else if (/^'.*'$/.test(value) || /^".*"$/.test(value)) {
+                    // extract string value
+                    value = value.substring(1, value.length - 1);
+                }
+                else {
+                    // wrap expression
+                    if (type === 'vue') {
+                        value = `{{ ${value} }}`;
+                    }
+                    else {
+                        value = `\${${value}}`;
+                    }
+                    templateLiteral = true;
+                }
+                data[field] = value;
+            }
+            if (templateLiteral && type === 'ts') {
+                return `\`${getWebappTranslation(key, data)}\``;
+            }
+        }
+        if (type === 'vue') {
+            return getWebappTranslation(key, data);
+        }
+        return `'${getWebappTranslation(key, data)}'`;
+    });
+}
+const minimatch = new Minimatch('**/*.{vue,ts}');
+export const isTranslatedVueFile = file => minimatch.match(file.path);
+function translateVueFilesTransform({ enableTranslation, getWebappTranslation, }) {
+    return passthrough(file => {
+        let newContent;
+        if (file.path.endsWith('.vue')) {
+            newContent = replaceTranslationTags.call(this, { body: file.contents.toString(), enableTranslation, getWebappTranslation });
+        }
+        else if (!enableTranslation && file.path.endsWith('.ts')) {
+            newContent = replaceTranslations({ type: 'ts', content: file.contents.toString(), getWebappTranslation });
+            newContent = removeDeclarations({ content: newContent });
+        }
+        if (newContent) {
+            if (!enableTranslation && newContent.includes('t$')) {
+                throw new Error(`Could not translate ${file.path}:
+${newContent}`);
+            }
+            file.contents = Buffer.from(newContent);
+        }
+    });
+}
+export default translateVueFilesTransform;

package/dist/generators/vue/support/update-languages.js

@@ -0,0 +1,64 @@
+import { updateLanguagesInDayjsConfigurationTask } from '../../client/support/update-languages.js';
+import { generateLanguagesWebappOptions } from '../../languages/support/index.js';
+function generateDateTimeFormat(language, index, length) {
+    let config = `  '${language}': {\n`;
+    config += '    short: {\n';
+    config += "      year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric'\n";
+    config += '    },\n';
+    config += '    medium: {\n';
+    config += "      year: 'numeric', month: 'short', day: 'numeric',\n";
+    config += "      weekday: 'short', hour: 'numeric', minute: 'numeric'\n";
+    config += '    },\n';
+    config += '    long: {\n';
+    config += "      year: 'numeric', month: 'long', day: 'numeric',\n";
+    config += "      weekday: 'long', hour: 'numeric', minute: 'numeric'\n";
+    config += '    }\n';
+    config += '  }';
+    if (index !== length - 1) {
+        config += ',';
+    }
+    config += '\n';
+    return config;
+}
+function updateLanguagesInPipeTask({ application, control = {} }) {
+    const { clientSrcDir, languagesDefinition = [] } = application;
+    const { ignoreNeedlesError: ignoreNonExisting } = control;
+    const newContent = `$1{
+  ${generateLanguagesWebappOptions(languagesDefinition).join(',\n  ')},
+  // jhipster-needle-i18n-language-key-pipe - JHipster will add/remove languages in this object
+    }`;
+    this.editFile(`${clientSrcDir}app/shared/config/languages.ts`, { ignoreNonExisting }, content => content.replace(/(languages =.*)\{([^\]]*jhipster-needle-i18n-language-key-pipe[^}]*)}/g, newContent));
+}
+function updateLanguagesInConfigTask({ application, control = {} }) {
+    const { clientSrcDir, languages } = application;
+    const { ignoreNeedlesError: ignoreNonExisting } = control;
+    // Add i18n config snippets for all languages
+    let i18nConfig = 'const datetimeFormats: IntlDateTimeFormats = {\n';
+    languages?.forEach((ln, i) => {
+        i18nConfig += generateDateTimeFormat(ln, i, languages.length);
+    });
+    i18nConfig += '  // jhipster-needle-i18n-language-date-time-format - JHipster will add/remove format options in this object\n';
+    i18nConfig += '}';
+    this.editFile(`${clientSrcDir}app/shared/config/config.ts`, { ignoreNonExisting }, content => content.replace(/const datetimeFormats.*\{([^\]]*jhipster-needle-i18n-language-date-time-format[^}]*)}/g, i18nConfig));
+}
+function updateLanguagesInWebpackTask({ application, control = {} }) {
+    const { clientSrcDir, languages } = application;
+    const { ignoreNeedlesError: ignoreNonExisting } = control;
+    let newContent = 'groupBy: [\n';
+    languages?.forEach(language => {
+        newContent += `          { pattern: './${clientSrcDir}i18n/${language}/*.json', fileName: './i18n/${language}.json' },\n`;
+    });
+    newContent += '          // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array\n        ]';
+    this.editFile('webpack/webpack.common.js', { ignoreNonExisting }, content => content.replace(/groupBy:.*\[([^\]]*jhipster-needle-i18n-language-webpack[^\]]*)\]/g, newContent));
+}
+export default function updateLanguagesTask(taskParam) {
+    updateLanguagesInPipeTask.call(this, taskParam);
+    updateLanguagesInConfigTask.call(this, taskParam);
+    if (taskParam.application.microfrontend) {
+        updateLanguagesInWebpackTask.call(this, taskParam);
+    }
+    updateLanguagesInDayjsConfigurationTask.call(this, taskParam, {
+        configurationFile: `${taskParam.application.clientSrcDir}app/shared/config/dayjs.ts`,
+        commonjs: true,
+    });
+}

package/dist/generators/vue/templates/.eslintrc.cjs.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2023 the original author or authors from the JHipster project.
+ Copyright 2013-2024 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.

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

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2023 the original author or authors from the JHipster project.
+ Copyright 2013-2024 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.
@@ -59,7 +59,7 @@
     "@module-federation/utilities": "<%= nodeDependencies['@module-federation/utilities'] %>",
 <%_ } _%>
 <%_ if (microfrontend) { _%>
-    "@originjs/vite-plugin-federation": "1.2.3",
+    "@originjs/vite-plugin-federation": "1.3.3",
     "browser-sync-webpack-plugin": "<%= nodeDependencies['browser-sync-webpack-plugin'] %>",
     "copy-webpack-plugin": "<%= nodeDependencies['copy-webpack-plugin'] %>",
     "css-loader": "<%= nodeDependencies['css-loader'] %>",
@@ -88,7 +88,6 @@
     "@types/node": "<%= nodeDependencies['@types/node'] %>",
     "@types/sinon": "<%= nodeDependencies['@types/sinon'] %>",
     "@tsconfig/node18": null,
-    "@vue/compiler-sfc": "<%= nodeDependencies.vue %>",
     "@vitejs/plugin-vue": "<%= nodeDependencies['@vitejs/plugin-vue'] %>",
     "@vitest/coverage-v8": "<%= nodeDependencies.vitest %>",
     "@vue/eslint-config-prettier": "<%= nodeDependencies['@vue/eslint-config-prettier'] %>",
@@ -106,7 +105,6 @@
     "cypress": "<%= nodeDependencies['cypress'] %>",
 <%_ } _%>
     "rimraf": "<%= nodeDependencies['rimraf'] %>",
-    "rollup-plugin-copy": null,
     "sass": "<%= nodeDependencies['sass'] %>",
     "sinon": "<%= nodeDependencies['sinon'] %>",
     "swagger-ui-dist": "<%= nodeDependencies['swagger-ui-dist'] %>",
@@ -116,6 +114,7 @@
     "typescript": "<%= nodeDependencies['typescript'] %>",
     "vite": null,
     "vitest": "<%= nodeDependencies.vitest %>",
+    "vite-plugin-static-copy": null,
     "vitest-sonar-reporter": "<%= nodeDependencies['vitest-sonar-reporter'] %>"
   },
   "engines": {
@@ -156,6 +155,7 @@
 <%_ } else { %>
     "webapp:build:dev": "<%= clientPackageManager %> run vite-build",
     "webapp:build:prod": "<%= clientPackageManager %> run vite-build",
+    "webapp:dev": "<%= clientPackageManager %> run vite-serve",
     "webapp:serve": "<%= clientPackageManager %> run vite-serve",
 <%_ } %>
     "webapp:prod": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:prod --",

package/dist/generators/vue/templates/src/main/webapp/app/account/sessions/sessions.component.ts.ejs

@@ -35,7 +35,7 @@ export default defineComponent({
   },
   methods: {    
     retrieveSessions() {
-      return axios.get('api/account/sessions/').then(response => {
+      return axios.get('api/account/sessions').then(response => {
         this.error = null;
         this.sessions = response.data;
       });

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

@@ -29,7 +29,10 @@ export default class UserManagementService {
 
   public retrieveAuthorities(): Promise<any> {
 <%_ if (!databaseTypeCassandra) { _%>
-    return axios.get('api/authorities');
+    return axios.get('api/authorities').then(response => {
+      response.data = response.data.map(authority => authority.name);
+      return response;
+    });
 <%_ } else { _%>
     return Promise.resolve([Authority.USER, Authority.ADMIN]);
 <%_ } _%>

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

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2023 the original author or authors from the JHipster project.
+ Copyright 2013-2024 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.

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

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2023 the original author or authors from the JHipster project.
+ Copyright 2013-2024 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.

package/dist/generators/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.component.spec.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2023 the original author or authors from the JHipster project.
+ Copyright 2013-2024 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.
@@ -39,7 +39,7 @@ vitest.mock('vue-router', () => ({
   useRouter: () => ({ go: routerGoMock }),
 }));
 
-const <%= entityInstance %>Sample = { id: <%- tsKeyId %> };
+const <%= entityInstance %>Sample = { <%= primaryKey.name %>: <%- tsKeyId %> };
 
 describe('Component Tests', () => {
   let alertService: AlertService;

package/dist/generators/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.component.ts.ejs

@@ -33,9 +33,9 @@ export default defineComponent({
     const previousState = () => router.go(-1);
     const <%= entityInstance %>: Ref<I<%= entityAngularName %>> = ref({});
 
-    const retrieve<%= entityAngularName %> = async <%= entityInstance %>Id => {
+    const retrieve<%= entityAngularName %> = async <%= entityInstance %><%= primaryKey.nameCapitalized %> => {
       try {
-        const res = await <%= entityInstance %>Service().find(<%= entityInstance %>Id);
+        const res = await <%= entityInstance %>Service().find(<%= entityInstance %><%= primaryKey.nameCapitalized %>);
         <%= entityInstance %>.value = res;
       } catch (error) {
         alertService.showHttpError(error.response);

package/dist/generators/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.vue.ejs

@@ -2,7 +2,7 @@
     <div class="row justify-content-center">
         <div class="col-8">
             <div v-if="<%= entityInstance %>">
-                <h2 class="jh-entity-heading" data-cy="<%= entityInstance %>DetailsHeading"><span v-text="t$('<%= i18nKeyPrefix %>.detail.title')"><%= entityAngularName %></span> {{<%= entityInstance %>.id}}</h2>
+                <h2 class="jh-entity-heading" data-cy="<%= entityInstance %>DetailsHeading"><span v-text="t$('<%= i18nKeyPrefix %>.detail.title')"><%= entityAngularName %></span> {{<%= entityInstance %>.<%= primaryKey.name %>}}</h2>
                 <dl class="row jh-entity-details">
 <%_ for (field of fields.filter(field => !field.id)) {
     const fieldName = field.fieldName;
@@ -16,7 +16,7 @@
   <%_ } else if (field.fieldTypeBinary && field.blobContentTypeImage) { _%>
                         <div v-if="<%= entityInstance %>.<%= fieldName %>">
                             <a v-on:click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
-                                <img v-bind:src="'data:' + <%=entityInstance %>.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>.<%= fieldName %>" style="max-width: 100%;" alt="<%=entityInstance %> image"/>
+                                <img v-bind:src="'data:' + <%=entityInstance %>.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>.<%= fieldName %>" style="max-width: 100%;" alt="<%=entityInstance %>"/>
                             </a>
                             {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
                         </div>
@@ -35,7 +35,6 @@
                     </dd>
 <%_ } _%>
 <%_ for (relationship of relationships) {
-    const ownerSide = relationship.ownerSide;
     const relationshipName = relationship.relationshipName;
     const relationshipFieldName = relationship.relationshipFieldName;
     const relationshipFieldNamePlural = relationship.relationshipFieldNamePlural;
@@ -43,14 +42,14 @@
     const otherEntityName = relationship.otherEntityName;
     const otherEntityField = relationship.otherEntityField;
     const otherEntityAngularName = relationship.otherEntityAngularName; _%>
-  <%_ if (ownerSide) { _%>
+  <%_ if (relationship.persistableRelationship) { _%>
                     <dt>
                         <span v-text="t$('<%= i18nKeyPrefix %>.<%= relationshipName %>')"><%= relationshipNameHumanized %></span>
                     </dt>
                     <dd>
     <%_ if (relationship.otherEntityUser) { _%>
       <%_ if (relationship.relationshipManyToMany) { _%>
-                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.id">{{i > 0 ? ', ' : ''}}
+                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>">{{i > 0 ? ', ' : ''}}
                             {{<%= relationshipFieldName %>.<%= otherEntityField %>}}
                         </span>
       <%_ } else { _%>
@@ -58,12 +57,12 @@
       <%_ } _%>
     <%_ } else { _%>
       <%_ if (relationship.relationshipManyToMany) { _%>
-                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.id">{{i > 0 ? ', ' : ''}}
-                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= relationshipFieldName %>.id}}">{{<%= relationshipFieldName + "." + otherEntityField %>}}</router-link>
+                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>">{{i > 0 ? ', ' : ''}}
+                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>}}">{{<%= relationshipFieldName + "." + otherEntityField %>}}</router-link>
                         </span>
       <%_ } else { _%>
                         <div v-if="<%= entityInstance + '.' + relationshipFieldName %>">
-                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= entityInstance + "." + relationshipFieldName %>.id}}">{{<%= entityInstance + "." + relationshipFieldName + "." + otherEntityField %>}}</router-link>
+                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= entityInstance + "." + relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>}}">{{<%= entityInstance + "." + relationshipFieldName + "." + otherEntityField %>}}</router-link>
                         </div>
       <%_ } _%>
     <%_ } _%>
@@ -78,7 +77,7 @@
                     <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.back')"> Back</span>
                 </button>
 <%_ if (!readOnly) { _%>
-                <router-link v-if="<%= entityInstance %>.id" :to="{name: '<%= entityAngularName %>Edit', params: {<%= entityInstance %>Id: <%= entityInstance %>.id}}" custom v-slot="{ navigate }">
+                <router-link v-if="<%= entityInstance %>.<%= primaryKey.name %>" :to="{name: '<%= entityAngularName %>Edit', params: {<%= entityInstance %>Id: <%= entityInstance %>.<%= primaryKey.name %>}}" custom v-slot="{ navigate }">
                     <button @click="navigate" class="btn btn-primary">
                         <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.edit')"> Edit</span>
                     </button>

package/dist/generators/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.component.spec.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2023 the original author or authors from the JHipster project.
+ Copyright 2013-2024 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.
@@ -34,7 +34,7 @@ import AlertService from '@/shared/alert/alert.service';
 <%_
   const allRelationshipsThatNeedSelectOptions = Object
     .values(relationshipsByOtherEntity)
-    .map(relationships => relationships.filter(rel => rel.ownerSide))
+    .map(relationships => relationships.filter(rel => rel.persistableRelationship))
     .filter(relationships => relationships.length > 0);
 _%>
 <%_ for (const [relationship] of Object.values(allRelationshipsThatNeedSelectOptions)) { _%>
@@ -55,7 +55,7 @@ vitest.mock('vue-router', () => ({
   useRouter: () => ({ go: routerGoMock }),
 }));
 
-const <%= entityInstance %>Sample = { id: <%- tsKeyId %> };
+const <%= entityInstance %>Sample = { <%= primaryKey.name %>: <%- tsKeyId %> };
 
 describe('Component Tests', () => {
   let mountOptions: MountingOptions<<%= entityAngularName %>UpdateComponentType>['global'];