Convert to vue 3.

generators/vue/__snapshots__/generator.spec.mts.snap

@@ -1056,6 +1056,9 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "src/app/constants.ts": {
     "stateCleared": "modified",
   },
+  "src/app/core/error/error-loading.vue": {
+    "stateCleared": "modified",
+  },
   "src/app/core/error/error.component.ts": {
     "stateCleared": "modified",
   },
@@ -1517,6 +1520,9 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "src/main/webapp2/app/constants.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp2/app/core/error/error-loading.vue": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp2/app/core/error/error.component.ts": {
     "stateCleared": "modified",
   },

generators/vue/files-vue.mjs

@@ -43,7 +43,7 @@ export const vueFiles = {
     {
       condition: generator => generator.microfrontend,
       ...clientApplicationBlock,
-      templates: ['index.ts'],
+      templates: ['index.ts', 'core/error/error-loading.vue'],
     },
     {
       condition: generator => generator.microfrontend,

generators/vue/generator.spec.mts

@@ -160,19 +160,19 @@ describe(`generator - ${clientFramework}`, () => {
             );
             assertion(
               `${clientSrcDir}app/core/jhi-navbar/jhi-navbar.vue`,
-              '<b-dropdown-item  to="/admin/metrics" active-class="active">\n' +
+              '<b-dropdown-item to="/admin/metrics" active-class="active">\n' +
                 '            <font-awesome-icon icon="tachometer-alt" />\n' +
                 '            <span v-text="t$(\'global.menu.admin.metrics\')"></span>\n' +
                 '          </b-dropdown-item>\n' +
                 '          <b-dropdown-item to="/admin/health" active-class="active">\n' +
                 '            <font-awesome-icon icon="heart" />\n' +
                 '            <span v-text="t$(\'global.menu.admin.health\')"></span>\n' +
                 '          </b-dropdown-item>\n' +
-                '          <b-dropdown-item  to="/admin/configuration" active-class="active">\n' +
+                '          <b-dropdown-item to="/admin/configuration" active-class="active">\n' +
                 '            <font-awesome-icon icon="cogs" />\n' +
                 '            <span v-text="t$(\'global.menu.admin.configuration\')"></span>\n' +
                 '          </b-dropdown-item>\n' +
-                '          <b-dropdown-item  to="/admin/logs" active-class="active">\n' +
+                '          <b-dropdown-item to="/admin/logs" active-class="active">\n' +
                 '            <font-awesome-icon icon="tasks" />\n' +
                 '            <span v-text="t$(\'global.menu.admin.logs\')"></span>\n' +
                 '          </b-dropdown-item>'

generators/vue/resources/package.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.4.0",
     "@fortawesome/free-solid-svg-icons": "6.4.0",
-    "@fortawesome/vue-fontawesome": "2.0.9",
+    "@fortawesome/vue-fontawesome": "3.0.3",
     "@vuelidate/core": "2.0.2",
     "@vuelidate/validators": "2.0.2",
     "@vueuse/core": "10.1.2",
@@ -12,11 +12,9 @@
     "bootswatch": "5.2.3",
     "js-cookie": "3.0.5",
     "pinia": "2.1.3",
-    "vue": "2.7.14",
-    "vue-i18n": "8.28.2",
-    "vue-i18n-bridge": "9.2.2",
-    "vue-router": "3.6.5",
-    "vuex": "3.6.2"
+    "vue": "3.3.4",
+    "vue-i18n": "9.2.2",
+    "vue-router": "4.2.1"
   },
   "devDependencies": {
     "@pinia/testing": "0.1.2",
@@ -26,8 +24,8 @@
     "@types/sinon": "10.0.15",
     "@vue/eslint-config-prettier": "7.1.0",
     "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/test-utils": "1.3.0",
-    "@vue/vue2-jest": "29.2.4",
+    "@vue/test-utils": "2.3.2",
+    "@vue/vue3-jest": "29.2.4",
     "autoprefixer": "10.4.14",
     "axios-mock-adapter": "1.21.4",
     "browser-sync-webpack-plugin": "2.3.0",
@@ -59,7 +57,8 @@
     "ts-jest": "29.1.0",
     "ts-loader": "9.4.2",
     "typescript": "5.0.4",
-    "vue-loader": "15.10.1",
+    "vue-loader": "17.1.1",
+    "vue-style-loader": "4.1.3",
     "webpack": "5.83.1",
     "webpack-bundle-analyzer": "4.8.0",
     "webpack-cli": "5.1.1",

generators/vue/support/translate-vue.mts

@@ -35,7 +35,7 @@ function replaceTranslationAttributes({ content, getWebappTranslation }: { conte
 
 export function removeDeclarations({ content }: { content: string }) {
   return content
-    .replaceAll(/\nimport {\s*useI18n\s*} from 'vue-i18n-bridge';/g, '')
+    .replaceAll(/\nimport {\s*useI18n\s*} from 'vue-i18n';/g, '')
     .replaceAll(/\n\s*t\$,/g, '')
     .replaceAll(/\n\s*t\$:\s*useI18n\(\).t,/g, '');
 }

generators/vue/support/translate-vue.spec.mts

@@ -61,7 +61,7 @@ describe('generator - vue - transform', () => {
       expect(
         removeDeclarations({
           content: `
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 return {
   t$,
   foo,

generators/vue/support/update-languages.mts

@@ -58,7 +58,7 @@ function updateLanguagesInConfigTask(this: BaseGenerator, { application, control
   const { clientSrcDir, languages } = application;
   const { ignoreNeedlesError: ignoreNonExisting } = control;
   // Add i18n config snippets for all languages
-  let i18nConfig = 'const datetimeFormats: DateTimeFormats = {\n';
+  let i18nConfig = 'const datetimeFormats: IntlDateTimeFormats = {\n';
   languages?.forEach((ln, i) => {
     i18nConfig += generateDateTimeFormat(ln, i, languages.length);
   });

generators/vue/templates/package.json.ejs

@@ -29,6 +29,7 @@
     "@fortawesome/fontawesome-svg-core": "<%= nodeDependencies['@fortawesome/fontawesome-svg-core'] %>",
     "@fortawesome/free-solid-svg-icons": "<%= nodeDependencies['@fortawesome/free-solid-svg-icons'] %>",
     "@fortawesome/vue-fontawesome": "<%= nodeDependencies['@fortawesome/vue-fontawesome'] %>",
+    "@vue/compat": "<%= nodeDependencies.vue %>",
     "@vuelidate/core": "<%= nodeDependencies['@vuelidate/core'] %>",
     "@vuelidate/validators": "<%= nodeDependencies['@vuelidate/validators'] %>",
     "@vueuse/core": "<%= nodeDependencies['@vueuse/core'] %>",
@@ -49,7 +50,6 @@
     "vue": "<%= nodeDependencies['vue'] %>",
 <%_ if (enableTranslation) { _%>
     "vue-i18n": "<%= nodeDependencies['vue-i18n'] %>",
-    "vue-i18n-bridge": "<%= nodeDependencies['vue-i18n-bridge'] %>",
 <%_ } _%>
     "vue-router": "<%= nodeDependencies['vue-router'] %>"
   },
@@ -59,9 +59,11 @@
     "@types/jest": "<%= nodeDependencies['@types/jest'] %>",
     "@types/node": "<%= nodeDependencies['@types/node'] %>",
     "@types/sinon": "<%= nodeDependencies['@types/sinon'] %>",
+    "@vue/compiler-sfc": "<%= nodeDependencies.vue %>",
     "@vue/eslint-config-prettier": "<%= nodeDependencies['@vue/eslint-config-prettier'] %>",
     "@vue/eslint-config-typescript": "<%= nodeDependencies['@vue/eslint-config-typescript'] %>",
     "@vue/test-utils": "<%= nodeDependencies['@vue/test-utils'] %>",
+    "@vue/vue3-jest": "<%= nodeDependencies['@vue/vue3-jest'] %>",
     "axios-mock-adapter": "<%= nodeDependencies['axios-mock-adapter'] %>",
     "autoprefixer": "<%= nodeDependencies['autoprefixer'] %>",
     "browser-sync-webpack-plugin": "<%= nodeDependencies['browser-sync-webpack-plugin'] %>",
@@ -109,8 +111,8 @@
     "eslint-plugin-prettier": "<%= nodeDependencies['eslint-plugin-prettier'] %>",
     "eslint-plugin-vue": "<%= nodeDependencies['eslint-plugin-vue'] %>",
     "typescript": "<%= nodeDependencies['typescript'] %>",
-    "@vue/vue2-jest": "<%= nodeDependencies['@vue/vue2-jest'] %>",
     "vue-loader": "<%= nodeDependencies['vue-loader'] %>",
+    "vue-style-loader": "<%= nodeDependencies['vue-style-loader'] %>",
     "webpack": "<%= nodeDependencies['webpack'] %>",
     "webpack-bundle-analyzer": "<%= nodeDependencies['webpack-bundle-analyzer'] %>",
     "webpack-cli": "<%= nodeDependencies['webpack-cli'] %>",

generators/vue/templates/src/main/webapp/app/account/activate/activate.component.ts.ejs

@@ -1,10 +1,11 @@
 import { defineComponent, inject, onMounted, ref, Ref } from 'vue';
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 import LoginService from '@/account/login.service';
 import ActivateService from './activate.service';
-import { useRoute } from 'vue-router/composables';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   setup() {
     const activateService = inject('activateService', () => new ActivateService(), true);
     const loginService = inject<LoginService>('loginService');
@@ -23,7 +24,7 @@ export default defineComponent({
         error.value = true;
         success.value = false;
       }
-    });
+    })
 
     const openLogin = () => {
       loginService.openLogin();

generators/vue/templates/src/main/webapp/app/account/change-password/change-password.component.ts.ejs

@@ -1,12 +1,13 @@
 import { ComputedRef, defineComponent, inject, ref, Ref } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 import { useVuelidate } from '@vuelidate/core'
 import { maxLength, minLength, required, sameAs } from '@vuelidate/validators';
 import axios from 'axios';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   validations() {
     return {
       resetPassword: {

generators/vue/templates/src/main/webapp/app/account/change-password/change-password.vue.ejs

@@ -66,7 +66,7 @@
                             v-model="v$.resetPassword.confirmPassword.$model" minlength="4" maxlength="50" required data-cy="confirmPassword" />
                         <div
                             v-if="v$.resetPassword.confirmPassword.$anyDirty && v$.resetPassword.confirmPassword.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.resetAccount.confirmPassword.sameAsPassword"
+                            <small class="form-text text-danger" v-if="!v$.resetPassword.confirmPassword.sameAsPassword"
                                 v-text="t$('global.messages.error.dontmatch')">
                                 The password and its confirmation do not match!
                             </small>

generators/vue/templates/src/main/webapp/app/account/login-form/login-form.component.ts.ejs

@@ -1,13 +1,14 @@
 import axios from 'axios';
 import { defineComponent, inject, ref, Ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRoute, useRouter } from 'vue-router';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 import AccountService from '../account.service';
-import LoginService from '../login.service';
+import LoginService from '@/account/login.service';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   setup() {
     const authenticationError: Ref<boolean> = ref(false);
     const login: Ref<string> = ref(null);

generators/vue/templates/src/main/webapp/app/account/register/register.component.ts.ejs

@@ -1,6 +1,6 @@
 import { computed, defineComponent, inject, ref, Ref } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 import { useVuelidate } from '@vuelidate/core'
 import { email, helpers, maxLength, minLength, required, sameAs } from '@vuelidate/validators';
@@ -11,6 +11,7 @@ import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from '@/constants';
 const loginPattern = helpers.regex(/<%- webappLoginRegExp %>/);
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Register',
   validations() {
     return {

generators/vue/templates/src/main/webapp/app/account/reset-password/finish/reset-password-finish.component.ts.ejs

@@ -1,13 +1,14 @@
 import { defineComponent, inject, ref, Ref } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 import axios from 'axios';
 import { useVuelidate } from '@vuelidate/core'
 import { maxLength, minLength, required, sameAs } from '@vuelidate/validators';
 import LoginService from '@/account/login.service';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ResetPasswordFinish',
   validations() {
     return {
@@ -61,14 +62,14 @@ export default defineComponent({
     };
   },
   methods: {
-    finishReset(): void {
+    finishReset() {
       this.doNotMatch = null;
       this.success = null;
       this.error = null;
       if (this.resetAccount.newPassword !== this.resetAccount.confirmPassword) {
         this.doNotMatch = 'ERROR';
       } else {
-        axios
+        return axios
           .post('api/account/reset-password/finish', { key: this.key, newPassword: this.resetAccount.newPassword })
           .then(() => {
             this.success = 'OK';

generators/vue/templates/src/main/webapp/app/account/reset-password/init/reset-password-init.component.ts.ejs

@@ -1,6 +1,6 @@
 import { defineComponent, ref, Ref } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 import { useVuelidate } from '@vuelidate/core'
 import { email, maxLength, minLength, required } from '@vuelidate/validators';
@@ -22,6 +22,7 @@ interface ResetAccount {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ResetPasswordInit',
   validations,
   setup(prop) {
@@ -44,6 +45,7 @@ export default defineComponent({
   methods: {
     async requestReset(): Promise<void> {
       this.error = null;
+      this.success = false;
       await axios
         .post('api/account/reset-password/init', this.resetAccount.email, {
           headers: {
@@ -54,7 +56,7 @@ export default defineComponent({
           this.success = true;
         })
         .catch(() => {
-          this.success = null;
+          this.success = false;
           this.error = 'ERROR';
         });
     },

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

@@ -1,12 +1,13 @@
 import { defineComponent, ref, Ref, computed } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 import axios from 'axios';
 
 import { useStore } from '@/store';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Sessions',
   setup() {
     const store = useStore();

generators/vue/templates/src/main/webapp/app/account/settings/settings.component.ts.ejs

@@ -1,6 +1,6 @@
 import { computed, ComputedRef, defineComponent, inject, ref, Ref } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 import languages from '@/shared/config/languages';
 <%_ } _%>
 import { useVuelidate } from '@vuelidate/core'
@@ -31,6 +31,7 @@ const validations = {
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Settings',
   validations,
   setup() {
@@ -57,10 +58,10 @@ export default defineComponent({
     };
   },
   methods: {
-    save(): void {
+    save() {
       this.error = null;
       this.errorEmailExists = null;
-      axios
+      return axios
         .post('api/account', this.settingsAccount)
         .then(() => {
           this.error = null;

generators/vue/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs

@@ -1,12 +1,13 @@
 import { computed, defineComponent, inject, ref, Ref } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 
 import { orderAndFilterBy } from '@/shared/computables';
 import ConfigurationService from './configuration.service';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: '<%=jhiPrefixCapitalized%>Configuration',
   setup() {
     const configurationService = inject('configurationService', () => new ConfigurationService(), true);

generators/vue/templates/src/main/webapp/app/admin/docs/docs.component.ts.ejs

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: '<%=jhiPrefixCapitalized%>Docs',
 });

generators/vue/templates/src/main/webapp/app/admin/gateway/gateway.component.ts.ejs

@@ -1,10 +1,11 @@
 import { defineComponent, inject, ref, Ref, onMounted } from 'vue';
 <%_ if (enableTranslation) { _%>
-import { useI18n } from 'vue-i18n-bridge';
+import { useI18n } from 'vue-i18n';
 <%_ } _%>
 import GatewayService from './gateway.service';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: '<%=jhiPrefixCapitalized%>GatewayComponent',
   setup() {
     const gatewayService = inject('gatewayService', () => new GatewayService(), true);