generator-jhipster 8.5.0 → 8.7.0

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

@@ -2,9 +2,8 @@
   <div>
     <h2>
       <span id="metrics-page-heading" v-text="t$('metrics.title')" data-cy="metricsPageHeading">Application Metrics</span>
-      <button class="btn btn-primary float-right" v-on:click="refresh()">
-        <font-awesome-icon icon="sync"></font-awesome-icon> <span
-          v-text="t$('metrics[\'refresh.button\']')">Refresh</span>
+      <button class="btn btn-primary float-right" @click="refresh()">
+        <font-awesome-icon icon="sync"></font-awesome-icon> <span v-text="t$('metrics[\'refresh.button\']')">Refresh</span>
       </button>
     </h2>
 
@@ -15,56 +14,59 @@
         <div>
           <div v-for="(entry, key) of metrics.jvm" :key="key">
             <span v-if="entry.max !== -1">
-              <span>{{ key }}</span> ({{ formatNumber1(entry.used / 1048576) }}M /
-              {{ formatNumber1(entry.max / 1048576) }}M)
+              <span>{{ key }}</span> ({{ formatNumber1(entry.used / 1048576) }}M / {{ formatNumber1(entry.max / 1048576) }}M)
             </span>
             <span v-else>
               <span>{{ key }}</span> {{ formatNumber1(entry.used / 1048576) }}M
             </span>
             <div>Committed : {{ formatNumber1(entry.committed / 1048576) }}M</div>
             <b-progress v-if="entry.max !== -1" variant="success" animated :max="entry.max" striped>
-              <b-progress-bar :value="entry.used" :label="formatNumber1((entry.used * 100) / entry.max) + '%'">
-              </b-progress-bar>
+              <b-progress-bar :value="entry.used" :label="formatNumber1((entry.used * 100) / entry.max) + '%'"> </b-progress-bar>
             </b-progress>
           </div>
         </div>
       </div>
       <div class="col-md-4">
         <h4 v-text="t$('metrics.jvm.threads.title')">Threads</h4>
-        <span><span v-text="t$('metrics.jvm.threads.runnable')">Runnable</span>
-          {{ threadStats.threadDumpRunnable }}</span>
+        <span><span v-text="t$('metrics.jvm.threads.runnable')">Runnable</span> {{ threadStats.threadDumpRunnable }}</span>
         <b-progress variant="success" :max="threadStats.threadDumpAll" striped>
-          <b-progress-bar :value="threadStats.threadDumpRunnable"
-            :label="formatNumber1((threadStats.threadDumpRunnable * 100) / threadStats.threadDumpAll) + '%'">
+          <b-progress-bar
+            :value="threadStats.threadDumpRunnable"
+            :label="formatNumber1((threadStats.threadDumpRunnable * 100) / threadStats.threadDumpAll) + '%'"
+          >
           </b-progress-bar>
         </b-progress>
 
-        <span><span v-text="t$('metrics.jvm.threads.timedwaiting')">Timed Waiting</span>
-          ({{ threadStats.threadDumpTimedWaiting }})</span>
+        <span><span v-text="t$('metrics.jvm.threads.timedwaiting')">Timed Waiting</span> ({{ threadStats.threadDumpTimedWaiting }})</span>
         <b-progress variant="success" :max="threadStats.threadDumpAll" striped>
-          <b-progress-bar :value="threadStats.threadDumpTimedWaiting"
-            :label="formatNumber1((threadStats.threadDumpTimedWaiting * 100) / threadStats.threadDumpAll) + '%'">
+          <b-progress-bar
+            :value="threadStats.threadDumpTimedWaiting"
+            :label="formatNumber1((threadStats.threadDumpTimedWaiting * 100) / threadStats.threadDumpAll) + '%'"
+          >
           </b-progress-bar>
         </b-progress>
 
-        <span><span v-text="t$('metrics.jvm.threads.waiting')">Waiting</span>
-          ({{ threadStats.threadDumpWaiting }})</span>
+        <span><span v-text="t$('metrics.jvm.threads.waiting')">Waiting</span> ({{ threadStats.threadDumpWaiting }})</span>
         <b-progress variant="success" :max="threadStats.threadDumpAll" striped>
