Fixed #1093 - Anonymous Component in vue-devtools

src/components/accordion/Accordion.vue

@@ -25,6 +25,7 @@
 import {UniqueComponentId} from 'primevue/utils';
 
 export default {
+    name: 'Accordion',
     emits: ['tab-close', 'tab-open', 'update:activeIndex'],
     props: {
         multiple: Boolean,
@@ -100,7 +101,7 @@ export default {
             return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
         },
         isAccordionTab(child) {
-            return child.type.name === 'accordiontab'
+            return child.type.name === 'AccordionTab'
         }
     },
     computed: {

src/components/accordiontab/AccordionTab.vue

@@ -4,10 +4,10 @@
 
 <script>
 export default {
-    name: 'accordiontab',
+    name: 'AccordionTab',
     props: {
         header: null,
         disabled: Boolean
     }
 }
-</script>
+</script>

src/components/autocomplete/AutoComplete.vue

@@ -1,6 +1,6 @@
 <template>
     <span ref="container" :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
-        <input ref="input" :class="inputFieldClass" :style="inputStyle" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @change="onChange" 
+        <input ref="input" :class="inputFieldClass" :style="inputStyle" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @change="onChange"
             type="text" autoComplete="off" v-if="!multiple" role="searchbox" aria-autocomplete="list" :aria-controls="listId">
         <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
             <li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
@@ -8,7 +8,7 @@
                 <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
             </li>
             <li class="p-autocomplete-input-token">
-                <input ref="input" type="text" autoComplete="off" v-bind="$attrs" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown"  @change="onChange" 
+                <input ref="input" type="text" autoComplete="off" v-bind="$attrs" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown"  @change="onChange"
                     role="searchbox" aria-autocomplete="list" :aria-controls="listId">
             </li>
         </ul>
@@ -49,6 +49,7 @@ import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'AutoComplete',
     inheritAttrs: false,
     emits: ['update:modelValue', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete'],
     props: {
@@ -180,7 +181,7 @@ export default {
             else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
                 DomHandler.absolutePosition(this.overlay, target);
-            }                
+            }
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
@@ -475,7 +476,7 @@ export default {
             if (this.forceSelection) {
                 let valid = false;
                 let inputValue = event.target.value.trim();
-                
+
                 if (this.suggestions)  {
                     for (let item of this.suggestions) {
                         let itemValue = this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;

src/components/avatar/Avatar.vue

@@ -10,6 +10,7 @@
 
 <script>
 export default {
+    name: 'Avatar',
     props: {
         label: {
             type: String,

src/components/avatargroup/AvatarGroup.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {}
+export default {
+    name: 'AvatarGroup'
+}
 </script>
 
 <style>

src/components/badge/Badge.vue

@@ -4,6 +4,7 @@
 
 <script>
 export default {
+    name: 'Badge',
     props: {
         value: null,
         severity: null,
@@ -27,4 +28,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/blockui/BlockUI.vue

@@ -8,6 +8,7 @@
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
 
 export default {
+    name: 'BlockUI',
     emits: ['block', 'unblock'],
     props: {
         blocked: {

src/components/breadcrumb/Breadcrumb.vue

@@ -14,6 +14,7 @@
 import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
+    name: 'Breadcrumb',
     props: {
         model: {
             type: Array,
@@ -47,4 +48,4 @@ export default {
 .p-breadcrumb .p-menuitem-link {
     text-decoration: none;
 }
-</style>
+</style>

src/components/breadcrumb/BreadcrumbItem.vue

@@ -15,6 +15,7 @@
 
 <script>
 export default {
+    name: 'BreadcrumbItem',
     props: {
         item: null
     },
@@ -44,4 +45,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/button/Button.vue

@@ -13,6 +13,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Button',
     props: {
         label: {
             type: String

src/components/calendar/Calendar.vue

@@ -1,6 +1,6 @@
 <template>
     <span ref="container" :class="containerClass" :style="style">
-        <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none" 
+        <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none"
             :class="inputClass" :style="inputStyle" />
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
         <Teleport :to="appendTarget" :disabled="appendDisabled">
@@ -140,6 +140,7 @@ import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Calendar',
     inheritAttrs: false,
     emits: ['show', 'hide', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click'],
     props: {
@@ -548,7 +549,7 @@ export default {
             this.unbindScrollListener();
             this.unbindResizeListener();
             this.$emit('hide');
-            
+
             if (this.mask) {
                 this.disableModality();
             }
@@ -1155,7 +1156,7 @@ export default {
             let newHour = this.currentHour + this.stepHour;
             let newPM = this.pm;
 
-           
+
             if (this.hourFormat == '24')
                 newHour = (newHour >= 24) ? (newHour - 24) : newHour;
             else if (this.hourFormat == '12') {
@@ -1165,7 +1166,7 @@ export default {
                 }
                 newHour = (newHour >= 13) ? (newHour - 12) : newHour;
             }
-            
+
 
             if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
                 this.currentHour = newHour;
@@ -1961,7 +1962,7 @@ export default {
                 if (this.overlay) {
                     DomHandler.getFocusableElements(this.overlay).forEach(el => el.tabIndex = '-1');
                 }
-                
+
                 if (this.overlayVisible) {
                     this.overlayVisible = false;
                 }

src/components/card/Card.vue

@@ -17,11 +17,13 @@
 </template>
 
 <script>
-export default {}
+export default {
+    name: 'Card'
+}
 </script>
 
 <style>
 .p-card-header img {
     width: 100%;
 }
-</style>
+</style>

src/components/carousel/Carousel.vue

@@ -58,6 +58,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Carousel',
 	emits: ['update:page'],
 	props: {
 		value: null,
@@ -496,8 +497,7 @@ export default {
     },
     directives: {
         'ripple': Ripple
-    },
+    }
-	name: "Carousel"
 }
 </script>
 

src/components/cascadeselect/CascadeSelect.vue

@@ -16,9 +16,9 @@
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <div class="p-cascadeselect-items-wrapper">
-                        <CascadeSelectSub :options="options" :selectionPath="selectionPath" 
+                        <CascadeSelectSub :options="options" :selectionPath="selectionPath"
                             :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
-                            :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" 
+                            :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren"
                             @option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" :root="true" />
                     </div>
                 </div>
@@ -33,6 +33,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import CascadeSelectSub from './CascadeSelectSub.vue';
 
 export default {
+    name: 'CascadeSelect',
     emits: ['update:modelValue','change','group-change', 'before-show','before-hide','hide','show'],
     data() {
         return {
@@ -73,7 +74,7 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
-        
+
         if (this.overlay) {
             ZIndexUtils.clear(this.overlay);
             this.overlay = null;
@@ -121,7 +122,7 @@ export default {
                 }
             }
 
-            this.selectionPath = path;            
+            this.selectionPath = path;
         },
         findModelOptionInGroup(option, level) {
             if (this.isOptionGroup(option, level)) {
@@ -137,7 +138,7 @@ export default {
             else if ((ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.dataKey))) {
                 return [option];
             }
-            
+
             return null;
         },
         show() {

src/components/cascadeselect/CascadeSelectSub.vue

@@ -9,7 +9,7 @@
                     </template>
                     <span class="p-cascadeselect-group-icon pi pi-angle-right" v-if="isOptionGroup(option)"></span>
                 </div>
-                <cascadeselect-sub v-if="isOptionGroup(option) && isOptionActive(option)" class="p-cascadeselect-sublist" :selectionPath="selectionPath" :options="getOptionGroupChildren(option)"
+                <CascadeSelectSub v-if="isOptionGroup(option) && isOptionActive(option)" class="p-cascadeselect-sublist" :selectionPath="selectionPath" :options="getOptionGroupChildren(option)"
                         :optionLabel="optionLabel" :optionValue="optionValue" :level="level + 1" @option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect"
                         :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" :parentActive="isOptionActive(option)" :dirty="dirty" :templates="templates"/>
             </li>
@@ -23,8 +23,8 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'CascadeSelectSub',
     emits: ['option-select','optiongroup-select'],
-    name: 'cascadeselect-sub',
     props: {
         selectionPath: Array,
         level: Number,
@@ -179,4 +179,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/chart/Chart.vue

@@ -6,6 +6,7 @@
 
 <script>
 export default {
+    name: 'Chart',
     emits: ['select'],
     props: {
         type: String,

src/components/checkbox/Checkbox.vue

@@ -13,6 +13,7 @@
 import {ObjectUtils} from 'primevue/utils';
 
 export default {
+    name: 'Checkbox',
     inheritAttrs: false,
     emits: ['click', 'update:modelValue', 'change'],
     props: {
@@ -64,4 +65,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/chip/Chip.vue

@@ -4,7 +4,7 @@
             <img :src="image" v-if="image">
             <span :class="iconClass" v-else-if="icon"></span>
             <div class="p-chip-text" v-if="label">{{label}}</div>
-            <span v-if="removable" tabindex="0" :class="removeIconClass" 
+            <span v-if="removable" tabindex="0" :class="removeIconClass"
                 @click="close" @keydown.enter="close"></span>
         </slot>
     </div>
@@ -12,6 +12,7 @@
 
 <script>
 export default {
+    name: 'Chip',
     emits: ['remove'],
     props: {
         label: {
@@ -71,7 +72,7 @@ export default {
 .p-chip-text {
     line-height: 1.5;
 }
- 
+
 .p-chip-icon.pi {
     line-height: 1.5;
 }

src/components/chips/Chips.vue

@@ -17,6 +17,7 @@
 
 <script>
 export default {
+    name: 'Chips',
     inheritAttrs: false,
     emits: ['update:modelValue', 'add', 'remove'],
     props: {

src/components/colorpicker/ColorPicker.vue

@@ -28,6 +28,7 @@ import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/uti
 import OverlayEventBus from 'primevue/overlayeventbus';
 
 export default {
+    name: 'ColorPicker',
     emits: ['update:modelValue'],
     props: {
         modelValue: {
@@ -100,7 +101,7 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
-        
+
         if (this.picker && this.autoZIndex) {
             ZIndexUtils.clear(this.picker);
         }

src/components/column/Column.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-    name: 'column',
+    name: 'Column',
     props: {
         columnKey: {
             type: null,
@@ -171,4 +171,4 @@ export default {
         return null;
     }
 }
-</script>
+</script>

src/components/columngroup/ColumnGroup.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-    name: 'columngroup',
+    name: 'ColumnGroup',
     props: {
         type: {
             type: String,
@@ -11,4 +11,4 @@ export default {
         return null;
     }
 }
-</script>
+</script>

src/components/confirmdialog/ConfirmDialog.vue

@@ -1,7 +1,7 @@
 <template>
     <CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog"
         :breakpoints="breakpoints">
-        <i :class="iconClass" /> 
+        <i :class="iconClass" />
         <span class="p-confirm-dialog-message">{{message}}</span>
         <template #footer>
             <CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()"/>
@@ -16,6 +16,7 @@ import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
 
 export default {
+    name: 'ConfirmDialog',
     props: {
         group: String,
         breakpoints: {
@@ -110,4 +111,4 @@ export default {
         'CDButton': Button
     }
 }
-</script>
+</script>

src/components/confirmpopup/ConfirmPopup.vue

@@ -3,7 +3,7 @@
         <transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
                 <div class="p-confirm-popup-content">
-                    <i :class="iconClass" /> 
+                    <i :class="iconClass" />
                     <span class="p-confirm-popup-message">{{confirmation.message}}</span>
                 </div>
                 <div class="p-confirm-popup-footer">
@@ -22,6 +22,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 
 export default {
+    name: 'ConfirmPopup',
     inheritAttrs: false,
     props: {
         group: String

src/components/contextmenu/ContextMenu.vue

@@ -13,6 +13,7 @@ import {DomHandler,ZIndexUtils} from 'primevue/utils';
 import ContextMenuSub from './ContextMenuSub.vue';
 
 export default {
+    name: 'ContextMenu',
     inheritAttrs: false,
     props: {
 		model: {
@@ -246,4 +247,4 @@ export default {
 .p-contextmenu-enter-active {
     transition: opacity 250ms;
 }
-</style>
+</style>

src/components/contextmenu/ContextMenuSub.vue

@@ -16,7 +16,7 @@
                         <span class="p-menuitem-text">{{item.label}}</span>
                         <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
                     </a>
-                    <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
+                    <ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
                         @leaf-click="onLeafClick" :parentActive="item === activeItem" />
                 </li>
                 <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@@ -30,8 +30,8 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'ContextMenuSub',
     emits: ['leaf-click'],
-    name: 'sub-menu',
     props: {
         model: {
             type: Array,
@@ -141,4 +141,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/datatable/BodyCell.vue

@@ -38,6 +38,7 @@ import RowCheckbox from './RowCheckbox.vue';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'BodyCell',
     emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
             'row-toggle', 'radio-change', 'checkbox-change'],
     props: {
@@ -347,4 +348,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/datatable/ColumnFilter.vue

@@ -4,7 +4,7 @@
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
         <button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
-            :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}" 
+            :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
             @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
         <button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <Teleport to="body">
@@ -13,7 +13,7 @@
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                     <template v-if="display === 'row'">
                         <ul class="p-column-filter-row-items">
-                            <li class="p-column-filter-row-item" v-for="(matchMode,i) of matchModes" :key="matchMode.label" 
+                            <li class="p-column-filter-row-item" v-for="(matchMode,i) of matchModes" :key="matchMode.label"
                                 @click="onRowMatchModeChange(matchMode.value)" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
                                 :class="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" :tabindex="i === 0 ? '0' : null">{{matchMode.label}}</li>
                             <li class="p-column-filter-separator"></li>
@@ -61,6 +61,7 @@ import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
 
 export default {
+    name: 'ColumnFilter',
     emits: ['filter-change','filter-apply','operator-change','matchmode-change','constraint-add','constraint-remove','filter-clear','apply-click'],
     props: {
         field: {
@@ -178,7 +179,7 @@ export default {
                 _filters[this.field].value = null;
                 _filters[this.field].matchMode = this.defaultMatchMode;
             }
-            
+
             this.$emit('filter-clear');
             this.$emit('filter-change', _filters);
             this.$emit('filter-apply');
@@ -194,7 +195,7 @@ export default {
                 let fieldFilter = this.filtersStore[this.field];
                 if (fieldFilter) {
                     if (fieldFilter.operator)
-                        return !this.isFilterBlank(fieldFilter.constraints[0].value); 
+                        return !this.isFilterBlank(fieldFilter.constraints[0].value);
                     else
                         return !this.isFilterBlank(fieldFilter.value);
                 }
@@ -223,7 +224,7 @@ export default {
                 case 'Tab':
                     this.overlayVisible = false;
                 break;
-                
+
                 case 'ArrowDown':
                     if (this.overlayVisible) {
                         let focusable = DomHandler.getFocusableElements(this.overlay);
@@ -243,7 +244,7 @@ export default {
             this.overlayVisible = false;
             if (this.$refs.icon) {
                 this.$refs.icon.focus();
-            } 
+            }
         },
         onRowMatchModeChange(matchMode) {
             let _filters = {...this.filters};
@@ -256,7 +257,7 @@ export default {
         onRowMatchModeKeyDown(event) {
             let item = event.target;
 
-            switch(event.key) {            
+            switch(event.key) {
                 case 'ArrowDown':
                     var nextItem = this.findNextItem(item);
                     if (nextItem) {
@@ -440,7 +441,7 @@ export default {
         containerClass() {
             return [
                 'p-column-filter p-fluid', {
-                    'p-column-filter-row': this.display === 'row', 
+                    'p-column-filter-row': this.display === 'row',
                     'p-column-filter-menu': this.display === 'menu'
                 }
             ]
@@ -452,7 +453,7 @@ export default {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);
         },
         matchModes() {
-            return this.matchModeOptions || 
+            return this.matchModeOptions ||
                 this.$primevue.config.filterMatchModeOptions[this.type].map(key => {
                     return {label: this.$primevue.config.locale[key], value: key}
                 });
@@ -502,4 +503,4 @@ export default {
         'CFButton': Button
     }
 }
-</script>
+</script>

src/components/datatable/DataTable.vue

@@ -72,6 +72,7 @@ import TableBody from './TableBody.vue';
 import TableFooter from './TableFooter.vue';
 
 export default {
+    name: 'DataTable',
     emits: ['update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click',
         'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
         'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
@@ -1661,7 +1662,7 @@ export default {
             children.forEach(child => {
                 if (child.dynamicChildren && child.children instanceof Array)
                     cols = [...cols, ...child.children];
-                else if (child.type.name === 'column')
+                else if (child.type.name === 'Column')
                     cols.push(child);
             });
 
@@ -1683,7 +1684,7 @@ export default {
             const children = this.getChildren();
             if (children) {
                 for (let child of children) {
-                    if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'header') {
+                    if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'header') {
                         return child;
                     }
                 }
@@ -1695,7 +1696,7 @@ export default {
             const children = this.getChildren();
             if (children) {
                 for (let child of children) {
-                    if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'footer') {
+                    if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'footer') {
                         return child;
                     }
                 }

src/components/datatable/FooterCell.vue

@@ -10,6 +10,7 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'FooterCell',
     props: {
         column: {
             type: null,
@@ -71,4 +72,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/datatable/HeaderCell.vue

@@ -10,10 +10,10 @@
             <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
             <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getMultiSortMetaIndex() + 1}}</span>
             <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" v-if="columnProp('selectionMode') ==='multiple' && filterDisplay !== 'row'" />
-            <DTColumnFilter v-if="filterDisplay === 'menu' && column.children && column.children.filter" :field="columnProp('filterField')||columnProp('field')" :type="columnProp('dataType')" display="menu"  
+            <DTColumnFilter v-if="filterDisplay === 'menu' && column.children && column.children.filter" :field="columnProp('filterField')||columnProp('field')" :type="columnProp('dataType')" display="menu"
-            :showMenu="columnProp('showFilterMenu')" :filterElement="column.children && column.children.filter" 
+            :showMenu="columnProp('showFilterMenu')" :filterElement="column.children && column.children.filter"
-            :filterHeaderTemplate="column.children && column.children.filterheader" :filterFooterTemplate="column.children && column.children.filterfooter" 
+            :filterHeaderTemplate="column.children && column.children.filterheader" :filterFooterTemplate="column.children && column.children.filterfooter"
-            :filterClearTemplate="column.children && column.children.filterclear" :filterApplyTemplate="column.children && column.children.filterapply" 
+            :filterClearTemplate="column.children && column.children.filterclear" :filterApplyTemplate="column.children && column.children.filterapply"
             :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp('filterMenuStyle')" :filterMenuClass="columnProp('filterMenuClass')"
             :showOperator="columnProp('showFilterOperator')" :showClearButton="columnProp('showClearButton')" :showApplyButton="columnProp('showApplyButton')"
             :showMatchModes="columnProp('showFilterMatchModes')" :showAddButton="columnProp('showAddButton')" :matchModeOptions="columnProp('filterMatchModeOptions')" :maxConstraints="columnProp('maxConstraints')"
@@ -28,8 +28,9 @@ import HeaderCheckbox from './HeaderCheckbox.vue';
 import ColumnFilter from './ColumnFilter.vue';
 
 export default {
+    name: 'HeaderCell',
     emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
-            'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply', 
+            'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
             'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
         column: {
@@ -230,4 +231,4 @@ export default {
         'DTColumnFilter': ColumnFilter
     }
 }
-</script>
+</script>

src/components/datatable/HeaderCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="p-checkbox p-component" @click="onClick" @keydown.space.prevent="onClick">
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" 
+        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
             role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
         </div>
@@ -9,6 +9,7 @@
 
 <script>
 export default {
+    name: 'HeaderCheckbox',
     inheritAttrs: false,
     emits: ['change'],
     props: {
@@ -34,4 +35,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/datatable/RowCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="p-checkbox p-component" @click="onClick">
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" 
+        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
             role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @keydown.space.prevent="onClick" @focus="onFocus($event)" @blur="onBlur($event)">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
         </div>
@@ -9,6 +9,7 @@
 
 <script>
 export default {
+    name: 'RowCheckbox',
     inheritAttrs: false,
     emits: ['change'],
     props: {
@@ -38,4 +39,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/datatable/RowRadioButton.vue

@@ -8,6 +8,7 @@
 
 <script>
 export default {
+    name: 'RowRadioButton',
     inheritAttrs: false,
     emits: ['change'],
     props: {
@@ -38,4 +39,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/datatable/TableBody.vue

@@ -48,9 +48,10 @@ import {ObjectUtils,DomHandler} from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
-    emits: ['rowgroup-toggle', 'row-click', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown', 
+    name: 'TableBody',
+    emits: ['rowgroup-toggle', 'row-click', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
         'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle',
-        'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 
+        'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel',
         'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
     props: {
         value: {
@@ -459,7 +460,7 @@ export default {
             if (this.scrollable) {
                 return {top: this.rowGroupHeaderStyleObject.top};
             }
-            
+
             return null;
         }
     },
@@ -467,4 +468,4 @@ export default {
         'DTBodyCell': BodyCell
     }
 }
-</script>
+</script>

src/components/datatable/TableFooter.vue

@@ -19,6 +19,7 @@
 import FooterCell from './FooterCell.vue';
 
 export default {
+    name: 'TableFooter',
     props: {
         columnGroup: {
             type: null,
@@ -57,4 +58,4 @@ export default {
         'DTFooterCell': FooterCell
     }
 }
-</script>
+</script>

src/components/datatable/TableHeader.vue

@@ -3,14 +3,14 @@
         <template v-if="!columnGroup">
             <tr role="row">
                 <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                    <DTHeaderCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :column="col"  
+                    <DTHeaderCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :column="col"
-                    @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)" 
+                    @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
                     @column-dragstart="$emit('column-dragstart', $event)" @column-dragover="$emit('column-dragover', $event)" @column-dragleave="$emit('column-dragleave', $event)" @column-drop="$emit('column-drop', $event)"
                     :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
                     :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
                     :allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
                     :filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
-                    @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" 
+                    @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)"
                     @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
                 </template>
             </tr>
@@ -18,14 +18,14 @@
                 <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
                     <th :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)">
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="$emit('checkbox-change', $event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple'" />
-                        <DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col,'filterField')||columnProp(col,'field')" :type="columnProp(col,'dataType')" display="row"  
+                        <DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col,'filterField')||columnProp(col,'field')" :type="columnProp(col,'dataType')" display="row"
-                        :showMenu="columnProp(col,'showFilterMenu')" :filterElement="col.children && col.children.filter" 
+                        :showMenu="columnProp(col,'showFilterMenu')" :filterElement="col.children && col.children.filter"
-                        :filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter" 
+                        :filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter"
-                        :filterClearTemplate="col.children && col.children.filterclear" :filterApplyTemplate="col.children && col.children.filterapply" 
+                        :filterClearTemplate="col.children && col.children.filterclear" :filterApplyTemplate="col.children && col.children.filterapply"
                         :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col,'filterMenuStyle')" :filterMenuClass="columnProp(col,'filterMenuClass')"
                         :showOperator="columnProp(col,'showFilterOperator')" :showClearButton="columnProp(col,'showClearButton')" :showApplyButton="columnProp(col,'showApplyButton')"
                         :showMatchModes="columnProp(col,'showFilterMatchModes')" :showAddButton="columnProp(col,'showAddButton')" :matchModeOptions="columnProp(col,'filterMatchModeOptions')" :maxConstraints="columnProp(col,'maxConstraints')"
-                        @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" 
+                        @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)"
                         @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
                     </th>
                 </template>
@@ -34,12 +34,12 @@
         <template v-else>
             <tr v-for="(row,i) of columnGroup.children.default()" :key="i" role="row">
                 <template v-for="(col,j) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||j">
-                    <DTHeaderCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :column="col"  
+                    <DTHeaderCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :column="col"
                     @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
                     :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
                     :allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
                     :filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
-                    @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" 
+                    @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)"
                     @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
                 </template>
             </tr>
@@ -53,8 +53,9 @@ import HeaderCheckbox from './HeaderCheckbox.vue';
 import ColumnFilter from './ColumnFilter.vue';
 
 export default {
+    name: 'TableHeader',
     emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
-            'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply', 
+            'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
             'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
 		columnGroup: {

src/components/datatable/TableLoadingBody.vue

@@ -10,6 +10,7 @@
 
 <script>
 export default {
+    name: 'TableLoadingBody',
     props: {
         columns: {
             type: null,
@@ -21,4 +22,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/dataview/DataView.vue

@@ -44,6 +44,7 @@ import {ObjectUtils} from 'primevue/utils';
 import Paginator from 'primevue/paginator';
 
 export default {
+    name: 'DataView',
     emits: ['update:first', 'update:rows', 'page'],
     props: {
         value: {
@@ -219,4 +220,4 @@ export default {
         'DVPaginator': Paginator
     }
 }
-</script>
+</script>

src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue

@@ -11,6 +11,7 @@
 
 <script>
 	export default {
+        name: 'DataViewLayoutOptions',
 		emits: ['update:modelValue'],
 		props: {
 			modelValue: String
@@ -35,4 +36,4 @@
 			}
 		}
 	}
-</script>
+</script>

src/components/deferredcontent/DeferredContent.vue

@@ -6,6 +6,7 @@
 
 <script>
 export default {
+    name: 'DeferredContent',
     emits: ['load'],
     data() {
         return {
@@ -58,4 +59,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/dialog/Dialog.vue

@@ -33,6 +33,7 @@ import {UniqueComponentId,DomHandler,ZIndexUtils} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Dialog',
     inheritAttrs: false,
     emits: ['update:visible','show','hide','maximize','unmaximize'],
     props: {
@@ -96,7 +97,7 @@ export default {
     beforeUnmount() {
         this.unbindDocumentState();
         this.destroyStyle();
-        
+
         this.mask = null;
 
         if (this.container && this.autoZIndex) {
@@ -117,7 +118,7 @@ export default {
             if (this.autoZIndex) {
                 ZIndexUtils.set('modal', el, this.baseZIndex + this.$primevue.config.zIndex.modal);
             }
-            
+
             el.setAttribute(this.attributeSelector, '');
         },
         onEnter() {
@@ -254,7 +255,7 @@ export default {
                         }
                     `
                 }
-                
+
                 this.styleElement.innerHTML = innerHTML;
 			}
 		},

src/components/divider/Divider.vue

@@ -8,6 +8,7 @@
 
 <script>
 export default {
+    name: 'Divider',
     props: {
         align: {
             type: String,
@@ -24,7 +25,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-divider p-component', 'p-divider-' + this.layout, 'p-divider-' + this.type, 
+            return ['p-divider p-component', 'p-divider-' + this.layout, 'p-divider-' + this.type,
                 {'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left')},
                 {'p-divider-center': this.layout === 'horizontal' && this.align === 'center'},
                 {'p-divider-right': this.layout === 'horizontal' && this.align === 'right'},

src/components/dropdown/Dropdown.vue

@@ -64,6 +64,7 @@ import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Dropdown',
     emits: ['update:modelValue', 'before-show', 'before-hide', 'show', 'hide', 'change', 'filter'],
     props: {
         modelValue: null,
@@ -136,7 +137,7 @@ export default {
         }
 
         this.itemsWrapper = null;
-        
+
         if (this.overlay) {
             ZIndexUtils.clear(this.overlay);
             this.overlay = null;
@@ -180,7 +181,7 @@ export default {
                 }
                 else {
                     return this.findOptionIndexInList(this.modelValue, this.options);
-                }                
+                }
             }
 
             return -1;
@@ -339,7 +340,7 @@ export default {
 
                 if (option)
                     return option;
-                else if (groupIndex > 0) 
+                else if (groupIndex > 0)
                     return this.findPrevOption({group: (groupIndex - 1), option: this.getOptionGroupChildren(this.visibleOptions[groupIndex - 1]).length});
                 else
                     return null;
@@ -424,7 +425,7 @@ export default {
             else {
                 this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
                 DomHandler.absolutePosition(this.overlay, this.$el);
-            }  
+            }
         },
         updateModel(event, value) {
             this.$emit('update:modelValue', value);
@@ -503,7 +504,7 @@ export default {
                     this.updateModel(event, this.getOptionValue(newOption));
                 }
             }
-            
+
             this.searchTimeout = setTimeout(() => {
                 this.searchValue = null;
             }, 250);

src/components/editor/Editor.vue

@@ -51,6 +51,7 @@
 import Quill from "quill";
 
 export default {
+    name: 'Editor',
     emits: ['update:modelValue', 'text-change'],
     props: {
         modelValue: String,

src/components/fieldset/Fieldset.vue

@@ -28,6 +28,7 @@ import {UniqueComponentId} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Fieldset',
     emits: ['update:collapsed', 'toggle'],
     props: {
         legend: String,

src/components/fileupload/FileUpload.vue

@@ -47,6 +47,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'FileUpload',
     emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear'],
     props: {
         name: {

src/components/fullcalendar/FullCalendar.vue

@@ -6,6 +6,7 @@
 import {Calendar} from '@fullcalendar/core';
 
 export default {
+    name: 'FullCalendar',
     props: {
         events: Array,
         options: null

src/components/galleria/Galleria.vue

@@ -14,6 +14,7 @@ import GalleriaContent from './GalleriaContent.vue';
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
 
 export default {
+    name: 'Galleria',
     inheritAttrs: false,
     emits: ['update:activeIndex', 'update:visible'],
     props: {

src/components/galleria/GalleriaContent.vue

@@ -31,6 +31,7 @@ import GalleriaItemSlot from './GalleriaItemSlot.vue';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'GalleriaContent',
     inheritAttrs: false,
     interval: null,
     emits: ['activeitem-change', 'mask-hide'],

src/components/galleria/GalleriaItem.vue

@@ -29,6 +29,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'GalleriaItem',
     emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
     props: {
         circular: {

src/components/galleria/GalleriaThumbnails.vue

@@ -30,6 +30,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'GalleriaThumbnails',
     emits: ['stop-slideshow', 'update:activeIndex'],
     props: {
         containerId: {

src/components/inlinemessage/InlineMessage.vue

@@ -7,6 +7,7 @@
 
 <script>
 export default {
+    name: 'InlineMessage',
     props: {
         severity: {
             type: String,

src/components/inplace/Inplace.vue

@@ -14,6 +14,7 @@
 import Button from 'primevue/button';
 
 export default {
+    name: 'Inplace',
     emits: ['open', 'close', 'update:active'],
     props: {
         closable: {

src/components/inputmask/InputMask.vue

@@ -7,6 +7,7 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'InputMask',
     emits: ['update:modelValue', 'focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
     props: {
         modelValue: null,

src/components/inputnumber/InputNumber.vue

@@ -16,6 +16,7 @@ import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
 
 export default {
+    name: 'InputNumber',
     inheritAttrs: false,
     emits: ['update:modelValue', 'input'],
     props: {
@@ -301,10 +302,10 @@ export default {
                 let step = this.step * dir;
                 let currentValue = this.parseValue(this.$refs.input.$el.value) || 0;
                 let newValue = this.validateValue(currentValue + step);
-    
+
                 this.updateInput(newValue, null, 'spin');
                 this.updateModel(event, newValue);
-    
+
                 this.handleOnInput(event, currentValue, newValue);
             }
         },

src/components/inputswitch/InputSwitch.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" @click="onClick($event)" :style="style">
         <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="modelValue" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)" 
+            <input ref="input" type="checkbox" :checked="modelValue" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)"
                 role="switch" :aria-checked="modelValue">
         </div>
         <span class="p-inputswitch-slider"></span>
@@ -10,6 +10,7 @@
 
 <script>
 export default {
+    name: 'InputSwitch',
     inheritAttrs: false,
     emits: ['update:modelValue', 'click', 'change'],
     props: {
@@ -74,4 +75,4 @@ export default {
     content: "";
     top: 50%;
 }
-</style>
+</style>

src/components/inputtext/InputText.vue

@@ -4,6 +4,7 @@
 
 <script>
 export default {
+    name: 'InputText',
     emits: ['update:modelValue'],
     props: {
         modelValue: null
@@ -19,4 +20,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/knob/Knob.vue

@@ -11,6 +11,7 @@
 
 <script>
 export default {
+    name: 'Knob',
     emits: ['update:modelValue', 'change'],
     data() {
         return {

src/components/listbox/Listbox.vue

@@ -45,6 +45,7 @@ import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Listbox',
     emits: ['update:modelValue', 'change', 'filter'],
     props: {
         modelValue: null,
@@ -288,7 +289,7 @@ export default {
             }
             else {
                 return this.options;
-            }          
+            }
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
@@ -343,4 +344,4 @@ export default {
 .p-listbox-filter {
     width: 100%;
 }
-</style>
+</style>

src/components/megamenu/MegaMenu.vue

@@ -55,6 +55,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'MegaMenu',
     props: {
 		model: {
             type: Array,
@@ -404,4 +405,4 @@ export default {
 .p-megamenu-col-12 {
     width: 100%;
 }
-</style>
+</style>

src/components/menu/Menu.vue

@@ -26,6 +26,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Menuitem from './Menuitem.vue';
 
 export default {
+    name: 'Menu',
     inheritAttrs: false,
     props: {
         popup: {
@@ -68,7 +69,7 @@ export default {
             this.scrollHandler = null;
         }
         this.target = null;
-        
+
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }

src/components/menu/Menuitem.vue

@@ -17,6 +17,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Menuitem',
     inheritAttrs: false,
     emits: ['click'],
     props: {
@@ -46,4 +47,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/menubar/Menubar.vue

@@ -18,6 +18,7 @@ import MenubarSub from './MenubarSub.vue';
 import {ZIndexUtils} from 'primevue/utils';
 
 export default {
+    name: 'Menubar',
     props: {
 		model: {
             type: Array,
@@ -47,7 +48,7 @@ export default {
                 this.mobileActive = true;
                 ZIndexUtils.set('menu', this.$refs.rootmenu.$el, this.$primevue.config.zIndex.menu);
             }
-            
+
             this.bindOutsideClickListener();
             event.preventDefault();
         },
@@ -154,4 +155,4 @@ export default {
     align-items: center;
     justify-content: center;
 }
-</style>
+</style>

src/components/menubar/MenubarSub.vue

@@ -15,7 +15,7 @@
                     <span class="p-menuitem-text">{{item.label}}</span>
                     <span :class="getSubmenuIcon()" v-if="item.items"></span>
                 </a>
-                <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :mobileActive="mobileActive"
+                <MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :mobileActive="mobileActive"
                     @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
             </li>
             <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@@ -28,7 +28,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
-    name: 'sub-menu',
+    name: 'MenubarSub',
     emits: ['keydown-item', 'leaf-click'],
     props: {
         model: {
@@ -282,4 +282,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/message/Message.vue

@@ -18,6 +18,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Message',
     emits: ['close'],
     props: {
         severity: {

src/components/multiselect/MultiSelect.vue

@@ -99,6 +99,7 @@ import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'MultiSelect',
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'filter'],
     props: {
         modelValue: null,
@@ -167,7 +168,7 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
-        
+
         if (this.overlay) {
             ZIndexUtils.clear(this.overlay);
             this.overlay = null;
@@ -467,7 +468,7 @@ export default {
                 if (this.optionGroupLabel) {
                     value = [];
                     this.visibleOptions.forEach(optionGroup => value = [...value, ...this.getOptionGroupChildren(optionGroup)]);
-                }   
+                }
                 else  {
                     value = this.visibleOptions.map(option => this.getOptionValue(option));
                 }
@@ -597,7 +598,7 @@ export default {
 
                     return optionCount > 0 && optionCount === this.modelValue.length;
                 }
-                
+
                 return false;
             }
         },

src/components/orderlist/OrderList.vue

@@ -29,6 +29,7 @@ import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'OrderList',
     emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change'],
     props: {
         modelValue: {
@@ -337,7 +338,7 @@ export default {
     }
 }
 `;
-                
+
                 this.styleElement.innerHTML = innerHTML;
 			}
 		},

src/components/organizationchart/OrganizationChart.vue

@@ -10,6 +10,7 @@
 import OrganizationChartNode from './OrganizationChartNode.vue';
 
 export default {
+    name: 'OrganizationChart',
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
     props: {
         value: {

src/components/organizationchart/OrganizationChartNode.vue

@@ -31,7 +31,7 @@
             </tr>
             <tr :style="childStyle" class="p-organizationchart-nodes">
                 <td v-for="child of node.children" :key="child.key" colspan="2">
-                    <sub-node :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible"
+                    <OrganizationChartNode :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible"
                                 :selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onChildNodeClick" />
                 </td>
             </tr>
@@ -43,8 +43,8 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'OrganizationChartNode',
     emits: ['node-click', 'node-toggle'],
-    name: 'sub-node',
     props: {
         node: {
             type: null,

src/components/overlaypanel/OverlayPanel.vue

@@ -19,6 +19,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'OverlayPanel',
     inheritAttrs: false,
     props: {
 		dismissable: {
@@ -231,7 +232,7 @@ export default {
                         }
                     `
                 }
-                
+
                 this.styleElement.innerHTML = innerHTML;
 			}
 		},

src/components/paginator/CurrentPageReport.vue

@@ -3,6 +3,7 @@
 </template>
 <script>
 	export default {
+        name: 'CurrentPageReport',
 		inheritAttrs: false,
 		props: {
 			pageCount: {
@@ -44,4 +45,4 @@
             }
 		}
 	}
-</script>
+</script>

src/components/paginator/FirstPageLink.vue

@@ -8,6 +8,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'FirstPageLink',
     computed: {
         containerClass() {
             return ['p-paginator-first p-paginator-element p-link', {
@@ -19,4 +20,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/paginator/LastPageLink.vue

@@ -8,6 +8,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'LastPageLink',
     computed: {
         containerClass() {
             return ['p-paginator-last p-paginator-element p-link', {
@@ -19,4 +20,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/paginator/NextPageLink.vue

@@ -8,6 +8,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'NextPageLink',
     computed: {
         containerClass() {
             return ['p-paginator-next p-paginator-element p-link', {
@@ -19,4 +20,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/paginator/PageLinks.vue

@@ -8,6 +8,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'PageLinks',
     inheritAttrs: false,
     emits: ['click'],
     props: {
@@ -26,4 +27,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/paginator/Paginator.vue

@@ -30,6 +30,7 @@ import PrevPageLink from './PrevPageLink.vue';
 import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
 
 export default {
+    name: 'Paginator',
     emits: ['update:first', 'update:rows', 'page'],
     props: {
         totalRecords: {
@@ -235,4 +236,4 @@ export default {
     z-index: 1;
     position: relative;
 }
-</style>
+</style>

src/components/paginator/PrevPageLink.vue

@@ -8,6 +8,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'PrevPageLink',
     computed: {
         containerClass() {
             return ['p-paginator-prev p-paginator-element p-link', {
@@ -19,4 +20,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/paginator/RowsPerPageDropdown.vue

@@ -7,6 +7,7 @@
 import Dropdown from 'primevue/dropdown';
 
 export default {
+    name: 'RowsPerPageDropdown',
     inheritAttrs: false,
     emits: ['rows-change'],
     props: {
@@ -33,4 +34,4 @@ export default {
         'RPPDropdown': Dropdown
     }
 }
-</script>
+</script>

src/components/panel/Panel.vue

@@ -27,6 +27,7 @@ import {UniqueComponentId} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Panel',
     emits: ['update:collapsed', 'toggle'],
     props: {
         header: String,

src/components/panelmenu/PanelMenu.vue

@@ -28,6 +28,7 @@ import PanelMenuSub from './PanelMenuSub.vue';
 import {UniqueComponentId} from 'primevue/utils';
 
 export default {
+    name: 'PanelMenu',
     props: {
 		model: {
             type: Array,

src/components/panelmenu/PanelMenuSub.vue

@@ -3,7 +3,7 @@
         <template v-for="(item, i) of model" :key="item.label + i.toString()">
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
                 <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
-                    <a :href="href" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)"> 
+                    <a :href="href" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                     </a>
@@ -16,7 +16,7 @@
                 </a>
                 <transition name="p-toggleable-content">
                     <div class="p-toggleable-content" v-show="item === activeItem">
-                        <sub-panelmenu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" />
+                        <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" />
                     </div>
                 </transition>
             </li>
@@ -27,7 +27,7 @@
 
 <script>
 export default {
-    name: 'sub-panelmenu',
+    name: 'PanelMenuSub',
     props: {
 		model: {
             type: null,
@@ -80,4 +80,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/password/Password.vue

@@ -25,6 +25,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import InputText from 'primevue/inputtext';
 
 export default {
+    name: 'Password',
     emits: ['update:modelValue'],
     inheritAttrs: false,
     props: {

src/components/picklist/PickList.vue

@@ -53,6 +53,7 @@ import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'PickList',
     emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source'],
     props: {
         modelValue: {
@@ -525,7 +526,7 @@ export default {
     }
 }
 `;
-                
+
                 this.styleElement.innerHTML = innerHTML;
 			}
 		},

src/components/progressbar/ProgressBar.vue

@@ -12,6 +12,7 @@
 
 <script>
 export default {
+    name: 'ProgressBar',
     props: {
         value: Number,
         mode: {

src/components/progressspinner/ProgressSpinner.vue

@@ -8,6 +8,7 @@
 
 <script>
 export default {
+    name: 'ProgressSpinner',
     props: {
         strokeWidth: {
             type: String,

src/components/radiobutton/RadioButton.vue

@@ -13,6 +13,7 @@
 import {ObjectUtils} from 'primevue/utils';
 
 export default {
+    name: 'RadioButton',
     inheritAttrs: false,
     emits: ['click', 'update:modelValue', 'change'],
     props: {
@@ -54,4 +55,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/rating/Rating.vue

@@ -8,6 +8,7 @@
 
 <script>
 export default {
+    name: 'Rating',
     emits: ['update:modelValue', 'change'],
     props: {
         modelValue: {
@@ -75,4 +76,4 @@ export default {
 .p-rating.p-rating-readonly .p-rating-icon {
     cursor: default;
 }
-</style>
+</style>

src/components/row/Row.vue

@@ -1,8 +1,8 @@
 <script>
 export default {
-    name: 'row',
+    name: 'Row',
     render() {
         return null;
     }
 }
-</script>
+</script>

src/components/scrollpanel/ScrollPanel.vue

@@ -14,6 +14,7 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'ScrollPanel',
     initialized: false,
     documentResizeListener: null,
     documentMouseMoveListener: null,
@@ -260,4 +261,4 @@ export default {
 .p-scrollpanel-grabbed {
     user-select: none;
 }
-</style>
+</style>

src/components/scrolltop/ScrollTop.vue

@@ -10,6 +10,7 @@
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
 
 export default {
+    name: 'ScrollTop',
     scrollListener: null,
     container: null,
     data() {
@@ -56,7 +57,7 @@ export default {
         onClick() {
             let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
              scrollElement.scroll({
-                top: 0, 
+                top: 0,
                 behavior: this.behavior
             });
         },
@@ -70,14 +71,14 @@ export default {
             this.scrollListener = () => {
                 this.checkVisibility(this.$el.parentElement.scrollTop);
             };
-            
+
             this.$el.parentElement.addEventListener('scroll', this.scrollListener);
         },
         bindDocumentScrollListener() {
             this.scrollListener = () => {
                 this.checkVisibility(DomHandler.getWindowScrollTop());
             };
-            
+
             window.addEventListener('scroll', this.scrollListener);
         },
         unbindParentScrollListener() {

src/components/selectbutton/SelectButton.vue

@@ -16,6 +16,7 @@ import {ObjectUtils} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'SelectButton',
     emits: ['update:modelValue', 'focus', 'blur'],
     props: {
         modelValue: null,
@@ -104,4 +105,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

src/components/sidebar/Sidebar.vue

@@ -18,6 +18,7 @@ import {DomHandler,ZIndexUtils} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Sidebar',
     emits: ['update:visible', 'show', 'hide'],
     inheritAttrs: false,
     props: {

src/components/skeleton/Skeleton.vue

@@ -4,6 +4,7 @@
 
 <script>
 export default {
+    name: 'Skeleton',
     props: {
         shape: {
             type: String,

src/components/slider/Slider.vue

@@ -14,6 +14,7 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'Slider',
     emits: ['update:modelValue', 'change', 'slideend'],
     props: {
         modelValue: [Number,Array],
@@ -90,7 +91,7 @@ export default {
 
             if (this.range) {
                 modelValue = this.modelValue ? [...this.modelValue] : [];
-                
+
                 if (this.handleIndex == 0) {
                     let maxValue = this.modelValue ? this.modelValue[1] : this.max;
 
@@ -118,7 +119,7 @@ export default {
                     newValue = this.min;
                 else if (newValue > this.max)
                     newValue = this.max;
-                    
+
                 modelValue = Math.floor(newValue);
             }
 

src/components/splitbutton/SplitButton.vue

@@ -14,6 +14,7 @@ import Menu from 'primevue/menu';
 import {UniqueComponentId} from 'primevue/utils';
 
 export default {
+    name: 'SplitButton',
     inheritAttrs: false,
     props: {
         label: {

src/components/splitter/Splitter.vue

@@ -2,8 +2,8 @@
     <div :class="containerClass">
         <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
              <component :is="panel"></component>
-             <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle" 
+             <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
-                @mousedown="onGutterMouseDown($event, i)" 
+                @mousedown="onGutterMouseDown($event, i)"
                 @touchstart="onGutterTouchStart($event, i)"
                 @touchmove="onGutterTouchMove($event, i)"
                 @touchend="onGutterTouchEnd($event, i)">
@@ -17,8 +17,8 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'Splitter',
     emits: ['resizeend'],
-    name: 'splitter',
     props: {
         layout: {
             type: String,
@@ -48,7 +48,7 @@ export default {
     nextPanelSize: null,
     prevPanelSize: null,
     panelSizes: null,
-    prevPanelIndex: null, 
+    prevPanelIndex: null,
     mounted() {
         if (this.panels && this.panels.length) {
             let initialized = false;
@@ -77,7 +77,7 @@ export default {
     },
     methods: {
         isSplitterPanel(child) {
-            return child.type.name === 'splitterpanel';
+            return child.type.name === 'SplitterPanel';
         },
         onResizeStart(event, index) {
             this.gutterElement = event.currentTarget;
@@ -101,7 +101,7 @@ export default {
 
             let newPrevPanelSize = this.prevPanelSize + newPos;
             let newNextPanelSize = this.nextPanelSize - newPos;
-            
+
             if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
                 this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
                 this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';

src/components/splitterpanel/SplitterPanel.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-    name: 'splitterpanel',
+    name: 'SplitterPanel',
     props: {
         size: {
             type: Number,
@@ -23,9 +23,9 @@ export default {
         },
         isNested() {
             return this.$slots.default().some(child => {
-                return child.type.name === 'splitter';
+                return child.type.name === 'Splitter';
             });
         }
     }
 }
-</script>
+</script>

src/components/steps/Steps.vue

@@ -23,6 +23,7 @@
 import {UniqueComponentId} from 'primevue/utils';
 
 export default {
+    name: 'Steps',
     props: {
         id: {
             type: String,

src/components/tabmenu/TabMenu.vue

@@ -25,6 +25,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'TabMenu',
     props: {
 		model: {
             type: Array,