From 367d4a5f14cfe5d67651b6aacf260fa1a04e6ed5 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 11 May 2021 12:11:49 +0300
Subject: [PATCH] Fixed #1093 - Anonymous Component in vue-devtools

---
 src/components/accordion/Accordion.vue        |  3 ++-
 src/components/accordiontab/AccordionTab.vue  |  4 ++--
 src/components/autocomplete/AutoComplete.vue  |  9 ++++----
 src/components/avatar/Avatar.vue              |  1 +
 src/components/avatargroup/AvatarGroup.vue    |  4 +++-
 src/components/badge/Badge.vue                |  3 ++-
 src/components/blockui/BlockUI.vue            |  1 +
 src/components/breadcrumb/Breadcrumb.vue      |  3 ++-
 src/components/breadcrumb/BreadcrumbItem.vue  |  3 ++-
 src/components/button/Button.vue              |  1 +
 src/components/calendar/Calendar.vue          | 11 +++++----
 src/components/card/Card.vue                  |  6 +++--
 src/components/carousel/Carousel.vue          |  4 ++--
 .../cascadeselect/CascadeSelect.vue           | 11 +++++----
 .../cascadeselect/CascadeSelectSub.vue        |  6 ++---
 src/components/chart/Chart.vue                |  1 +
 src/components/checkbox/Checkbox.vue          |  3 ++-
 src/components/chip/Chip.vue                  |  5 ++--
 src/components/chips/Chips.vue                |  1 +
 src/components/colorpicker/ColorPicker.vue    |  3 ++-
 src/components/column/Column.vue              |  4 ++--
 src/components/columngroup/ColumnGroup.vue    |  4 ++--
 .../confirmdialog/ConfirmDialog.vue           |  5 ++--
 src/components/confirmpopup/ConfirmPopup.vue  |  3 ++-
 src/components/contextmenu/ContextMenu.vue    |  3 ++-
 src/components/contextmenu/ContextMenuSub.vue |  6 ++---
 src/components/datatable/BodyCell.vue         |  3 ++-
 src/components/datatable/ColumnFilter.vue     | 21 +++++++++--------
 src/components/datatable/DataTable.vue        |  7 +++---
 src/components/datatable/FooterCell.vue       |  3 ++-
 src/components/datatable/HeaderCell.vue       | 13 ++++++-----
 src/components/datatable/HeaderCheckbox.vue   |  5 ++--
 src/components/datatable/RowCheckbox.vue      |  5 ++--
 src/components/datatable/RowRadioButton.vue   |  3 ++-
 src/components/datatable/TableBody.vue        |  9 ++++----
 src/components/datatable/TableFooter.vue      |  3 ++-
 src/components/datatable/TableHeader.vue      | 23 ++++++++++---------
 src/components/datatable/TableLoadingBody.vue |  3 ++-
 src/components/dataview/DataView.vue          |  3 ++-
 .../DataViewLayoutOptions.vue                 |  3 ++-
 .../deferredcontent/DeferredContent.vue       |  3 ++-
 src/components/dialog/Dialog.vue              |  7 +++---
 src/components/divider/Divider.vue            |  3 ++-
 src/components/dropdown/Dropdown.vue          | 11 +++++----
 src/components/editor/Editor.vue              |  1 +
 src/components/fieldset/Fieldset.vue          |  1 +
 src/components/fileupload/FileUpload.vue      |  1 +
 src/components/fullcalendar/FullCalendar.vue  |  1 +
 src/components/galleria/Galleria.vue          |  1 +
 src/components/galleria/GalleriaContent.vue   |  1 +
 src/components/galleria/GalleriaItem.vue      |  1 +
 .../galleria/GalleriaThumbnails.vue           |  1 +
 .../inlinemessage/InlineMessage.vue           |  1 +
 src/components/inplace/Inplace.vue            |  1 +
 src/components/inputmask/InputMask.vue        |  1 +
 src/components/inputnumber/InputNumber.vue    |  5 ++--
 src/components/inputswitch/InputSwitch.vue    |  5 ++--
 src/components/inputtext/InputText.vue        |  3 ++-
 src/components/knob/Knob.vue                  |  1 +
 src/components/listbox/Listbox.vue            |  5 ++--
 src/components/megamenu/MegaMenu.vue          |  3 ++-
 src/components/menu/Menu.vue                  |  3 ++-
 src/components/menu/Menuitem.vue              |  3 ++-
 src/components/menubar/Menubar.vue            |  5 ++--
 src/components/menubar/MenubarSub.vue         |  6 ++---
 src/components/message/Message.vue            |  1 +
 src/components/multiselect/MultiSelect.vue    |  7 +++---
 src/components/orderlist/OrderList.vue        |  3 ++-
 .../organizationchart/OrganizationChart.vue   |  1 +
 .../OrganizationChartNode.vue                 |  4 ++--
 src/components/overlaypanel/OverlayPanel.vue  |  3 ++-
 .../paginator/CurrentPageReport.vue           |  3 ++-
 src/components/paginator/FirstPageLink.vue    |  3 ++-
 src/components/paginator/LastPageLink.vue     |  3 ++-
 src/components/paginator/NextPageLink.vue     |  3 ++-
 src/components/paginator/PageLinks.vue        |  3 ++-
 src/components/paginator/Paginator.vue        |  3 ++-
 src/components/paginator/PrevPageLink.vue     |  3 ++-
 .../paginator/RowsPerPageDropdown.vue         |  3 ++-
 src/components/panel/Panel.vue                |  1 +
 src/components/panelmenu/PanelMenu.vue        |  1 +
 src/components/panelmenu/PanelMenuSub.vue     |  8 +++----
 src/components/password/Password.vue          |  1 +
 src/components/picklist/PickList.vue          |  3 ++-
 src/components/progressbar/ProgressBar.vue    |  1 +
 .../progressspinner/ProgressSpinner.vue       |  1 +
 src/components/radiobutton/RadioButton.vue    |  3 ++-
 src/components/rating/Rating.vue              |  3 ++-
 src/components/row/Row.vue                    |  4 ++--
 src/components/scrollpanel/ScrollPanel.vue    |  3 ++-
 src/components/scrolltop/ScrollTop.vue        |  7 +++---
 src/components/selectbutton/SelectButton.vue  |  3 ++-
 src/components/sidebar/Sidebar.vue            |  1 +
 src/components/skeleton/Skeleton.vue          |  1 +
 src/components/slider/Slider.vue              |  5 ++--
 src/components/splitbutton/SplitButton.vue    |  1 +
 src/components/splitter/Splitter.vue          | 12 +++++-----
 .../splitterpanel/SplitterPanel.vue           |  6 ++---
 src/components/steps/Steps.vue                |  1 +
 src/components/tabmenu/TabMenu.vue            |  1 +
 src/components/tabpanel/TabPanel.vue          |  4 ++--
 src/components/tabview/TabView.vue            |  3 ++-
 src/components/tag/Tag.vue                    |  1 +
 src/components/terminal/Terminal.vue          |  3 ++-
 src/components/textarea/Textarea.vue          |  5 ++--
 src/components/tieredmenu/TieredMenu.vue      |  1 +
 src/components/tieredmenu/TieredMenuSub.vue   |  8 +++----
 src/components/timeline/Timeline.vue          |  1 +
 src/components/toast/Toast.vue                |  1 +
 src/components/toast/ToastMessage.vue         |  3 ++-
 src/components/togglebutton/ToggleButton.vue  |  3 ++-
 src/components/toolbar/Toolbar.vue            |  2 +-
 src/components/tree/Tree.vue                  |  3 ++-
 src/components/tree/TreeNode.vue              |  8 +++----
 src/components/treeselect/TreeSelect.vue      |  7 +++---
 src/components/treetable/TreeTable.vue        |  5 ++--
 src/components/treetable/TreeTableRow.vue     |  8 +++----
 .../tristatecheckbox/TriStateCheckbox.vue     |  3 ++-
 118 files changed, 284 insertions(+), 181 deletions(-)

diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index 972629418..f4d4d0b3d 100755
--- a/src/components/accordion/Accordion.vue
+++ b/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: {
diff --git a/src/components/accordiontab/AccordionTab.vue b/src/components/accordiontab/AccordionTab.vue
index 3b49a54c4..6bcdfa7ed 100755
--- a/src/components/accordiontab/AccordionTab.vue
+++ b/src/components/accordiontab/AccordionTab.vue
@@ -4,10 +4,10 @@
 
 <script>
 export default {
-    name: 'accordiontab',
+    name: 'AccordionTab',
     props: {
         header: null,
         disabled: Boolean
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index c2cf54801..31a358208 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/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;
diff --git a/src/components/avatar/Avatar.vue b/src/components/avatar/Avatar.vue
index 43b98cece..db55d2fd3 100644
--- a/src/components/avatar/Avatar.vue
+++ b/src/components/avatar/Avatar.vue
@@ -10,6 +10,7 @@
 
 <script>
 export default {
+    name: 'Avatar',
     props: {
         label: {
             type: String,
diff --git a/src/components/avatargroup/AvatarGroup.vue b/src/components/avatargroup/AvatarGroup.vue
index 43054c25f..e0871a443 100644
--- a/src/components/avatargroup/AvatarGroup.vue
+++ b/src/components/avatargroup/AvatarGroup.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {}
+export default {
+    name: 'AvatarGroup'
+}
 </script>
 
 <style>
diff --git a/src/components/badge/Badge.vue b/src/components/badge/Badge.vue
index 2e95b9a27..7456130e9 100644
--- a/src/components/badge/Badge.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/blockui/BlockUI.vue b/src/components/blockui/BlockUI.vue
index 04a20e0aa..69bbda76f 100755
--- a/src/components/blockui/BlockUI.vue
+++ b/src/components/blockui/BlockUI.vue
@@ -8,6 +8,7 @@
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
 
 export default {
+    name: 'BlockUI',
     emits: ['block', 'unblock'],
     props: {
         blocked: {
diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index e65a1d2bf..15d8501b8 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index 35b341aee..e0815d316 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -15,6 +15,7 @@
 
 <script>
 export default {
+    name: 'BreadcrumbItem',
     props: {
         item: null
     },
@@ -44,4 +45,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index 04d4187e0..dfe862801 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -13,6 +13,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Button',
     props: {
         label: {
             type: String
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 6e3c4d948..699e4e23a 100755
--- a/src/components/calendar/Calendar.vue
+++ b/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;
                 }
diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
index 39239d93f..4fdc3e1c9 100755
--- a/src/components/card/Card.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/carousel/Carousel.vue b/src/components/carousel/Carousel.vue
index 6be139ffe..d2329fd07 100755
--- a/src/components/carousel/Carousel.vue
+++ b/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>
 
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 913f1506d..6d5ab8dcb 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/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() {
diff --git a/src/components/cascadeselect/CascadeSelectSub.vue b/src/components/cascadeselect/CascadeSelectSub.vue
index 815b9163d..25f119d31 100644
--- a/src/components/cascadeselect/CascadeSelectSub.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index d50f5667e..fef11e4bc 100755
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -6,6 +6,7 @@
 
 <script>
 export default {
+    name: 'Chart',
     emits: ['select'],
     props: {
         type: String,
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index 6d41e3a80..718eff703 100755
--- a/src/components/checkbox/Checkbox.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/chip/Chip.vue b/src/components/chip/Chip.vue
index 024cd67c1..467441f5c 100644
--- a/src/components/chip/Chip.vue
+++ b/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;
 }
diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
index 35e0b6968..e31efba9b 100755
--- a/src/components/chips/Chips.vue
+++ b/src/components/chips/Chips.vue
@@ -17,6 +17,7 @@
 
 <script>
 export default {
+    name: 'Chips',
     inheritAttrs: false,
     emits: ['update:modelValue', 'add', 'remove'],
     props: {
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 5e2be2f84..32b5927e2 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/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);
         }
diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
index b9989d51c..b4c6548b2 100755
--- a/src/components/column/Column.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/columngroup/ColumnGroup.vue b/src/components/columngroup/ColumnGroup.vue
index 27948a767..679c41fba 100755
--- a/src/components/columngroup/ColumnGroup.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/confirmdialog/ConfirmDialog.vue b/src/components/confirmdialog/ConfirmDialog.vue
index 97cb233fa..ebfc9031e 100644
--- a/src/components/confirmdialog/ConfirmDialog.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/confirmpopup/ConfirmPopup.vue b/src/components/confirmpopup/ConfirmPopup.vue
index c3688539e..4cc380c38 100644
--- a/src/components/confirmpopup/ConfirmPopup.vue
+++ b/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
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 24e57eaed..0c177216d 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index a7377f9b4..50c22c6ea 100755
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 08a0cf8eb..3997d1a76 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 9e4beeecf..af366a667 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 32b622c94..09123f671 100755
--- a/src/components/datatable/DataTable.vue
+++ b/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;
                     }
                 }
diff --git a/src/components/datatable/FooterCell.vue b/src/components/datatable/FooterCell.vue
index 4a0132d65..dad0b31ab 100644
--- a/src/components/datatable/FooterCell.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index 320b90297..dd414b106 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/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"  
-            :showMenu="columnProp('showFilterMenu')" :filterElement="column.children && column.children.filter" 
-            :filterHeaderTemplate="column.children && column.children.filterheader" :filterFooterTemplate="column.children && column.children.filterfooter" 
-            :filterClearTemplate="column.children && column.children.filterclear" :filterApplyTemplate="column.children && column.children.filterapply" 
+            <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"
+            :filterHeaderTemplate="column.children && column.children.filterheader" :filterFooterTemplate="column.children && column.children.filterfooter"
+            :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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/HeaderCheckbox.vue b/src/components/datatable/HeaderCheckbox.vue
index 2f70d9533..aa7f7493f 100755
--- a/src/components/datatable/HeaderCheckbox.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/RowCheckbox.vue b/src/components/datatable/RowCheckbox.vue
index 80dc324de..bfeb05d82 100755
--- a/src/components/datatable/RowCheckbox.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/RowRadioButton.vue b/src/components/datatable/RowRadioButton.vue
index 311934d53..c669b34b2 100755
--- a/src/components/datatable/RowRadioButton.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index 28f5bff5c..4acac23ac 100755
--- a/src/components/datatable/TableBody.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/TableFooter.vue b/src/components/datatable/TableFooter.vue
index 245dd5c45..192302b18 100755
--- a/src/components/datatable/TableFooter.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index dd6576b51..cb8b7c130 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/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"  
-                    @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)" 
+                    <DTHeaderCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :column="col"
+                    @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"  
-                        :showMenu="columnProp(col,'showFilterMenu')" :filterElement="col.children && col.children.filter" 
-                        :filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter" 
-                        :filterClearTemplate="col.children && col.children.filterclear" :filterApplyTemplate="col.children && col.children.filterapply" 
+                        <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"
+                        :filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter"
+                        :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: {
diff --git a/src/components/datatable/TableLoadingBody.vue b/src/components/datatable/TableLoadingBody.vue
index a47a3d02c..f1c25045c 100755
--- a/src/components/datatable/TableLoadingBody.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index ed1ce583a..b4ad60f7d 100755
--- a/src/components/dataview/DataView.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
index 62e0cd29a..e922a4426 100755
--- a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/deferredcontent/DeferredContent.vue b/src/components/deferredcontent/DeferredContent.vue
index f1f0ce5ea..838c9c1e1 100755
--- a/src/components/deferredcontent/DeferredContent.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 0321f08ab..e943f20fc 100755
--- a/src/components/dialog/Dialog.vue
+++ b/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;
 			}
 		},
diff --git a/src/components/divider/Divider.vue b/src/components/divider/Divider.vue
index ce72db9a7..481c0d0f4 100644
--- a/src/components/divider/Divider.vue
+++ b/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'},
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index e59705af9..333decc88 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/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);
diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
index 6534cb1fa..88719b841 100755
--- a/src/components/editor/Editor.vue
+++ b/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,
diff --git a/src/components/fieldset/Fieldset.vue b/src/components/fieldset/Fieldset.vue
index adda8e731..ca8feaa4a 100755
--- a/src/components/fieldset/Fieldset.vue
+++ b/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,
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index b2c8b8e02..910f9d522 100755
--- a/src/components/fileupload/FileUpload.vue
+++ b/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: {
diff --git a/src/components/fullcalendar/FullCalendar.vue b/src/components/fullcalendar/FullCalendar.vue
index e47bebb5c..8ffa3e09f 100755
--- a/src/components/fullcalendar/FullCalendar.vue
+++ b/src/components/fullcalendar/FullCalendar.vue
@@ -6,6 +6,7 @@
 import {Calendar} from '@fullcalendar/core';
 
 export default {
+    name: 'FullCalendar',
     props: {
         events: Array,
         options: null
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index ac63bf0e1..eddaafc36 100755
--- a/src/components/galleria/Galleria.vue
+++ b/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: {
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index eba47b671..536809b9a 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/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'],
diff --git a/src/components/galleria/GalleriaItem.vue b/src/components/galleria/GalleriaItem.vue
index 4e4248f3b..70d3b6d31 100755
--- a/src/components/galleria/GalleriaItem.vue
+++ b/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: {
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
index aa67b9987..6bcbc0c36 100755
--- a/src/components/galleria/GalleriaThumbnails.vue
+++ b/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: {
diff --git a/src/components/inlinemessage/InlineMessage.vue b/src/components/inlinemessage/InlineMessage.vue
index 05caf762e..fcd70560f 100755
--- a/src/components/inlinemessage/InlineMessage.vue
+++ b/src/components/inlinemessage/InlineMessage.vue
@@ -7,6 +7,7 @@
 
 <script>
 export default {
+    name: 'InlineMessage',
     props: {
         severity: {
             type: String,
diff --git a/src/components/inplace/Inplace.vue b/src/components/inplace/Inplace.vue
index 4d094fa27..bee22a3b6 100755
--- a/src/components/inplace/Inplace.vue
+++ b/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: {
diff --git a/src/components/inputmask/InputMask.vue b/src/components/inputmask/InputMask.vue
index ff0d6789c..ebbb795f5 100755
--- a/src/components/inputmask/InputMask.vue
+++ b/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,
diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
index dc68556e2..eb57c9dce 100755
--- a/src/components/inputnumber/InputNumber.vue
+++ b/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);
             }
         },
diff --git a/src/components/inputswitch/InputSwitch.vue b/src/components/inputswitch/InputSwitch.vue
index 818224ae2..d34cf311a 100755
--- a/src/components/inputswitch/InputSwitch.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/inputtext/InputText.vue b/src/components/inputtext/InputText.vue
index 06544c6cb..05bc3b753 100755
--- a/src/components/inputtext/InputText.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/knob/Knob.vue b/src/components/knob/Knob.vue
index 129b37534..3f3365eab 100644
--- a/src/components/knob/Knob.vue
+++ b/src/components/knob/Knob.vue
@@ -11,6 +11,7 @@
 
 <script>
 export default {
+    name: 'Knob',
     emits: ['update:modelValue', 'change'],
     data() {
         return {
diff --git a/src/components/listbox/Listbox.vue b/src/components/listbox/Listbox.vue
index f736987a3..429c2fc18 100755
--- a/src/components/listbox/Listbox.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index 88f4327be..c617005a1 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 5245f801e..1dc7f76a7 100755
--- a/src/components/menu/Menu.vue
+++ b/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);
         }
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 2e83baf6a..a6f69fd2a 100755
--- a/src/components/menu/Menuitem.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 0fd380409..74494338c 100755
--- a/src/components/menubar/Menubar.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index abc959d12..35d5e7237 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index 645e58536..414570cda 100755
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -18,6 +18,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Message',
     emits: ['close'],
     props: {
         severity: {
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index ce283de05..5fbad3907 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/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;
             }
         },
diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index dd7e45577..737d10a40 100755
--- a/src/components/orderlist/OrderList.vue
+++ b/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;
 			}
 		},
diff --git a/src/components/organizationchart/OrganizationChart.vue b/src/components/organizationchart/OrganizationChart.vue
index 460ff0744..52ea15379 100755
--- a/src/components/organizationchart/OrganizationChart.vue
+++ b/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: {
diff --git a/src/components/organizationchart/OrganizationChartNode.vue b/src/components/organizationchart/OrganizationChartNode.vue
index 6d0227b04..bf0dc6c81 100755
--- a/src/components/organizationchart/OrganizationChartNode.vue
+++ b/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,
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index ddf5415f5..2328382f7 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/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;
 			}
 		},
diff --git a/src/components/paginator/CurrentPageReport.vue b/src/components/paginator/CurrentPageReport.vue
index 71f1dc6ce..e8178b2dd 100755
--- a/src/components/paginator/CurrentPageReport.vue
+++ b/src/components/paginator/CurrentPageReport.vue
@@ -3,6 +3,7 @@
 </template>
 <script>
 	export default {
+        name: 'CurrentPageReport',
 		inheritAttrs: false,
 		props: {
 			pageCount: {
@@ -44,4 +45,4 @@
             }
 		}
 	}
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/paginator/FirstPageLink.vue b/src/components/paginator/FirstPageLink.vue
index 77e7b5adb..7bed4b579 100755
--- a/src/components/paginator/FirstPageLink.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/paginator/LastPageLink.vue b/src/components/paginator/LastPageLink.vue
index 7a375a5a3..3ff70289e 100755
--- a/src/components/paginator/LastPageLink.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/paginator/NextPageLink.vue b/src/components/paginator/NextPageLink.vue
index 494b959a3..f7a5a8338 100755
--- a/src/components/paginator/NextPageLink.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/paginator/PageLinks.vue b/src/components/paginator/PageLinks.vue
index 1577f9bac..2a0096feb 100755
--- a/src/components/paginator/PageLinks.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 85dcafa19..ab2267d63 100755
--- a/src/components/paginator/Paginator.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/paginator/PrevPageLink.vue b/src/components/paginator/PrevPageLink.vue
index 232c4fa60..93bf4aeb6 100755
--- a/src/components/paginator/PrevPageLink.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/paginator/RowsPerPageDropdown.vue b/src/components/paginator/RowsPerPageDropdown.vue
index 108b89999..13fdabcd5 100755
--- a/src/components/paginator/RowsPerPageDropdown.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
index 807966a07..2d861de28 100755
--- a/src/components/panel/Panel.vue
+++ b/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,
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index 0d08b734e..c3a22922e 100755
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/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,
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index bb1d95427..5f5bad6b5 100755
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index c4736ea09..a09a8f8c1 100755
--- a/src/components/password/Password.vue
+++ b/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: {
diff --git a/src/components/picklist/PickList.vue b/src/components/picklist/PickList.vue
index 06fe20636..a2d2ea9cd 100755
--- a/src/components/picklist/PickList.vue
+++ b/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;
 			}
 		},
diff --git a/src/components/progressbar/ProgressBar.vue b/src/components/progressbar/ProgressBar.vue
index bba157507..aef260ad8 100755
--- a/src/components/progressbar/ProgressBar.vue
+++ b/src/components/progressbar/ProgressBar.vue
@@ -12,6 +12,7 @@
 
 <script>
 export default {
+    name: 'ProgressBar',
     props: {
         value: Number,
         mode: {
diff --git a/src/components/progressspinner/ProgressSpinner.vue b/src/components/progressspinner/ProgressSpinner.vue
index 56b5117f7..aef1bbcd7 100755
--- a/src/components/progressspinner/ProgressSpinner.vue
+++ b/src/components/progressspinner/ProgressSpinner.vue
@@ -8,6 +8,7 @@
 
 <script>
 export default {
+    name: 'ProgressSpinner',
     props: {
         strokeWidth: {
             type: String,
diff --git a/src/components/radiobutton/RadioButton.vue b/src/components/radiobutton/RadioButton.vue
index ca36c733f..52b24ebbc 100755
--- a/src/components/radiobutton/RadioButton.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/rating/Rating.vue b/src/components/rating/Rating.vue
index 475050a8d..0158ba3f9 100755
--- a/src/components/rating/Rating.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/row/Row.vue b/src/components/row/Row.vue
index 0a2bff195..2d9a1a917 100755
--- a/src/components/row/Row.vue
+++ b/src/components/row/Row.vue
@@ -1,8 +1,8 @@
 <script>
 export default {
-    name: 'row',
+    name: 'Row',
     render() {
         return null;
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/scrollpanel/ScrollPanel.vue b/src/components/scrollpanel/ScrollPanel.vue
index 920cafc63..7a6287bd5 100644
--- a/src/components/scrollpanel/ScrollPanel.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/scrolltop/ScrollTop.vue b/src/components/scrolltop/ScrollTop.vue
index 800dcba39..b78e583a7 100644
--- a/src/components/scrolltop/ScrollTop.vue
+++ b/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() {
diff --git a/src/components/selectbutton/SelectButton.vue b/src/components/selectbutton/SelectButton.vue
index d3315963a..22cc0cb88 100755
--- a/src/components/selectbutton/SelectButton.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index a1e6a2932..5840df22f 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/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: {
diff --git a/src/components/skeleton/Skeleton.vue b/src/components/skeleton/Skeleton.vue
index 8b2d61538..b60aa2c34 100644
--- a/src/components/skeleton/Skeleton.vue
+++ b/src/components/skeleton/Skeleton.vue
@@ -4,6 +4,7 @@
 
 <script>
 export default {
+    name: 'Skeleton',
     props: {
         shape: {
             type: String,
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index ddfa155bc..1a15e65b3 100755
--- a/src/components/slider/Slider.vue
+++ b/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);
             }
 
diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index f9fc79af1..01df86490 100755
--- a/src/components/splitbutton/SplitButton.vue
+++ b/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: {
diff --git a/src/components/splitter/Splitter.vue b/src/components/splitter/Splitter.vue
index e72019ba3..8ec46332e 100644
--- a/src/components/splitter/Splitter.vue
+++ b/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" 
-                @mousedown="onGutterMouseDown($event, i)" 
+             <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
+                @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)';
diff --git a/src/components/splitterpanel/SplitterPanel.vue b/src/components/splitterpanel/SplitterPanel.vue
index c57b0b042..3bd15e4b4 100644
--- a/src/components/splitterpanel/SplitterPanel.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 1d868a4e8..4f0243d8c 100755
--- a/src/components/steps/Steps.vue
+++ b/src/components/steps/Steps.vue
@@ -23,6 +23,7 @@
 import {UniqueComponentId} from 'primevue/utils';
 
 export default {
+    name: 'Steps',
     props: {
         id: {
             type: String,
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 013d4db8d..93a3ff979 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/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,
diff --git a/src/components/tabpanel/TabPanel.vue b/src/components/tabpanel/TabPanel.vue
index badfadbd8..65662351a 100755
--- a/src/components/tabpanel/TabPanel.vue
+++ b/src/components/tabpanel/TabPanel.vue
@@ -4,10 +4,10 @@
 
 <script>
 export default {
-    name: 'tabpanel',
+    name: 'TabPanel',
     props: {
         header: null,
         disabled: Boolean
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index 98996de51..a0722fb02 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -22,6 +22,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'TabView',
     emits: ['update:activeIndex', 'tab-change', 'tab-click'],
     props: {
         activeIndex: {
@@ -79,7 +80,7 @@ export default {
             return (tab.props && tab.props.disabled);
         },
         isTabPanel(child) {
-            return child.type.name === 'tabpanel'
+            return child.type.name === 'TabPanel'
         }
     },
     computed: {
diff --git a/src/components/tag/Tag.vue b/src/components/tag/Tag.vue
index cba7a1592..af6106e98 100644
--- a/src/components/tag/Tag.vue
+++ b/src/components/tag/Tag.vue
@@ -9,6 +9,7 @@
 
 <script>
 export default {
+    name: 'Tag',
     props: {
         value: null,
         severity: null,
diff --git a/src/components/terminal/Terminal.vue b/src/components/terminal/Terminal.vue
index 34c9661cc..72ae98393 100755
--- a/src/components/terminal/Terminal.vue
+++ b/src/components/terminal/Terminal.vue
@@ -19,6 +19,7 @@
 import TerminalService from 'primevue/terminalservice';
 
 export default {
+    name: 'Terminal',
     props: {
         welcomeMessage: {
             type: String,
@@ -86,4 +87,4 @@ export default {
 .p-terminal-input::-ms-clear {
     display: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/textarea/Textarea.vue b/src/components/textarea/Textarea.vue
index fe6245569..2735dcdd0 100755
--- a/src/components/textarea/Textarea.vue
+++ b/src/components/textarea/Textarea.vue
@@ -4,6 +4,7 @@
 
 <script>
 export default {
+    name: 'Textarea',
     emits: ['update:modelValue'],
     props: {
         modelValue: null,
@@ -24,7 +25,7 @@ export default {
             const style = window.getComputedStyle(this.$el);
             this.$el.style.height = 'auto';
             this.$el.style.height = `calc(${style.borderTopWidth} + ${style.borderBottomWidth} + ${this.$el.scrollHeight}px)`;
-            
+
             if (parseFloat(this.$el.style.height) >= parseFloat(this.$el.style.maxHeight)) {
                 this.$el.style.overflowY = "scroll";
                 this.$el.style.height = this.$el.style.maxHeight;
@@ -58,4 +59,4 @@ export default {
 .p-fluid .p-inputtextarea {
     width: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index f921e60b0..d2110d789 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -14,6 +14,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
+    name: 'TieredMenu',
     inheritAttrs: false,
     props: {
         popup: {
diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue
index 6f54e7987..930e85a4d 100755
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/src/components/tieredmenu/TieredMenuSub.vue
@@ -1,7 +1,7 @@
 <template>
     <ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
         <template v-for="(item, i) of model" :key="item.label + i.toString()">
-            <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" 
+            <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                 @mouseenter="onItemMouseEnter($event, item)" role="none">
                 <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
                      <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
@@ -15,7 +15,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_'"
+                <TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
                     @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,8 +28,8 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'TieredMenuSub',
     emits: ['leaf-click', 'keydown-item'],
-    name: 'sub-menu',
     props: {
         model: {
             type: Array,
@@ -227,4 +227,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/timeline/Timeline.vue b/src/components/timeline/Timeline.vue
index ad712c431..25a183684 100644
--- a/src/components/timeline/Timeline.vue
+++ b/src/components/timeline/Timeline.vue
@@ -21,6 +21,7 @@
 import {ObjectUtils} from 'primevue/utils';
 
 export default {
+    name: 'Timeline',
     props: {
         value: null,
         align: {
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index e4e47d4e1..8c691f53c 100755
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -16,6 +16,7 @@ import {ZIndexUtils} from 'primevue/utils';
 var messageIdx = 0;
 
 export default {
+    name: 'Toast',
     inheritAttrs: false,
     props: {
         group: {
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index dcfdb79ad..ed1cb245a 100755
--- a/src/components/toast/ToastMessage.vue
+++ b/src/components/toast/ToastMessage.vue
@@ -17,6 +17,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'ToastMessage',
     emits: ['close'],
     props: {
         message: null
@@ -63,4 +64,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/togglebutton/ToggleButton.vue b/src/components/togglebutton/ToggleButton.vue
index 29b7ff370..4a2d7c981 100755
--- a/src/components/togglebutton/ToggleButton.vue
+++ b/src/components/togglebutton/ToggleButton.vue
@@ -9,6 +9,7 @@
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'ToggleButton',
     emits: ['update:modelValue', 'change'],
     props: {
         modelValue: Boolean,
@@ -62,4 +63,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/toolbar/Toolbar.vue b/src/components/toolbar/Toolbar.vue
index c67d463bc..d46bd0500 100755
--- a/src/components/toolbar/Toolbar.vue
+++ b/src/components/toolbar/Toolbar.vue
@@ -11,7 +11,7 @@
 
 <script>
 export default {
-
+    name: 'Toolbar'
 }
 </script>
 
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index c54f70157..0cf4fc83e 100755
--- a/src/components/tree/Tree.vue
+++ b/src/components/tree/Tree.vue
@@ -23,6 +23,7 @@ import TreeNode from './TreeNode.vue';
 import {ObjectUtils} from 'primevue/utils';
 
 export default {
+    name: 'Tree',
     emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
     props: {
         value: {
@@ -105,7 +106,7 @@ export default {
             if (this.selectionMode != null && event.node.selectable !== false) {
                 const metaSelection = event.nodeTouched ? false : this.metaKeySelection;
                 const _selectionKeys = metaSelection ? this.handleSelectionWithMetaKey(event) : this.handleSelectionWithoutMetaKey(event);
-                
+
                 this.$emit('update:selectionKeys', _selectionKeys);
             }
         },
diff --git a/src/components/tree/TreeNode.vue b/src/components/tree/TreeNode.vue
index 37d53b099..fb65a0582 100755
--- a/src/components/tree/TreeNode.vue
+++ b/src/components/tree/TreeNode.vue
@@ -17,10 +17,10 @@
             </span>
         </div>
         <ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
-            <sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode" :templates="templates"
+            <TreeNode v-for="childNode of node.children" :key="childNode.key" :node="childNode" :templates="templates"
                 :expandedKeys="expandedKeys" @node-toggle="onChildNodeToggle" @node-click="onChildNodeClick"
                 :selectionMode="selectionMode" :selectionKeys="selectionKeys"
-                @checkbox-change="propagateUp"></sub-treenode>
+                @checkbox-change="propagateUp" />
         </ul>
     </li>
 </template>
@@ -30,8 +30,8 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'TreeNode',
     emits: ['node-toggle', 'node-click', 'checkbox-change'],
-    name: 'sub-treenode',
     props: {
         node: {
             type: null,
@@ -295,4 +295,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/treeselect/TreeSelect.vue b/src/components/treeselect/TreeSelect.vue
index f7542825b..14f97d43a 100644
--- a/src/components/treeselect/TreeSelect.vue
+++ b/src/components/treeselect/TreeSelect.vue
@@ -49,6 +49,7 @@ import Tree from 'primevue/tree';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'TreeSelect',
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse'],
     props: {
         modelValue: null,
@@ -98,7 +99,7 @@ export default {
             immediate: true
         },
         options() {
-            this.updateTreeState();    
+            this.updateTreeState();
         }
     },
     data() {
@@ -121,7 +122,7 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
-        
+
         if (this.overlay) {
             ZIndexUtils.clear(this.overlay);
             this.overlay = null;
@@ -388,7 +389,7 @@ export default {
         },
         label() {
             let value = this.selectedNodes;
-            return value.length ? value.map(node => node.label).join(', '): this.placeholder;            
+            return value.length ? value.map(node => node.label).join(', '): this.placeholder;
         },
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 708deb466..66e2aadd7 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -81,7 +81,8 @@ import TreeTableRow from './TreeTableRow.vue';
 import Paginator from 'primevue/paginator';
 
 export default {
-    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 
+    name: 'TreeTable',
+    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect',
         'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'column-resize-end'],
     props: {
         value: {
@@ -808,7 +809,7 @@ export default {
             children.forEach(child => {
                 if (child.dynamicChildren)
                     cols = [...cols, ...child.children];
-                else if (child.type.name === 'column')
+                else if (child.type.name === 'Column')
                     cols.push(child);
             });
 
diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index a04bbd464..9824f82e2 100755
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -17,9 +17,9 @@
         </td>
     </tr>
     <template v-if="expanded && node.children && node.children.length">
-        <sub-ttnode v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node"  :level="level + 1"
+        <TreeTableRow v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node"  :level="level + 1"
                         :expandedKeys="expandedKeys" :selectionMode="selectionMode" :selectionKeys="selectionKeys" :indentation="indentation"
-                        @node-toggle="$emit('node-toggle', $event)" @node-click="$emit('node-click', $event)" @checkbox-change="onCheckboxChange"></sub-ttnode>
+                        @node-toggle="$emit('node-toggle', $event)" @node-click="$emit('node-click', $event)" @checkbox-change="onCheckboxChange" />
     </template>
 </template>
 
@@ -29,7 +29,7 @@ import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
-    name: 'sub-ttnode',
+    name: 'TreeTableRow',
     emits: ['node-click', 'node-toggle', 'checkbox-change','nodeClick', 'nodeToggle', 'checkboxChange'],
     props: {
         node: {
@@ -295,4 +295,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/tristatecheckbox/TriStateCheckbox.vue b/src/components/tristatecheckbox/TriStateCheckbox.vue
index 6edd0647f..d194af705 100755
--- a/src/components/tristatecheckbox/TriStateCheckbox.vue
+++ b/src/components/tristatecheckbox/TriStateCheckbox.vue
@@ -11,6 +11,7 @@
 
 <script>
 export default {
+    name: 'TriStateCheckbox',
     inheritAttrs: false,
     emits: ['click', 'update:modelValue', 'change'],
     props: {
@@ -79,4 +80,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>