generator-jhipster 8.5.0 → 8.7.0

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

@@ -47,7 +47,7 @@ export default defineComponent({
     const router = useRouter();
     const store = useStore();
 
-    const version = 'v' + APP_VERSION;
+    const version = `v${APP_VERSION}`;
     const hasAnyAuthorityValues: Ref<any> = ref({});
 
     const openAPIEnabled = computed(() => store.activeProfiles.indexOf('api-docs') > -1);
@@ -117,13 +117,11 @@ export default defineComponent({
   },
   methods: {
     hasAnyAuthority(authorities: any): boolean {
-      this.accountService
-        .hasAnyAuthorityAndCheckAuth(authorities)
-        .then(value => {
-          if (this.hasAnyAuthorityValues[authorities] !== value) {
-            this.hasAnyAuthorityValues = { ...this.hasAnyAuthorityValues, [authorities]: value };
-          }
-        });
+      this.accountService.hasAnyAuthorityAndCheckAuth(authorities).then(value => {
+        if (this.hasAnyAuthorityValues[authorities] !== value) {
+          this.hasAnyAuthorityValues = { ...this.hasAnyAuthorityValues, [authorities]: value };
+        }
+      });
       return this.hasAnyAuthorityValues[authorities] ?? false;
     },
   },

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

@@ -11,8 +11,9 @@
       data-toggle="collapse"
       target="header-tabs"
       aria-expanded="false"
-      aria-label="Toggle navigation">
-        <font-awesome-icon icon="bars" />
+      aria-label="Toggle navigation"
+    >
+      <font-awesome-icon icon="bars" />
     </b-navbar-toggle>
 
     <b-collapse is-nav id="header-tabs">
@@ -23,12 +24,7 @@
             <span v-text="t$('global.menu.home')">Home</span>
           </span>
         </b-nav-item>
-        <b-nav-item-dropdown
-          right
-          id="entity-menu"
-          v-if="authenticated"
-          active-class="active" class="pointer"
-          data-cy="entity">
+        <b-nav-item-dropdown right id="entity-menu" v-if="authenticated" active-class="active" class="pointer" data-cy="entity">
           <template #button-content>
             <span class="navbar-dropdown-menu">
               <font-awesome-icon icon="th-list" />
@@ -47,17 +43,18 @@
           right
           id="admin-menu"
           v-if="hasAnyAuthority('ROLE_ADMIN') && authenticated"
-          :class="{'router-link-active': subIsActive('/admin')}"
+          :class="{ 'router-link-active': subIsActive('/admin') }"
           active-class="active"
           class="pointer"
-          data-cy="adminMenu">
+          data-cy="adminMenu"
+        >
           <template #button-content>
             <span class="navbar-dropdown-menu">
               <font-awesome-icon icon="users-cog" />
               <span class="no-bold" v-text="t$('global.menu.admin.main')">Administration</span>
             </span>
           </template>
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
           <b-dropdown-item to="/admin/gateway" active-class="active">
             <font-awesome-icon icon="road" />
             <span v-text="t$('global.menu.admin.gateway')">Gateway</span>
@@ -110,9 +107,13 @@
             <font-awesome-icon icon="flag" />
             <span class="no-bold" v-text="t$('global.menu.language')">Language</span>
           </template>
-          <b-dropdown-item v-for="(value, key) in languages" :key="`lang-${key}`" v-on:click="changeLanguage(key);"
-              :class="{ active: isActiveLanguage(key)}">
-            {{value.name}}
+          <b-dropdown-item
+            v-for="(value, key) in languages"
+            :key="`lang-${key}`"
+            @click="changeLanguage(key)"
+            :class="{ active: isActiveLanguage(key) }"
+          >
+            {{ value.name }}
           </b-dropdown-item>
         </b-nav-item-dropdown>
 <%_ } _%>
@@ -120,16 +121,15 @@
           right
           href="javascript:void(0);"
           id="account-menu"
-          :class="{'router-link-active': subIsActive('/account')}"
+          :class="{ 'router-link-active': subIsActive('/account') }"
           active-class="active"
           class="pointer"
-          data-cy="accountMenu">
+          data-cy="accountMenu"
+        >
           <template #button-content>
             <span class="navbar-dropdown-menu">
               <font-awesome-icon icon="user" />
-              <span class="no-bold" v-text="t$('global.menu.account.main')">
-                Account
-              </span>
+              <span class="no-bold" v-text="t$('global.menu.account.main')"> Account </span>
             </span>
           </template>
 <%_ if (generateUserManagement) { _%>
@@ -148,11 +148,11 @@
             <span v-text="t$('global.menu.account.sessions')">Sessions</span>
           </b-dropdown-item>
 <%_ } _%>
-          <b-dropdown-item data-cy="logout" v-if="authenticated"  v-on:click="logout()" id="logout" active-class="active">
+          <b-dropdown-item data-cy="logout" v-if="authenticated"  @click="logout()" id="logout" active-class="active">
             <font-awesome-icon icon="sign-out-alt" />
             <span v-text="t$('global.menu.account.logout')">Sign out</span>
           </b-dropdown-item>
-          <b-dropdown-item data-cy="login" v-if="!authenticated"  v-on:click="openLogin()" id="login" active-class="active">
+          <b-dropdown-item data-cy="login" v-if="!authenticated" @click="openLogin()" id="login" active-class="active">
             <font-awesome-icon icon="sign-in-alt" />
             <span v-text="t$('global.menu.account.login')">Sign in</span>
           </b-dropdown-item>
@@ -168,8 +168,7 @@
   </b-navbar>
 </template>
 
-<script lang="ts" src="./jhi-navbar.component.ts">
-</script>
+<script lang="ts" src="./jhi-navbar.component.ts"></script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>

package/dist/generators/vue/templates/src/main/webapp/app/core/ribbon/ribbon.component.ts.ejs

@@ -10,9 +10,7 @@ export default defineComponent({
   setup(prop) {
     const store = useStore();
     const ribbonEnv = computed(() => store.ribbonOnProfiles);
-    const ribbonEnabled = computed(
-      () => store.ribbonOnProfiles && store.activeProfiles.indexOf(store.ribbonOnProfiles) > -1
-    );
+    const ribbonEnabled = computed(() => store.ribbonOnProfiles && store.activeProfiles.indexOf(store.ribbonOnProfiles) > -1);
 
     return {
       ribbonEnv,

package/dist/generators/vue/templates/src/main/webapp/app/core/ribbon/ribbon.vue.ejs

@@ -8,36 +8,36 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-  /* ==========================================================================
+/* ==========================================================================
 Development Ribbon
 ========================================================================== */
-  .ribbon {
-    background-color: rgba(170, 0, 0, 0.5);
-    left: -3.5em;
-    -moz-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    overflow: hidden;
-    position: absolute;
-    top: 40px;
-    white-space: nowrap;
-    width: 15em;
-    z-index: 9999;
-    pointer-events: none;
-    opacity: 0.75;
-  }
+.ribbon {
+  background-color: rgba(170, 0, 0, 0.5);
+  left: -3.5em;
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  overflow: hidden;
+  position: absolute;
+  top: 40px;
+  white-space: nowrap;
+  width: 15em;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.75;
+}
 
-  .ribbon a {
-    color: #fff;
-    display: block;
-    font-weight: 400;
-    margin: 1px 0;
-    padding: 10px 50px;
-    text-align: center;
-    text-decoration: none;
-    text-shadow: 0 0 5px #444;
-    pointer-events: none;
-  }
-</style>
+.ribbon a {
+  color: #fff;
+  display: block;
+  font-weight: 400;
+  margin: 1px 0;
+  padding: 10px 50px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 0 5px #444;
+  pointer-events: none;
+}
+</style>

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

@@ -15,14 +15,14 @@
                         <span v-text="t$('<%= frontendAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %>)">{{<%= entityInstance %>.<%= fieldName %>}}</span>
   <%_ } 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 %>"/>
+                            <a @click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
+                                <img :src="'data:' + <%=entityInstance %>.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>.<%= fieldName %>" style="max-width: 100%;" alt="<%=entityInstance %>"/>
                             </a>
                             {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
                         </div>
   <%_ } else if (field.fieldTypeBinary && field.blobContentTypeAny) { _%>
                         <div v-if="<%= entityInstance %>.<%= fieldName %>">
-                            <a v-on:click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" v-text="t$('entity.action.open')">open</a>
+                            <a @click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" v-text="t$('entity.action.open')">open</a>
                             {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
                         </div>
   <%_ } else if (field.fieldTypeDuration) { _%>
@@ -71,7 +71,7 @@
 <%_ } _%>
                 </dl>
                 <button type="submit"
-                        v-on:click.prevent="previousState()"
+                        @click.prevent="previousState()"
                         class="btn btn-info"
                         data-cy="entityDetailsBackButton">
                     <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.back')"> Back</span>

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

@@ -1,7 +1,7 @@
 <template>
     <div class="row justify-content-center">
         <div class="col-8">
-            <form name="editForm" novalidate v-on:submit.prevent="save()" >
+            <form name="editForm" novalidate @submit.prevent="save()" >
                 <h2 id="<%= i18nKeyPrefix %>.home.createOrEditLabel" data-cy="<%= entityClass %>CreateUpdateHeading" v-text="t$('<%= i18nKeyPrefix %>.home.createOrEditLabel')">Create or edit a <%= entityAngularName %></h2>
                 <div>
                     <div class="form-group" v-if="<%= entityInstance %>.<%= primaryKey.name %>">
@@ -35,33 +35,33 @@ _%>
   <%_ if (field.fieldIsEnum) { _%>
                         <select class="form-control" name="<%= fieldName %>" :class="{'valid': !v$.<%= fieldName %>.$invalid, 'invalid': v$.<%= fieldName %>.$invalid }" v-model="v$.<%= fieldName %>.$model" id="<%= entityFileName %>-<%= fieldName %>" data-cy="<%= fieldName %>" <% if (field.fieldValidate === true && field.fieldValidateRules.includes('required')) { %> required<% } %>>
     <%_ const enumPrefix = frontendAppName + '.'+ fieldType; _%>
-                            <option v-for="<%= this._.lowerFirst(fieldType) %> in <%= this._.lowerFirst(fieldType)%>Values" :key="<%= this._.lowerFirst(fieldType) %>" v-bind:value="<%= this._.lowerFirst(fieldType) %>" v-bind:label="t$('<%= enumPrefix %>.'+<%= this._.lowerFirst(fieldType) %>)">{{ <%= this._.lowerFirst(fieldType) %> }}</option>
+                            <option v-for="<%= this._.lowerFirst(fieldType) %> in <%= this._.lowerFirst(fieldType)%>Values" :key="<%= this._.lowerFirst(fieldType) %>" :value="<%= this._.lowerFirst(fieldType) %>" :label="t$('<%= enumPrefix %>.'+<%= this._.lowerFirst(fieldType) %>)">{{ <%= this._.lowerFirst(fieldType) %> }}</option>
 
                         </select>
   <%_ } else { _%>
     <%_ if (field.fieldTypeBinary && !field.blobContentTypeText) { _%>
                         <div>
       <%_ if (field.blobContentTypeImage) { _%>
-                            <img v-bind:src="'data:' + <%=entityInstance %>.<%=fieldName%>ContentType + ';base64,' + <%=entityInstance %>.<%=fieldName%>" style="max-height: 100px;" v-if="<%= entityInstance %>.<%= fieldName %>" alt="<%=entityInstance %>"/>
+                            <img :src="'data:' + <%=entityInstance %>.<%=fieldName%>ContentType + ';base64,' + <%=entityInstance %>.<%=fieldName%>" style="max-height: 100px;" v-if="<%= entityInstance %>.<%= fieldName %>" alt="<%=entityInstance %>"/>
       <%_ } _%>
                             <div v-if="<%= entityInstance %>.<%= fieldName %>" class="form-text text-danger clearfix">
       <%_ if (field.blobContentTypeAny) { _%>
-                                <a class="pull-left" v-on:click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" v-text="t$('entity.action.open')">open</a><br>
+                                <a class="pull-left" @click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" v-text="t$('entity.action.open')">open</a><br>
                                 <span class="pull-left">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
       <%_ } else { _%>
                                 <span class="pull-left">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
       <%_ } _%>
       <%_ if (field.blobContentTypeImage) { _%>
-                                <button type="button" v-on:click="clearInputImage('<%= fieldName %>', '<%= fieldName %>ContentType', 'file_<%= fieldName %>')" class="btn btn-secondary btn-xs pull-right">
+                                <button type="button" @click="clearInputImage('<%= fieldName %>', '<%= fieldName %>ContentType', 'file_<%= fieldName %>')" class="btn btn-secondary btn-xs pull-right">
       <%_ } else { _%>
-                                <button type="button" v-on:click="<%= entityInstance %>.<%= fieldName %>=null;<%= entityInstance %>.<%= fieldName %>ContentType=null;"
+                                <button type="button" @click="<%= entityInstance %>.<%= fieldName %>=null;<%= entityInstance %>.<%= fieldName %>ContentType=null;"
                                         class="btn btn-secondary btn-xs pull-right">
       <%_ } _%>
                                     <font-awesome-icon icon="times"></font-awesome-icon>
                                 </button>
                             </div>
                             <label for="file_<%= fieldName %>" <% if (fieldTypeBlobContent === 'image') { %>v-text="t$('entity.action.addimage')"<% } else { %>v-text="t$('entity.action.addblob')"<% } %> class="btn btn-primary pull-right"></label>
-                            <input type="file" ref="file_<%= fieldName %>" id="file_<%= fieldName %>" style="display: none;" data-cy="<%= fieldName %>" v-on:change="setFileData($event, <%= entityInstance %>, '<%= fieldName %>', <% if (fieldTypeBlobContent === 'image') { %>true)" accept="image/*"<% } else { %>false)"<% } %>/>
+                            <input type="file" ref="file_<%= fieldName %>" id="file_<%= fieldName %>" style="display: none;" data-cy="<%= fieldName %>" @change="setFileData($event, <%= entityInstance %>, '<%= fieldName %>', <% if (fieldTypeBlobContent === 'image') { %>true)" accept="image/*"<% } else { %>false)"<% } %>/>
                         </div>
     <%_ } _%>
     <%_ if (field.fieldTypeLocalDate) { _%>
@@ -135,18 +135,18 @@ _%>
                         <label class="form-control-label" v-text="t$('<%= translationKey %>')" for="<%= entityFileName %>-<%= relationshipName %>"><%= relationshipNameHumanized %></label>
                         <select class="form-control" id="<%= entityFileName %>-<%= relationshipName %>" data-cy="<%= relationshipFieldName %>" name="<%= relationshipName %>" v-model="<%= entityInstance %>.<%=relationshipFieldName %>"<% if (relationshipRequired) { %> required<% } %>>
     <%_ if (!relationshipRequired) { _%>
-                            <option v-bind:value="null"></option>
+                            <option :value="null"></option>
     <%_ } else { _%>
-                            <option v-if="!<%= entityInstance %>.<%= relationshipName %>" v-bind:value="null" selected></option>
+                            <option v-if="!<%= entityInstance %>.<%= relationshipName %>" :value="null" selected></option>
     <%_ } _%>
-                            <option v-bind:value="<%= entityInstance %>.<%=relationshipFieldName %> && <%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %> === <%= entityInstance %>.<%=relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %> ? <%= entityInstance %>.<%=relationshipFieldName %> : <%=otherEntityName %>Option" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %>">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
+                            <option :value="<%= entityInstance %>.<%=relationshipFieldName %> && <%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %> === <%= entityInstance %>.<%=relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %> ? <%= entityInstance %>.<%=relationshipFieldName %> : <%=otherEntityName %>Option" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %>">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
                         </select>
                     </div>
   <%_ } else if (relationship.persistableRelationship) { _%>
                     <div class="form-group">
                         <label v-text="t$('<%= translationKey %>')" for="<%= entityFileName %>-<%= relationshipName %>"><%= relationshipNameHumanized %></label>
                         <select class="form-control" id="<%= entityFileName %>-<%= relationshipFieldNamePlural %>" data-cy="<%= relationshipFieldName %>" multiple name="<%= relationshipName %>" v-if="<%=entityInstance %>.<%=relationshipFieldNamePlural %> !== undefined" v-model="<%=entityInstance %>.<%=relationshipFieldNamePlural %>"<% if (relationshipRequired) { %> required<% } %>>
-                            <option v-bind:value="getSelected(<%=entityInstance %>.<%=relationshipFieldNamePlural %>, <%=otherEntityName %>Option, '<%= relationship.otherEntity.primaryKey.name %>')" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %>">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
+                            <option :value="getSelected(<%=entityInstance %>.<%=relationshipFieldNamePlural %>, <%=otherEntityName %>Option, '<%= relationship.otherEntity.primaryKey.name %>')" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %>">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
                         </select>
                     </div>
   <%_ } _%>
@@ -162,7 +162,7 @@ _%>
 <%_ } _%>
                 </div>
                 <div>
-                    <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" v-on:click="previousState()">
+                    <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" @click="previousState()">
                         <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.cancel')">Cancel</span>
                     </button>
                     <button type="submit" id="save-entity" data-cy="entityCreateSaveButton" :disabled="v$.$invalid || isSaving" class="btn btn-primary">

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

@@ -3,7 +3,7 @@
         <h2 id="page-heading" data-cy="<%= entityClass %>Heading">
             <span v-text="t$('<%= i18nKeyPrefix %>.home.title')" id="<%= entityFileName %>-heading"><%= entityClassPluralHumanized %></span>
             <div class="d-flex justify-content-end">
-                <button class="btn btn-info mr-2" v-on:click="handleSyncList" :disabled="isFetching">
+                <button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isFetching">
                     <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon> <span v-text="t$('<%= i18nKeyPrefix %>.home.refreshListLabel')">Refresh List</span>
                 </button>
 <%_ if (!readOnly) { _%>
@@ -21,15 +21,15 @@
 <%_ if (searchEngineAny) { _%>
         <div class="row">
             <div class="col-sm-12">
-                <form name="searchForm" class="form-inline" v-on:submit.prevent="search(currentSearch)">
+                <form name="searchForm" class="form-inline" @submit.prevent="search(currentSearch)">
                     <div class="input-group w-100 mt-3">
                         <input type="text" class="form-control" name="currentSearch" id="currentSearch"
-                            v-bind:placeholder="t$('<%= i18nKeyPrefix %>.home.search')"
+                            :placeholder="t$('<%= i18nKeyPrefix %>.home.search')"
                             v-model="currentSearch" />
-                        <button type="button" id="launch-search" class="btn btn-primary" v-on:click="search(currentSearch)">
+                        <button type="button" id="launch-search" class="btn btn-primary" @click="search(currentSearch)">
                             <font-awesome-icon icon="search"></font-awesome-icon>
                         </button>
-                        <button type="button" id="clear-search" class="btn btn-secondary" v-on:click="clear()"
+                        <button type="button" id="clear-search" class="btn btn-secondary" @click="clear()"
                             v-if="currentSearch">
                             <font-awesome-icon icon="trash"></font-awesome-icon>
                         </button>
@@ -46,14 +46,14 @@
             <table class="table table-striped" aria-describedby="<%= entityInstancePlural %>">
                 <thead>
                 <tr>
-                    <th scope="row"<% if (!paginationNo) { %> v-on:click="changeOrder('<%= primaryKey.name %>')"<% } %>><span v-text="t$('global.field.id')"><%= primaryKey.nameCapitalized %></span><% if (!paginationNo) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator><% } %></th>
+                    <th scope="row"<% if (!paginationNo) { %> @click="changeOrder('<%= primaryKey.name %>')"<% } %>><span v-text="t$('global.field.id')"><%= primaryKey.nameCapitalized %></span><% if (!paginationNo) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator><% } %></th>
 <%_ for (field of fields.filter(field => !field.id)) { _%>
-                    <th scope="row"<% if (!paginationNo) { %> v-on:click="changeOrder('<%= field.fieldName%>')"<% } %>><span v-text="t$('<%=`${i18nKeyPrefix}.${field.fieldName}` %>')"><%= field.fieldNameHumanized %></span><% if (!paginationNo) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'<%= field.fieldName%>'"></jhi-sort-indicator><% } %></th>
+                    <th scope="row"<% if (!paginationNo) { %> @click="changeOrder('<%= field.fieldName%>')"<% } %>><span v-text="t$('<%=`${i18nKeyPrefix}.${field.fieldName}` %>')"><%= field.fieldNameHumanized %></span><% if (!paginationNo) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'<%= field.fieldName%>'"></jhi-sort-indicator><% } %></th>
 <%_ } _%>
 <%_ for (relationship of relationships) { _%>
   <%_ if (relationship.persistableRelationship && (paginationNo || !relationship.collection)) {
     const fieldName = "." + relationship.otherEntityField; _%>
-                    <th scope="row"<% if (!paginationNo) { %> v-on:click="changeOrder('<%=relationship.relationshipName + (fieldName)%>')"<% } %>><span v-text="t$('<%= `${i18nKeyPrefix}.${relationship.relationshipName}` %>')"><%= relationship.relationshipNameHumanized %></span><% if (!paginationNo) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'<%=relationship.relationshipName + (fieldName)%>'"></jhi-sort-indicator><% } %></th>
+                    <th scope="row"<% if (!paginationNo) { %> @click="changeOrder('<%=relationship.relationshipName + (fieldName)%>')"<% } %>><span v-text="t$('<%= `${i18nKeyPrefix}.${relationship.relationshipName}` %>')"><%= relationship.relationshipNameHumanized %></span><% if (!paginationNo) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'<%=relationship.relationshipName + (fieldName)%>'"></jhi-sort-indicator><% } %></th>
   <%_ } _%>
 <%_ } _%>
                     <th scope="row"></th>
@@ -70,14 +70,14 @@
     const fieldType = field.fieldType; _%>
   <%_ if (field.fieldTypeBinary && field.blobContentTypeImage) { _%>
                     <td>
-                        <a v-if="<%= entityInstance %>.<%= fieldName %>" v-on:click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
-                            <img v-bind:src="'data:' + <%=entityInstance %>.<%=fieldName%>ContentType + ';base64,' + <%=entityInstance %>.<%=fieldName%>" style="max-height: 30px;" alt="<%=entityInstance %>"/>
+                        <a v-if="<%= entityInstance %>.<%= fieldName %>" @click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
+                            <img :src="'data:' + <%=entityInstance %>.<%=fieldName%>ContentType + ';base64,' + <%=entityInstance %>.<%=fieldName%>" style="max-height: 30px;" alt="<%=entityInstance %>"/>
                         </a>
                         <span v-if="<%= entityInstance %>.<%= fieldName %>">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
                     </td>
   <%_ } else if (field.fieldTypeBinary && field.blobContentTypeAny) { _%>
                     <td>
-                        <a v-if="<%= entityInstance %>.<%= fieldName %>" v-on:click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" v-text="t$('entity.action.open')">open</a>
+                        <a v-if="<%= entityInstance %>.<%= fieldName %>" @click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" v-text="t$('entity.action.open')">open</a>
                         <span v-if="<%= entityInstance %>.<%= fieldName %>">{{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}</span>
                     </td>
   <%_ } else if (field.fieldIsEnum) { _%>
@@ -147,7 +147,7 @@
                                 </button>
   <%_ } _%>
                             </router-link>
-                            <b-button v-on:click="prepareRemove(<%= entityInstance %>)"
+                            <b-button @click="prepareRemove(<%= entityInstance %>)"
                                    variant="danger"
                                    class="btn btn-sm"
                                    data-cy="entityDeleteButton"
@@ -177,8 +177,8 @@
             </div>
             <template #modal-footer>
                 <div>
-                    <button type="button" class="btn btn-secondary" v-text="t$('entity.action.cancel')" v-on:click="closeDialog()">Cancel</button>
-                    <button type="button" class="btn btn-primary" id="<%= jhiPrefixDashed %>-confirm-delete-<%= entityInstance %>" data-cy="entityConfirmDeleteButton" v-text="t$('entity.action.delete')" v-on:click="remove<%= entityAngularName %>()">Delete</button>
+                    <button type="button" class="btn btn-secondary" v-text="t$('entity.action.cancel')" @click="closeDialog()">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="<%= jhiPrefixDashed %>-confirm-delete-<%= entityInstance %>" data-cy="entityConfirmDeleteButton" v-text="t$('entity.action.delete')" @click="remove<%= entityAngularName %>()">Delete</button>
                 </div>
             </template>
         </b-modal>

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

@@ -33,7 +33,10 @@ export default defineComponent({
     };
 
     onMounted(() => loadLanguage());
-    watch(() => i18n.locale, () => loadLanguage());
+    watch(
+      () => i18n.locale,
+      () => loadLanguage(),
+    );
 
   <%_ } _%>
     return {

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

@@ -27,7 +27,7 @@ import TranslationService from '@/locale/translation.service';
 import { useTrackerService } from './admin/tracker/tracker.service';
 <%_ } _%>
 
-const pinia = createPinia()
+const pinia = createPinia();
 
 // jhipster-needle-add-entity-service-to-main-import - JHipster will import entities services here
 
@@ -60,6 +60,7 @@ Vue.configureCompat({
   OPTIONS_DESTROYED: 'suppress-warning',
   RENDER_FUNCTION: 'suppress-warning',
   WATCH_ARRAY: 'suppress-warning',
+  PRIVATE_APIS: 'suppress-warning',
 });
 
 <%_ if (enableTranslation) { _%>
@@ -101,14 +102,14 @@ const app = createApp({
         if (!translationService.getLocalStoreLanguage()) {
           await changeLanguage(value.langKey);
         }
-      }
+      },
     );
 
     watch(
       () => translationStore.currentLanguage,
       value => {
         translationService.setLocale(value);
-      }
+      },
     );
 
     onMounted(async () => {
@@ -166,12 +167,15 @@ const app = createApp({
       },
       error => {
         return Promise.reject(error);
-      }
+      },
     );
 
     const { authenticated } = storeToRefs(store);
     provide('authenticated', authenticated);
-    provide('currentUsername', computed(() => store.account?.login));
+    provide(
+      'currentUsername',
+      computed(() => store.account?.login),
+    );
 
 <%_ if (enableTranslation) { _%>
     provide('translationService', translationService);

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

@@ -12,7 +12,7 @@ import {Authority} from "@/shared/security/authority";
   const <%= jhiPrefixCapitalized %>LogsComponent = () => import('@/admin/logs/logs.vue');
   const <%= jhiPrefixCapitalized %>MetricsComponent = () => import('@/admin/metrics/metrics.vue');
 <%_ } _%>
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
   const <%= jhiPrefixCapitalized %>GatewayComponent = () => import('@/admin/gateway/gateway.vue');
 <%_ } _%>
 <%_ if (communicationSpringWebsocket) { _%>
@@ -78,7 +78,7 @@ export default [
       meta: { authorities: [Authority.ADMIN] }
     },
 <%_ } _%>
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
     {
       path: '/admin/gateway',
       name: '<%= jhiPrefixCapitalized %>GatewayComponent',

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

@@ -5,7 +5,7 @@ import { type Composer, useI18n } from 'vue-i18n';
 <%_ } _%>
 
 export const useAlertService = () => {
-  const bvToast = getCurrentInstance().root.proxy['_bv__toast'];
+  const bvToast = getCurrentInstance().root.proxy._bv__toast;
   if (!bvToast) {
     throw new Error('BootstrapVue toast component was not found');
   }

package/dist/generators/vue/templates/src/main/webapp/app/shared/computables/arrays.ts.ejs

@@ -24,7 +24,7 @@ const compareString = (a: string, b: string): number => {
 };
 
 const asString = (val): string => {
-  return typeof val === 'string' ? val : '' + val;
+  return typeof val === 'string' ? val : `${val}`;
 };
 
 const compareAny = (a, b): number => {
@@ -66,7 +66,7 @@ const filterObject = (val: any, opts: FilterByOptions): boolean => {
     }
     return false;
   }
-  return ('' + val).toLocaleLowerCase().startsWith(filterByTerm);
+  return `${val}`.toLocaleLowerCase().startsWith(filterByTerm);
 };
 
 export const filterBy = (array: any, opts: FilterByOptions) => {

package/dist/generators/vue/templates/src/main/webapp/app/shared/config/axios-interceptor.spec.ts.ejs

@@ -37,40 +37,40 @@ describe('Axios interceptor', () => {
 });
 
 describe('Axios errors interceptor', () => {
-    it('should use callback on 401, 403 errors', async () => {
-      const callback = sinon.spy();
+  it('should use callback on 401, 403 errors', async () => {
+    const callback = sinon.spy();
 
-      setupAxiosConfig.setupAxiosInterceptors(callback, () => {});
+    setupAxiosConfig.setupAxiosInterceptors(callback, () => {});
 
-      try {
-        mock.onGet().reply(401);
-        await axios('/api/test');
-      } catch {
-        expect(callback.called).toBeTruthy();
-      }
-    });
-    it('should use callback 50x errors', async () => {
-      const callback = sinon.spy();
+    try {
+      mock.onGet().reply(401);
+      await axios('/api/test');
+    } catch {
+      expect(callback.called).toBeTruthy();
+    }
+  });
+  it('should use callback 50x errors', async () => {
+    const callback = sinon.spy();
 
-      setupAxiosConfig.setupAxiosInterceptors(() => {}, callback);
+    setupAxiosConfig.setupAxiosInterceptors(() => {}, callback);
 
-      try {
-        mock.onGet().reply(500);
-        await axios('/api/test');
-      } catch {
-        expect(callback.called).toBeTruthy();
-      }
-    });
-    it('should not use callback for errors different 50x, 401, 403', async () => {
-      const callback = sinon.spy();
+    try {
+      mock.onGet().reply(500);
+      await axios('/api/test');
+    } catch {
+      expect(callback.called).toBeTruthy();
+    }
+  });
+  it('should not use callback for errors different 50x, 401, 403', async () => {
+    const callback = sinon.spy();
 
-      setupAxiosConfig.setupAxiosInterceptors(() => {}, callback);
+    setupAxiosConfig.setupAxiosInterceptors(() => {}, callback);
 
-      try {
-        mock.onGet().reply(402);
-        await axios('/api/test');
-      } catch {
-        expect(callback.called).toBeFalsy();
-      }
-    });
+    try {
+      mock.onGet().reply(402);
+      await axios('/api/test');
+    } catch {
+      expect(callback.called).toBeFalsy();
+    }
   });
+});

package/dist/generators/vue/templates/src/main/webapp/app/shared/config/axios-interceptor.ts.ejs

@@ -44,7 +44,7 @@ const setupAxiosInterceptors = (onUnauthenticated, onServerError) => {
     }
     return Promise.reject(err);
   };
-  
+
   if (axios.interceptors) {
     axios.interceptors.request.use(onRequestSuccess);
     axios.interceptors.response.use(res => res, onResponseError);