-          <b-progress-bar :value="threadStats.threadDumpWaiting"
-            :label="formatNumber1((threadStats.threadDumpWaiting * 100) / threadStats.threadDumpAll) + '%'">
+          <b-progress-bar
+            :value="threadStats.threadDumpWaiting"
+            :label="formatNumber1((threadStats.threadDumpWaiting * 100) / threadStats.threadDumpAll) + '%'"
+          >
           </b-progress-bar>
         </b-progress>
 
-        <span><span v-text="t$('metrics.jvm.threads.blocked')">Blocked</span>
-          ({{ threadStats.threadDumpBlocked }})</span>
+        <span><span v-text="t$('metrics.jvm.threads.blocked')">Blocked</span> ({{ threadStats.threadDumpBlocked }})</span>
         <b-progress variant="success" :max="threadStats.threadDumpAll" striped>
-          <b-progress-bar :value="threadStats.threadDumpBlocked"
-            :label="formatNumber1((threadStats.threadDumpBlocked * 100) / threadStats.threadDumpAll) + '%'">
+          <b-progress-bar
+            :value="threadStats.threadDumpBlocked"
+            :label="formatNumber1((threadStats.threadDumpBlocked * 100) / threadStats.threadDumpAll) + '%'"
+          >
           </b-progress-bar>
         </b-progress>
 
-        <span>Total: {{ threadStats.threadDumpAll }}
-          <a class="hand" v-b-modal.metricsModal data-toggle="modal" v-on:click="openModal()" data-target="#threadDump">
+        <span
+          >Total: {{ threadStats.threadDumpAll }}
+          <a class="hand" v-b-modal.metricsModal data-toggle="modal" @click="openModal()" data-target="#threadDump">
             <font-awesome-icon icon="eye"></font-awesome-icon>
           </a>
         </span>
@@ -73,8 +75,7 @@
         <h4>System</h4>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-4">Uptime</div>
-          <div class="col-md-8 text-right">{{ convertMillisecondsToDuration(metrics.processMetrics['process.uptime']) }}
-          </div>
+          <div class="col-md-8 text-right">{{ convertMillisecondsToDuration(metrics.processMetrics['process.uptime']) }}</div>
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-4">Start time</div>
@@ -82,12 +83,13 @@
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-9">Process CPU usage</div>
-          <div class="col-md-3 text-right">{{ formatNumber2(100 * metrics.processMetrics['process.cpu.usage']) }} %
-          </div>
+          <div class="col-md-3 text-right">{{ formatNumber2(100 * metrics.processMetrics['process.cpu.usage']) }} %</div>
         </div>
         <b-progress variant="success" :max="100" striped>
-          <b-progress-bar :value="100 * metrics.processMetrics['process.cpu.usage']"
-            :label="formatNumber1(100 * metrics.processMetrics['process.cpu.usage']) + '%'">
+          <b-progress-bar
+            :value="100 * metrics.processMetrics['process.cpu.usage']"
+            :label="formatNumber1(100 * metrics.processMetrics['process.cpu.usage']) + '%'"
+          >
           </b-progress-bar>
         </b-progress>
         <div class="row" v-if="!updatingMetrics">
@@ -95,8 +97,10 @@
           <div class="col-md-3 text-right">{{ formatNumber2(100 * metrics.processMetrics['system.cpu.usage']) }} %</div>
         </div>
         <b-progress variant="success" :max="100" striped>
-          <b-progress-bar :value="100 * metrics.processMetrics['system.cpu.usage']"
-            :label="formatNumber1(100 * metrics.processMetrics['system.cpu.usage']) + '%'">
+          <b-progress-bar
+            :value="100 * metrics.processMetrics['system.cpu.usage']"
+            :label="formatNumber1(100 * metrics.processMetrics['system.cpu.usage']) + '%'"
+          >
           </b-progress-bar>
         </b-progress>
         <div class="row" v-if="!updatingMetrics">
@@ -123,16 +127,18 @@
       <div class="col-md-4">
         <div>
           <span>
