Start converting vue to composition api.

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

@@ -58,6 +58,7 @@ Options:
   --message-broker <value>                 message brooker
   --with-generated-flag                    Add a GeneratedByJHipster annotation to all generated java classes and interfaces
   --prettier-tab-width                     Default tab width for prettier
+  --with-admin-ui                          Generate administrative user interface
   --skip-git                               Skip git repository initialization
   -h, --help                               display help for command
 "

generators/common/command.mts

@@ -25,6 +25,11 @@ const command: JHipsterCommandDefinition = {
       type: Number,
       scope: 'storage',
     },
+    withAdminUi: {
+      description: 'Generate administrative user interface',
+      type: Boolean,
+      scope: 'storage',
+    },
   },
 };
 

generators/page/page.spec.mts

@@ -49,7 +49,10 @@ describe('generator - page', () => {
           `${CLIENT_MAIN_SRC_DIR}/app/main.ts`,
           `import ${pageName}Service from '@/pages/${pageFolderName}/${pageFolderName}.service';`
         );
-        runResult.assertFileContent(`${CLIENT_MAIN_SRC_DIR}/app/main.ts`, `${pageInstance}Service: () => new ${pageName}Service(),`);
+        runResult.assertFileContent(
+          `${CLIENT_MAIN_SRC_DIR}/app/main.ts`,
+          `provide('${pageInstance}Service', () => new ${pageName}Service());`
+        );
       });
     };
 

generators/page/support/needles.mts

@@ -84,9 +84,8 @@ export function vueAddPageServiceToMain(generator, { clientSrcDir, pageName, pag
     { ignoreNonExisting: true },
     createNeedleCallback({
       needle: 'jhipster-needle-add-entity-service-to-main',
-      contentToAdd: stripMargin(`|${pageInstance}Service: () => new ${pageName}Service(),`),
+      contentToAdd: `provide('${pageInstance}Service', () => new ${pageName}Service());`,
       ignoreWhitespaces: true,
-      autoIndent: false,
     })
   );
 }

generators/page/templates/vue/src/test/javascript/spec/app/pages/page.component.spec.ts.ejs

@@ -19,6 +19,7 @@
 import { createLocalVue, shallowMount, Wrapper } from '@vue/test-utils';
 import sinon, { SinonStubbedInstance } from 'sinon';
 
+import { useStore } from '@/store';
 import * as config from '@/shared/config/config';
 import <%= pageName %>Component from '@/pages/<%= pageFolderName %>/<%= pageFolderName %>.vue';
 import <%= pageName %>Class from '@/pages/<%= pageFolderName %>/<%= pageFolderName %>.component';
@@ -30,7 +31,7 @@ config.initVueApp(localVue);
 <%_ if (enableTranslation) { _%>
 const i18n = config.initI18N(localVue);
 <%_ } _%>
