diff --git a/src/main/webapp/app/module/primary/module-properties/ModuleProperties.component.ts b/src/main/webapp/app/module/primary/module-properties/ModuleProperties.component.ts
new file mode 100644
index 00000000000..72698b0a9a0
--- /dev/null
+++ b/src/main/webapp/app/module/primary/module-properties/ModuleProperties.component.ts
@@ -0,0 +1,49 @@
+import { ModuleProperty } from '@/module/domain/ModuleProperty';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'ModulePropertiesVue',
+  props: {
+    properties: {
+      type: Array as PropType<Array<ModuleProperty>>,
+      required: true,
+    },
+    moduleSlug: {
+      type: String,
+      required: true,
+    },
+    moduleProperties: {
+      type: Map<string, string | number | boolean>,
+      required: true,
+    },
+    propertiesType: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const propertiesStats = (): string => {
+      return `${propertiesWithValueCount()} / ${props.properties.length}`;
+    };
+
+    const propertiesWithValueCount = (): number => {
+      return props.properties.filter(property => notEmpty(props.moduleProperties.get(property.key))).length;
+    };
+
+    return {
+      propertiesStats,
+    };
+  },
+});
+
+function notEmpty(value: string | number | boolean | undefined): boolean {
+  if (value === undefined) {
+    return false;
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length !== 0;
+  }
+
+  return true;
+}
diff --git a/src/main/webapp/app/module/primary/module-properties/ModuleProperties.html b/src/main/webapp/app/module/primary/module-properties/ModuleProperties.html
new file mode 100644
index 00000000000..6589a29a6bc
--- /dev/null
+++ b/src/main/webapp/app/module/primary/module-properties/ModuleProperties.html
@@ -0,0 +1,12 @@
+<div class="jhipster-module-properties" v-if="properties.length !== 0">
+  <div class="jhipster-module-properties--type">
+    {{ propertiesType }}
+    <div :data-selector="`module-${moduleSlug}-${propertiesType}-properties-stats`">{{ propertiesStats() }}</div>
+  </div>
+  <div v-for="property in properties" class="jhipster-module-properties--property">
+    <div class="jhipster-module-properties--property-key">{{ property.key }}</div>
+    <div class="jhipster-module-properties--property-value" :data-selector="`module-${moduleSlug}-${property.key}-property-value`">
+      {{ moduleProperties.get(property.key) }}
+    </div>
+  </div>
+</div>
diff --git a/src/main/webapp/app/module/primary/module-properties/ModuleProperties.vue b/src/main/webapp/app/module/primary/module-properties/ModuleProperties.vue
new file mode 100644
index 00000000000..9a8de9de059
--- /dev/null
+++ b/src/main/webapp/app/module/primary/module-properties/ModuleProperties.vue
@@ -0,0 +1,26 @@
+<template src="./ModuleProperties.html"></template>
+
+<script lang="ts" src="./ModuleProperties.component.ts"></script>
+
+<style>
+.jhipster-module-properties {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.jhipster-module-properties--type {
+  width: 6em;
+}
+
+.jhipster-module-properties--property {
+  margin-right: 15px;
+}
+
+.jhipster-module-properties--property-key {
+  font-weight: bold;
+}
+
+.jhipster-module-properties--property-value {
+  height: 1em;
+}
+</style>
diff --git a/src/main/webapp/app/module/primary/module-properties/index.ts b/src/main/webapp/app/module/primary/module-properties/index.ts
new file mode 100644
index 00000000000..792fee4cb27
--- /dev/null
+++ b/src/main/webapp/app/module/primary/module-properties/index.ts
@@ -0,0 +1,3 @@
+import ModulePropertiesVue from './ModuleProperties.vue';
+
+export { ModulePropertiesVue };
diff --git a/src/main/webapp/app/module/primary/modules/Modules.component.ts b/src/main/webapp/app/module/primary/modules/Modules.component.ts
index 2769e0c986c..2d0b0e9127b 100644
--- a/src/main/webapp/app/module/primary/modules/Modules.component.ts
+++ b/src/main/webapp/app/module/primary/modules/Modules.component.ts
@@ -1,3 +1,4 @@
+import { ModulePropertiesVue } from '../module-properties';
 import { AlertBus } from '@/common/domain/alert/AlertBus';
 import { Loader } from '@/loader/primary/Loader';
 import { Category } from '@/module/domain/Category';
@@ -9,6 +10,7 @@ import { defineComponent, inject, onMounted, reactive, ref } from 'vue';
 
 export default defineComponent({
   name: 'ModulesVue',
+  components: { ModulePropertiesVue },
   setup() {
     const alertBus = inject('alertBus') as AlertBus;
     const modules = inject('modules') as ModulesRepository;
diff --git a/src/main/webapp/app/module/primary/modules/Modules.html b/src/main/webapp/app/module/primary/modules/Modules.html
index a2534e5f80e..485b8c17542 100644
--- a/src/main/webapp/app/module/primary/modules/Modules.html
+++ b/src/main/webapp/app/module/primary/modules/Modules.html
@@ -97,23 +97,18 @@ <h2 class="jhipster-module-category--name">{{ category.name }}</h2>
               <div class="jhipster-module--slug">{{ module.slug }}</div>
               <div class="jhipster-module--description">{{ module.description}}</div>
 
-              <div class="jhipster-module--properties">
-                <div v-for="property in mandatoryProperties(module.slug)" class="jhipster-module--property">
-                  <div class="jhipster-module--property-key">{{ property.key }}</div>
-                  <div class="jhipster-module--property-value" :data-selector="`module-${module.slug}-${property.key}-property-value`">
-                    {{ moduleProperties.get(property.key) }}
-                  </div>
-                </div>
-              </div>
-
-              <div class="jhipster-module--properties">
-                <div v-for="property in optionalProperties(module.slug)" class="jhipster-module--property">
-                  <div class="jhipster-module--property-key">{{ property.key }}</div>
-                  <div class="jhipster-module--property-value" :data-selector="`module-${module.slug}-${property.key}-property-value`">
-                    {{ moduleProperties.get(property.key) }}
-                  </div>
-                </div>
-              </div>
+              <ModulePropertiesVue
+                propertiesType="Mandatory"
+                :properties="mandatoryProperties(module.slug)"
+                :moduleSlug="module.slug"
+                :moduleProperties="moduleProperties"
+              />
+              <ModulePropertiesVue
+                propertiesType="Optional"
+                :properties="optionalProperties(module.slug)"
+                :moduleSlug="module.slug"
+                :moduleProperties="moduleProperties"
+              />
             </div>
 
             <button
diff --git a/src/main/webapp/app/module/primary/modules/Modules.vue b/src/main/webapp/app/module/primary/modules/Modules.vue
index 14f1bdeb34f..73c9cd79e32 100644
--- a/src/main/webapp/app/module/primary/modules/Modules.vue
+++ b/src/main/webapp/app/module/primary/modules/Modules.vue
@@ -80,21 +80,6 @@
   font-weight: bold;
 }
 
-.jhipster-module--properties {
-  display: flex;
-}
-
-.jhipster-module--property {
-  margin-right: 15px;
-}
-
-.jhipster-module--property-key {
-  font-weight: bold;
-}
-.jhipster-module--property-value {
-  height: 1em;
-}
-
 .jhipster-module--apply-button {
   background-color: transparent;
   border: 0;
diff --git a/src/test/javascript/spec/module/primary/Modules.spec.ts b/src/test/javascript/spec/module/primary/Modules.spec.ts
index e6a91efd548..0038e9214a4 100644
--- a/src/test/javascript/spec/module/primary/Modules.spec.ts
+++ b/src/test/javascript/spec/module/primary/Modules.spec.ts
@@ -1,4 +1,4 @@
-import { flushPromises, shallowMount, VueWrapper } from '@vue/test-utils';
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
 import { defaultModules, ModulesRepositoryStub, stubModulesRepository } from '../domain/Modules.fixture';
 import { ModulesVue } from '@/module/primary/modules';
 import { ModulesRepository } from '@/module/domain/ModulesRepository';
@@ -12,7 +12,7 @@ interface WrapperOptions {
 }
 
 const wrap = (options: WrapperOptions): VueWrapper => {
-  return shallowMount(ModulesVue, {
+  return mount(ModulesVue, {
     global: {
       provide: {
         modules: options.modules,
@@ -108,8 +108,11 @@ describe('Modules', () => {
     await flushForm(wrapper);
 
     expect(wrapper.find(wrappedElement('module-spring-cucumber-baseName-property-value')).text()).toBe('test');
+    expect(wrapper.find(wrappedElement('module-spring-cucumber-Mandatory-properties-stats')).text()).toBe('1 / 1');
+
     expect(wrapper.find(wrappedElement('module-spring-cucumber-optionalBoolean-property-value')).text()).toBe('true');
     expect(wrapper.find(wrappedElement('module-spring-cucumber-optionalInteger-property-value')).text()).toBe('42');
+    expect(wrapper.find(wrappedElement('module-spring-cucumber-Optional-properties-stats')).text()).toBe('2 / 2');
   });
 
   it('Should set boolean property to false', async () => {