-            GC Live Data Size/GC Max Data Size
-            ({{ formatNumber1(metrics.garbageCollector['jvm.gc.live.data.size'] / 1048576) }}M /
+            GC Live Data Size/GC Max Data Size ({{ formatNumber1(metrics.garbageCollector['jvm.gc.live.data.size'] / 1048576) }}M /
             {{ formatNumber1(metrics.garbageCollector['jvm.gc.max.data.size'] / 1048576) }}M)
           </span>
           <b-progress variant="success" :max="metrics.garbageCollector['jvm.gc.max.data.size']" striped>
-            <b-progress-bar :value="metrics.garbageCollector['jvm.gc.live.data.size']" :label="
+            <b-progress-bar
+              :value="metrics.garbageCollector['jvm.gc.live.data.size']"
+              :label="
                 formatNumber2(
-                  (100 * metrics.garbageCollector['jvm.gc.live.data.size']) / metrics.garbageCollector['jvm.gc.max.data.size']
+                  (100 * metrics.garbageCollector['jvm.gc.live.data.size']) / metrics.garbageCollector['jvm.gc.max.data.size'],
                 ) + '%'
-              ">
+              "
+            >
             </b-progress-bar>
           </b-progress>
         </div>
@@ -140,16 +146,18 @@
       <div class="col-md-4">
         <div>
           <span>
-            GC Memory Promoted/GC Memory Allocated
-            ({{ formatNumber1(metrics.garbageCollector['jvm.gc.memory.promoted'] / 1048576) }}M /
+            GC Memory Promoted/GC Memory Allocated ({{ formatNumber1(metrics.garbageCollector['jvm.gc.memory.promoted'] / 1048576) }}M /
             {{ formatNumber1(metrics.garbageCollector['jvm.gc.memory.allocated'] / 1048576) }}M)
           </span>
           <b-progress variant="success" :max="metrics.garbageCollector['jvm.gc.memory.allocated']" striped>
-            <b-progress-bar :value="metrics.garbageCollector['jvm.gc.memory.promoted']" :label="
+            <b-progress-bar
+              :value="metrics.garbageCollector['jvm.gc.memory.promoted']"
+              :label="
                 formatNumber2(
-                  (100 * metrics.garbageCollector['jvm.gc.memory.promoted']) / metrics.garbageCollector['jvm.gc.memory.allocated']
+                  (100 * metrics.garbageCollector['jvm.gc.memory.promoted']) / metrics.garbageCollector['jvm.gc.memory.allocated'],
                 ) + '%'
-              ">
+              "
+            >
             </b-progress-bar>
           </b-progress>
         </div>
@@ -197,7 +205,11 @@
     </div>
 
     <h3 v-text="t$('metrics.jvm.http.title')">HTTP requests (time in millisecond)</h3>
-    <table class="table table-striped" v-if="!updatingMetrics && isObjectExisting(metrics, 'http.server.requests')" aria-describedby="Jvm http">
+    <table
+      class="table table-striped"
+      v-if="!updatingMetrics && isObjectExisting(metrics, 'http.server.requests')"
+      aria-describedby="Jvm http"
+    >
       <thead>
         <tr>
           <th scope="col" v-text="t$('metrics.jvm.http.table.code')">Code</th>
@@ -288,10 +300,8 @@
         <thead>
           <tr>
             <th scope="col">
-              <span v-text="t$('metrics.datasource.usage')">Connection Pool Usage</span> (active:
-              {{ metrics.databases.active.value }}, min:
-              {{ metrics.databases.min.value }}, max: {{ metrics.databases.max.value }}, idle:
-              {{ metrics.databases.idle.value }})
+              <span v-text="t$('metrics.datasource.usage')">Connection Pool Usage</span> (active: {{ metrics.databases.active.value }}, min:
+              {{ metrics.databases.min.value }}, max: {{ metrics.databases.max.value }}, idle: {{ metrics.databases.idle.value }})
             </th>
             <th scope="col" class="text-right" v-text="t$('metrics.datasource.count')">Count</th>
             <th scope="col" class="text-right" v-text="t$('metrics.datasource.mean')">Mean</th>

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

@@ -110,7 +110,8 @@ export default defineComponent({
           .then(res => {
             this.returnToList();
             this.alertService.showSuccess(this.getToastMessageFromHeader(res));
-          }).catch(error => {
+          })
+          .catch(error => {
             this.isSaving = true;
             this.alertService.showHttpError(error.response);
           });

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

@@ -1,10 +1,8 @@
 <template>
   <div class="row justify-content-center">
     <div class="col-8">
-      <form name="editForm" novalidate v-on:submit.prevent="save()" v-if="userAccount">
-        <h2 id="myUserLabel" v-text="t$('userManagement.home.createOrEditLabel')">
-          Create or edit a User
-        </h2>
+      <form name="editForm" novalidate @submit.prevent="save()" v-if="userAccount">
+        <h2 id="myUserLabel" v-text="t$('userManagement.home.createOrEditLabel')">Create or edit a User</h2>
         <div>
           <div class="form-group" :hidden="!userAccount.id">
             <label v-text="t$('global.field.id')">ID</label>
@@ -13,82 +11,124 @@
 
           <div class="form-group">
             <label class="form-control-label" v-text="t$('userManagement.login')">Login</label>
-            <input type="text" class="form-control" name="login"
+            <input
+              type="text"
+              class="form-control"
+              name="login"
               :class="{ valid: !v$.userAccount.login.$invalid, invalid: v$.userAccount.login.$invalid }"
-              v-model="v$.userAccount.login.$model" />
+              v-model="v$.userAccount.login.$model"
+            />
 
             <div v-if="v$.userAccount.login.$anyDirty && v$.userAccount.login.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.login.required"
-                v-text="t$('entity.validation.required')">
+              <small class="form-text text-danger" v-if="!v$.userAccount.login.required" v-text="t$('entity.validation.required')">
                 This field is required.
               </small>
 
-              <small class="form-text text-danger" v-if="!v$.userAccount.login.maxLength"
-                v-text="t$('entity.validation.maxlength', { max: 50 })">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.login.maxLength"
+                v-text="t$('entity.validation.maxlength', { max: 50 })"
+              >
                 This field cannot be longer than 50 characters.
               </small>
 
-              <small class="form-text text-danger" v-if="!v$.userAccount.login.pattern"
-                v-text="t$('entity.validation.patternLogin')">
+              <small class="form-text text-danger" v-if="!v$.userAccount.login.pattern" v-text="t$('entity.validation.patternLogin')">
                 This field can only contain letters, digits and e-mail addresses.
               </small>
             </div>
           </div>
           <div class="form-group">
             <label class="form-control-label" for="firstName" v-text="t$('userManagement.firstName')">First Name</label>
-            <input type="text" class="form-control" id="firstName" name="firstName"
-              v-bind:placeholder="t$('settings.form[\'firstname.placeholder\']')"
+            <input
+              type="text"
+              class="form-control"
+              id="firstName"
+              name="firstName"
+              :placeholder="t$('settings.form[\'firstname.placeholder\']')"
               :class="{ valid: !v$.userAccount.firstName.$invalid, invalid: v$.userAccount.firstName.$invalid }"
-              v-model="v$.userAccount.firstName.$model" />
+              v-model="v$.userAccount.firstName.$model"
+            />
             <div v-if="v$.userAccount.firstName.$anyDirty && v$.userAccount.firstName.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.firstName.maxLength"
-                v-text="t$('entity.validation.maxlength', { max: 50 })">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.firstName.maxLength"
+                v-text="t$('entity.validation.maxlength', { max: 50 })"
+              >
                 This field cannot be longer than 50 characters.
               </small>
             </div>
           </div>
           <div class="form-group">
             <label class="form-control-label" for="lastName" v-text="t$('userManagement.lastName')">Last Name</label>
-            <input type="text" class="form-control" id="lastName" name="lastName"
-              v-bind:placeholder="t$('settings.form[\'lastname.placeholder\']')"
+            <input
+              type="text"
+              class="form-control"
+              id="lastName"
+              name="lastName"
+              :placeholder="t$('settings.form[\'lastname.placeholder\']')"
               :class="{ valid: !v$.userAccount.lastName.$invalid, invalid: v$.userAccount.lastName.$invalid }"
-              v-model="v$.userAccount.lastName.$model" />
+              v-model="v$.userAccount.lastName.$model"
+            />
             <div v-if="v$.userAccount.lastName.$anyDirty && v$.userAccount.lastName.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.lastName.maxLength"
-                v-text="t$('entity.validation.maxlength', { max: 50 })">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.lastName.maxLength"
+                v-text="t$('entity.validation.maxlength', { max: 50 })"
+              >
                 This field cannot be longer than 50 characters.
               </small>
             </div>
           </div>
           <div class="form-group">
             <label class="form-control-label" for="email" v-text="t$('userManagement.email')">Email</label>
-            <input type="email" class="form-control" id="email" name="email"
-              v-bind:placeholder="t$('global.form[\'email.placeholder\']')"
+            <input
+              type="email"
+              class="form-control"
+              id="email"
+              name="email"
+              :placeholder="t$('global.form[\'email.placeholder\']')"
               :class="{ valid: !v$.userAccount.email.$invalid, invalid: v$.userAccount.email.$invalid }"
-              v-model="v$.userAccount.email.$model" email required />
+              v-model="v$.userAccount.email.$model"
+              email
+              required
+            />
             <div v-if="v$.userAccount.email.$anyDirty && v$.userAccount.email.$invalid">
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.required"
-                v-text="t$('global.messages.validate.email.required')">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.email.required"
+                v-text="t$('global.messages.validate.email.required')"
+              >
                 Your email is required.
               </small>
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.email"
-                v-text="t$('global.messages.validate.email.invalid')">
+              <small class="form-text text-danger" v-if="!v$.userAccount.email.email" v-text="t$('global.messages.validate.email.invalid')">
                 Your email is invalid.
               </small>
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.minLength"
-                v-text="t$('global.messages.validate.email.minlength')">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.email.minLength"
+                v-text="t$('global.messages.validate.email.minlength')"
+              >
                 Your email is required to be at least 5 characters.
               </small>
-              <small class="form-text text-danger" v-if="!v$.userAccount.email.maxLength"
-                v-text="t$('global.messages.validate.email.maxlength')">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.userAccount.email.maxLength"
+                v-text="t$('global.messages.validate.email.maxlength')"
+              >
                 Your email cannot be longer than 50 characters.
               </small>
             </div>
           </div>
           <div class="form-check">
             <label class="form-check-label" for="activated">
-              <input class="form-check-input" :disabled="userAccount.id === null" type="checkbox" id="activated"
-                name="activated" v-model="userAccount.activated" />
+              <input
+                class="form-check-input"
+                :disabled="userAccount.id === null"
+                type="checkbox"
+                id="activated"
+                name="activated"
+                v-model="userAccount.activated"
+              />
               <span v-text="t$('userManagement.activated')">Activated</span>
             </label>
           </div>
@@ -109,9 +149,8 @@
           </div>
         </div>
         <div>
-          <button type="button" class="btn btn-secondary" v-on:click="previousState()">
-            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span
-              v-text="t$('entity.action.cancel')">Cancel</span>
+          <button type="button" 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" :disabled="v$.userAccount.$invalid || isSaving" class="btn btn-primary">
             <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.save')">Save</span>

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

@@ -8,7 +8,7 @@
         <dl class="row jh-entity-details">
           <dt><span v-text="t$('userManagement.login')">Login</span></dt>
           <dd>
-            <span>{{user.login}}</span>
+            <span>{{ user.login }}</span>
             <b-badge variant="success" v-if="user.activated" v-text="t$('userManagement.activated')">Activated</b-badge>
             <b-badge variant="danger" v-if="!user.activated" v-text="t$('userManagement.deactivated')">Deactivated</b-badge>
           </dd>
@@ -58,5 +58,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./user-management-view.component.ts">
-</script>
+<script lang="ts" src="./user-management-view.component.ts"></script>

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

@@ -106,7 +106,7 @@ export default defineComponent({
     },
 <%_ if (!databaseTypeCassandra) { _%>
     sort(): any {
-      const result = [this.propOrder + ',' + (this.reverse ? 'desc' : 'asc')];
+      const result = [`${this.propOrder},${this.reverse ? 'desc' : 'asc'}`];
       if (this.propOrder !== 'id') {
         result.push('id');
       }

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

@@ -4,7 +4,7 @@
       <span id="user-management-page-heading" v-text="t$('userManagement.home.title')" data-cy="userManagementPageHeading">Users</span>
 
       <div class="d-flex justify-content-end">
-        <button class="btn btn-info mr-2" v-on:click="handleSyncList" :disabled="isLoading">
+        <button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isLoading">
           <font-awesome-icon icon="sync" :spin="isLoading"></font-awesome-icon> <span v-text="t$('userManagement.home.refreshListLabel')">Refresh List</span>
         </button>
         <router-link custom v-slot="{ navigate }" :to="{name: '<%= jhiPrefixCapitalized %>UserCreate'}">
@@ -18,18 +18,18 @@
       <table class="table table-striped" aria-describedby="Users">
         <thead>
         <tr>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('id')"<% } %>><span v-text="t$('global.field.id')">ID</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator><% } %></th>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('login')"<% } %>><span v-text="t$('userManagement.login')">Login</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'login'"></jhi-sort-indicator><% } %></th>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('email')"<% } %>><span v-text="t$('userManagement.email')">Email</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'email'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('id')"<% } %>><span v-text="t$('global.field.id')">ID</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('login')"<% } %>><span v-text="t$('userManagement.login')">Login</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'login'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('email')"<% } %>><span v-text="t$('userManagement.email')">Email</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'email'"></jhi-sort-indicator><% } %></th>
           <th scope="col"></th>
 <%_ if (enableTranslation) { _%>
-          <th scope="col"<% if (!databaseTypeCassandra) { %> v-on:click="changeOrder('langKey')"<% } %>> <span v-text="t$('userManagement.langKey')">Lang Key</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'langKey'"></jhi-sort-indicator><% } %></th>
+          <th scope="col"<% if (!databaseTypeCassandra) { %> @click="changeOrder('langKey')"<% } %>> <span v-text="t$('userManagement.langKey')">Lang Key</span><% if (!databaseTypeCassandra) { %> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'langKey'"></jhi-sort-indicator><% } %></th>
 <%_ } _%>
           <th scope="col"><span v-text="t$('userManagement.profiles')">Profiles</span></th>
 <%_ if (!databaseTypeCassandra) { _%>
-          <th scope="col" v-on:click="changeOrder('createdDate')"><span v-text="t$('userManagement.createdDate')">Created Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'createdDate'"></jhi-sort-indicator></th>
-          <th scope="col" v-on:click="changeOrder('lastModifiedBy')"><span v-text="t$('userManagement.lastModifiedBy')">Last Modified By</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedBy'"></jhi-sort-indicator></th>
-          <th scope="col" id="modified-date-sort" v-on:click="changeOrder('lastModifiedDate')"><span v-text="t$('userManagement.lastModifiedDate')">Last Modified Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedDate'"></jhi-sort-indicator></th>
+          <th scope="col" @click="changeOrder('createdDate')"><span v-text="t$('userManagement.createdDate')">Created Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'createdDate'"></jhi-sort-indicator></th>
+          <th scope="col" @click="changeOrder('lastModifiedBy')"><span v-text="t$('userManagement.lastModifiedBy')">Last Modified By</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedBy'"></jhi-sort-indicator></th>
+          <th scope="col" id="modified-date-sort" @click="changeOrder('lastModifiedDate')"><span v-text="t$('userManagement.lastModifiedDate')">Last Modified Date</span> <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'lastModifiedDate'"></jhi-sort-indicator></th>
 <%_ } _%>
           <th scope="col"></th>
         </tr>
@@ -41,9 +41,9 @@
             <td>{{user.login}}</td>
             <td class="jhi-user-email">{{user.email}}</td>
             <td>
-              <button class="btn btn-danger btn-sm deactivated" v-on:click="setActive(user, true)" v-if="!user.activated"
+              <button class="btn btn-danger btn-sm deactivated" @click="setActive(user, true)" v-if="!user.activated"
                       v-text="t$('userManagement.deactivated')">Deactivated</button>
-              <button class="btn btn-success btn-sm" v-on:click="setActive(user, false)" v-if="user.activated"
+              <button class="btn btn-success btn-sm" @click="setActive(user, false)" v-if="user.activated"
                       :disabled="username === user.login" v-text="t$('userManagement.activated')">Activated</button>
             </td>
             <% if (enableTranslation) { %><td>{{user.langKey}}</td><% } %>
@@ -71,10 +71,7 @@
                     <span class="d-none d-md-inline" v-text="t$('entity.action.edit')">Edit</span>
                   </button>
                 </router-link>
-                <b-button v-on:click="prepareRemove(user)"
-                        variant="danger"
-                        class="btn btn-sm delete"
-                        :disabled="username === user.login">
+                <b-button @click="prepareRemove(user)" variant="danger" class="btn btn-sm delete" :disabled="username === user.login">
                   <font-awesome-icon icon="times"></font-awesome-icon>
                   <span class="d-none d-md-inline" v-text="t$('entity.action.delete')">Delete</span>
                 </b-button>
@@ -83,26 +80,26 @@
           </tr>
         </tbody>
       </table>
-      <b-modal ref="removeUser" id="removeUser" v-bind:title="t$('entity.delete.title')" @ok="deleteUser()">
+      <b-modal ref="removeUser" id="removeUser" :title="t$('entity.delete.title')" @ok="deleteUser()">
           <div class="modal-body">
               <p id="<%= jhiPrefixDashed %>-delete-user-heading" v-text="t$('userManagement.delete.question', { 'login': removeId})">Are you sure you want to delete this user?</p>
           </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="confirm-delete-user" v-text="t$('entity.action.delete')" v-on:click="deleteUser()">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="confirm-delete-user" v-text="t$('entity.action.delete')" @click="deleteUser()">Delete</button>
             </div>
           </template>
       </b-modal>
     </div>
 <%_ if (!databaseTypeCassandra) { _%>
     <div v-show="users && users.length > 0">
-        <div class="row justify-content-center">
-            <jhi-item-count :page="page" :total="queryCount" :itemsPerPage="itemsPerPage"></jhi-item-count>
-        </div>
-        <div class="row justify-content-center">
-            <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage" :change="loadPage(page)"></b-pagination>
-        </div>
+      <div class="row justify-content-center">
+        <jhi-item-count :page="page" :total="queryCount" :itemsPerPage="itemsPerPage"></jhi-item-count>
+      </div>
+      <div class="row justify-content-center">
+        <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage" :change="loadPage(page)"></b-pagination>
+      </div>
     </div>
 <%_ } _%>
   </div>

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

@@ -10,13 +10,11 @@
         <div v-if="errorMessage">
           <div class="alert alert-danger">{{ errorMessage }}</div>
         </div>
-        <div v-if="error403" class="alert alert-danger" v-text="t$('error.http.403')">You are not authorized to access
-          this page.</div>
-        <div v-if="error404" class="alert alert-warning" v-text="t$('error.http.404')">The page you requested does not
-          exist.</div>
+        <div v-if="error403" class="alert alert-danger" v-text="t$('error.http.403')">You are not authorized to access this page.</div>
+        <div v-if="error404" class="alert alert-warning" v-text="t$('error.http.404')">The page you requested does not exist.</div>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" src="./error.component.ts"></script>
+<script lang="ts" src="./error.component.ts"></script>

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

@@ -24,7 +24,7 @@ describe('Home', () => {
       global: {
         stubs: {
           'router-link': true,
-        },  
+        },
         provide: {
           loginService,
           authenticated,

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

@@ -14,16 +14,18 @@
 
         <div class="alert alert-warning" v-if="!authenticated">
           <span v-text="t$('global.messages.info.authenticated.prefix')">If you want to </span>
-          <a class="alert-link" v-on:click="openLogin()" v-text="t$('global.messages.info.authenticated.link')">sign
-            in</a><span v-html="t$('global.messages.info.authenticated.suffix')">, you can try the default
-            accounts:<br />- Administrator (login="admin" and password="admin") <br />- User (login="user" and
-            password="user").</span>
+          <a class="alert-link" @click="openLogin()" v-text="t$('global.messages.info.authenticated.link')">sign in</a
+          ><span v-html="t$('global.messages.info.authenticated.suffix')"
+            >, you can try the default accounts:<br />- Administrator (login="admin" and password="admin") <br />- User (login="user" and
+            password="user").</span
+          >
         </div>
 <%_ if (generateUserManagement) { _%>
         <div class="alert alert-warning" v-if="!authenticated">
           <span v-text="t$('global.messages.info.register.noaccount')">You don't have an account yet?</span>&nbsp;
-          <router-link class="alert-link" to="/register" v-text="t$('global.messages.info.register.link')">Register a
-            new account</router-link>
+          <router-link class="alert-link" to="/register" v-text="t$('global.messages.info.register.link')"
+            >Register a new account</router-link
+          >
         </div>
 <%_ } _%>
       </div>

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

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./jhi-footer.component.ts"></script>
+<script lang="ts" src="./jhi-footer.component.ts"></script>

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

@@ -48,7 +48,7 @@ describe('JhiNavbar', () => {
           'b-nav-item-dropdown': true,
           'b-navbar-toggle': true,
           'b-navbar-brand': true,
-        },  
+        },
         provide: {
           loginService,
           currentLanguage: computed(() => 'foo'),