-const store = config.initVueXStore(localVue);
+const store = useStore();
 
 describe('Component Tests', () => {
   describe('<%= pageName %> Component', () => {

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

@@ -254,6 +254,9 @@ exports[`generator - vue gateway-jwt-skipUserManagement(true)-withAdminUi(false)
   "src/app/shims-vue.d.ts": {
     "stateCleared": "modified",
   },
+  "src/app/store.ts": {
+    "stateCleared": "modified",
+  },
   "src/content/css/loading.css": {
     "stateCleared": "modified",
   },
@@ -419,10 +422,10 @@ exports[`generator - vue gateway-jwt-skipUserManagement(true)-withAdminUi(false)
   "test/spec/app/shared/sort/sorts.spec.ts": {
     "stateCleared": "modified",
   },
-  "tsconfig.json": {
+  "test/spec/tsconfig.json": {
     "stateCleared": "modified",
   },
-  "tsconfig.spec.json": {
+  "tsconfig.json": {
     "stateCleared": "modified",
   },
   "webpack/config.js": {
@@ -748,6 +751,9 @@ exports[`generator - vue gateway-oauth2-withAdminUi(true)-skipJhipsterDependenci
   "src/app/shims-vue.d.ts": {
     "stateCleared": "modified",
   },
+  "src/app/store.ts": {
+    "stateCleared": "modified",
+  },
   "src/content/css/loading.css": {
     "stateCleared": "modified",
   },
@@ -937,10 +943,10 @@ exports[`generator - vue gateway-oauth2-withAdminUi(true)-skipJhipsterDependenci
   "test/spec/app/shared/sort/sorts.spec.ts": {
     "stateCleared": "modified",
   },
-  "tsconfig.json": {
+  "test/spec/tsconfig.json": {
     "stateCleared": "modified",
   },
-  "tsconfig.spec.json": {
+  "tsconfig.json": {
     "stateCleared": "modified",
   },
   "webpack/config.js": {
@@ -1209,6 +1215,9 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "src/app/shims-vue.d.ts": {
     "stateCleared": "modified",
   },
+  "src/app/store.ts": {
+    "stateCleared": "modified",
+  },
   "src/content/css/loading.css": {
     "stateCleared": "modified",
   },
@@ -1383,10 +1392,10 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "test/spec/app/shared/sort/sorts.spec.ts": {
     "stateCleared": "modified",
   },
-  "tsconfig.json": {
+  "test/spec/tsconfig.json": {
     "stateCleared": "modified",
   },
-  "tsconfig.spec.json": {
+  "tsconfig.json": {
     "stateCleared": "modified",
   },
   "webpack/config.js": {
@@ -1661,6 +1670,9 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "src/main/webapp2/app/shims-vue.d.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp2/app/store.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp2/content/css/loading.css": {
     "stateCleared": "modified",
   },
@@ -1838,10 +1850,10 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "src/test/javascript2/spec/app/shared/sort/sorts.spec.ts": {
     "stateCleared": "modified",
   },
-  "tsconfig.json": {
+  "src/test/javascript2/spec/tsconfig.json": {
     "stateCleared": "modified",
   },
-  "tsconfig.spec.json": {
+  "tsconfig.json": {
     "stateCleared": "modified",
   },
   "webpack/config.js": {
@@ -2233,6 +2245,9 @@ exports[`generator - vue monolith-jwt-skipUserManagement(false)-withAdminUi(true
   "src/main/webapp2/app/shims-vue.d.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp2/app/store.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp2/content/css/loading.css": {
     "stateCleared": "modified",
   },
@@ -2446,10 +2461,10 @@ exports[`generator - vue monolith-jwt-skipUserManagement(false)-withAdminUi(true
   "src/test/javascript2/spec/app/shared/sort/sorts.spec.ts": {
     "stateCleared": "modified",
   },
-  "tsconfig.json": {
+  "src/test/javascript2/spec/tsconfig.json": {
     "stateCleared": "modified",
   },
-  "tsconfig.spec.json": {
+  "tsconfig.json": {
     "stateCleared": "modified",
   },
   "webpack/config.js": {
@@ -2709,6 +2724,9 @@ exports[`generator - vue monolith-oauth2-withAdminUi(false)-skipJhipsterDependen
   "src/main/webapp/app/shims-vue.d.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp/app/store.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp/content/css/loading.css": {
     "stateCleared": "modified",
   },
@@ -2871,10 +2889,10 @@ exports[`generator - vue monolith-oauth2-withAdminUi(false)-skipJhipsterDependen
   "src/test/javascript/spec/app/shared/sort/sorts.spec.ts": {
     "stateCleared": "modified",
   },
-  "tsconfig.json": {
+  "src/test/javascript/spec/tsconfig.json": {
     "stateCleared": "modified",
   },
-  "tsconfig.spec.json": {
+  "tsconfig.json": {
     "stateCleared": "modified",
   },
   "webpack/config.js": {
@@ -3140,6 +3158,9 @@ exports[`generator - vue monolith-session-skipUserManagement(true)-withAdminUi(f
   "src/main/webapp/app/shims-vue.d.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp/app/store.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp/content/css/loading.css": {
     "stateCleared": "modified",
   },
@@ -3302,10 +3323,10 @@ exports[`generator - vue monolith-session-skipUserManagement(true)-withAdminUi(f
   "src/test/javascript/spec/app/shared/sort/sorts.spec.ts": {
     "stateCleared": "modified",
   },
-  "tsconfig.json": {
+  "src/test/javascript/spec/tsconfig.json": {
     "stateCleared": "modified",
   },
-  "tsconfig.spec.json": {
+  "tsconfig.json": {
     "stateCleared": "modified",
   },
   "webpack/config.js": {

generators/vue/cleanup.mjs

@@ -48,4 +48,7 @@ export default function cleanupOldFilesTask({ application } = {}) {
   if (this.isJhipsterVersionLessThan('7.4.2')) {
     this.removeFile(`${application.clientSrcDir}app/entities/user/user.oauth2.service.ts`);
   }
+  if (this.isJhipsterVersionLessThan('7.10.1')) {
+    this.removeFile('tsconfig.spec.json');
+  }
 }

generators/vue/files-vue.mjs

@@ -25,7 +25,6 @@ export const vueFiles = {
       templates: [
         'package.json',
         'tsconfig.json',
-        'tsconfig.spec.json',
         '.postcssrc.js',
         '.eslintrc.js',
         'webpack/config.js',
@@ -84,6 +83,7 @@ export const vueFiles = {
         'shared/config/dayjs.ts',
         'shared/config/store/account-store.ts',
         'shared/security/authority.ts',
+        'store.ts',
         'router/index.ts',
         'router/admin.ts',
         'router/pages.ts',
@@ -229,6 +229,7 @@ export const vueFiles = {
       ...clientTestBlock,
       templates: [
         'jest.conf.js',
+        'spec/tsconfig.json',
         'spec/app/account/account.service.spec.ts',
         'spec/app/core/home/home.component.spec.ts',
         'spec/app/core/error/error.component.spec.ts',

generators/vue/generator.spec.mts

@@ -132,13 +132,6 @@ describe(`generator - ${clientFramework}`, () => {
                 "import LogsService from './admin/logs/logs.service';\n" +
                 "import ConfigurationService from '@/admin/configuration/configuration.service';"
             );
-            assertion(
-              `${clientSrcDir}app/main.ts`,
-              '    healthService: () => new HealthService(),\n' +
-                '    configurationService: () => new ConfigurationService(),\n' +
-                '    logsService: () => new LogsService(),\n' +
-                '    metricsService: () => new MetricsService(),'
-            );
 
             assertion(
               `${clientSrcDir}app/router/admin.ts`,

generators/vue/templates/.eslintrc.js.ejs

@@ -32,7 +32,7 @@ module.exports = {
     ecmaVersion: 2020,
     project: [
       './tsconfig.json',
-      './tsconfig.spec.json',
+      './<%= clientTestDir %>spec/tsconfig.json',
 <%_ if (cypressTests) { _%>
       './<%= clientTestDir %>cypress/tsconfig.json',
 <%_ } _%>

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

@@ -1,37 +1,40 @@
-import Component from 'vue-class-component';
-import { Vue, Inject } from 'vue-property-decorator';
+import { defineComponent, inject, ref, Ref } from 'vue';
 import LoginService from '@/account/login.service';
 import ActivateService from './activate.service';
+import { useRouter } from 'vue-router/composables';
 
-@Component
-export default class Activate extends Vue {
-  @Inject('activateService')
-  private activateService: () => ActivateService;
-  @Inject('loginService')
-  private loginService: () => LoginService;
-  success = false;
-  error = false;
+export default defineComponent({
+  setup() {
+    const activateService = inject('activateService', () => new ActivateService(), true);
+    const loginService = inject('loginService', () => new LoginService());
+    const router = useRouter();
 
-  beforeRouteEnter(to, from, next) {
-    next(vm => {
-      if (to.query.key) {
-        vm.init(to.query.key);
+    const success: Ref<boolean> = ref(false);
+    const error: Ref<boolean> = ref(false);
+
+    router.beforeEach(async (to) => {
+      const key = Array.isArray(to.query.key) ? to.query.key[0] : to.query.key;
+      try {
+        await activateService.activateAccount(key);
+        success.value = true;
+        error.value = false;
+      } catch {
+        error.value = true;
+        success.value = false;
       }
     });
-  }
-
-  public init(key: string): void {
-    this.activateService().activateAccount(key)
-      .then(() => {
-        this.success = true;
-        this.error = false;
-      }, () => {
-        this.error = true;
-        this.success = false;
-      });
-  }
 
-  public openLogin(): void {
-    this.loginService().openLogin((<any>this).$root);
-  }
-}
+    return {
+      router,
+      activateService,
+      loginService,
+      success,
+      error,
+    };
+  },
+  methods: {
+    openLogin(): void {
+      this.loginService.openLogin((<any>this).$root);
+    },
+  },
+});