diff --git a/app/src/Controller/ApiV2Controller.php b/app/src/Controller/ApiV2Controller.php
index 3553dca69..78c5fb7c8 100644
--- a/app/src/Controller/ApiV2Controller.php
+++ b/app/src/Controller/ApiV2Controller.php
@@ -280,7 +280,20 @@ public function index() {
     if(!empty($link->attr) && !empty($link->value)) {
       $query = $query->where([$this->$modelsName->getAlias().'.'.$link->attr => $link->value]);
     }
-    
+
+    // This will produce a nested object which is very useful for vue integration
+    if($this->request->getQuery('extended') !== null) {
+      $modelContain = [];
+      $associations = $this->$modelsName->associations();
+      foreach($associations->getByType(['BelongsTo']) as $a) {
+        $modelContain[] = $a->getClassName();
+      }
+
+      if(!empty($modelContain)) {
+        $query = $query->contain($modelContain);
+      }
+    }
+
     if($modelsName == 'AuthenticationEvents') {
       // Special case for filtering on authenticated identifier. There is a
       // similar filter in AuthenticationEventsController::beforeFilter.
diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index 5c4d8ee6d..134060ffe 100644
--- a/app/webroot/js/comanage/components/mvea/mvea-item.js
+++ b/app/webroot/js/comanage/components/mvea/mvea-item.js
@@ -50,7 +50,7 @@ export default {
       </div>
       <div class="field-data data-label">
         <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt.primary }}</span>
-        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
         <span v-if="this.mvea.language" class="mr-1 badge bg-light">{{ calcLangHR(this.mvea.language) }}</span>
       </div>
     </li>
@@ -61,7 +61,7 @@ export default {
       </div>
       <div class="field-data data-label">
         <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt.unverified }}</span>
-        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
       </div>
     </li>
     <!-- Identifiers -->
@@ -71,7 +71,7 @@ export default {
       </div>
       <div class="field-data data-label">
         <span v-if="this.mvea.login" class="mr-1 badge bg-outline-secondary login">{{ this.txt.login }}</span>
-        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
       </div>
     </li>
     <!-- Ad Hoc Attributes -->
@@ -97,7 +97,7 @@ export default {
         </address>                                                
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
       </div>
     </li>
     <!-- Telephone Numbers -->
@@ -106,7 +106,7 @@ export default {
         <a href="#" class="nospin">{{ this.mvea.country_code }} {{ this.mvea.area_code }} {{ this.mvea.number }}</a>                                              
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
       </div>
     </li>
     <!-- Urls -->
@@ -116,7 +116,7 @@ export default {
         <a :href="this.mvea.url" class="canvas-url-link" :title="this.txt.visit"><span class="material-icons">north_east</span></a>                                      
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
       </div>
     </li>
     <!-- Pronouns -->
@@ -125,7 +125,7 @@ export default {
         <a href="#" class="nospin">{{ this.mvea.type_id }}</a>                                              
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
       </div>
     </li>
   `