Fixed #1093 - Anonymous Component in vue-devtools

src/components/accordion/Accordion.vue

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

src/components/accordiontab/AccordionTab.vue

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

src/components/autocomplete/AutoComplete.vue

@@ -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: {

src/components/avatar/Avatar.vue

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

src/components/avatargroup/AvatarGroup.vue

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

src/components/badge/Badge.vue

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

src/components/blockui/BlockUI.vue

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

src/components/breadcrumb/Breadcrumb.vue

@@ -14,6 +14,7 @@
 import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
+    name: 'Breadcrumb',
     props: {
         model: {
             type: Array,

src/components/breadcrumb/BreadcrumbItem.vue

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

src/components/button/Button.vue

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

src/components/calendar/Calendar.vue

@@ -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: {

src/components/card/Card.vue

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

src/components/carousel/Carousel.vue

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

src/components/cascadeselect/CascadeSelect.vue

@@ -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 {

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,

src/components/chart/Chart.vue

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

src/components/checkbox/Checkbox.vue

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

src/components/chip/Chip.vue

@@ -12,6 +12,7 @@
 
 <script>
 export default {
+    name: 'Chip',
     emits: ['remove'],
     props: {
         label: {

src/components/chips/Chips.vue

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

src/components/colorpicker/ColorPicker.vue

@@ -28,6 +28,7 @@ import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/uti
 import OverlayEventBus from 'primevue/overlayeventbus';
 
 export default {
+    name: 'ColorPicker',
     emits: ['update:modelValue'],
     props: {
         modelValue: {

src/components/column/Column.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-    name: 'column',
+    name: 'Column',
     props: {
         columnKey: {
             type: null,

src/components/columngroup/ColumnGroup.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-    name: 'columngroup',
+    name: 'ColumnGroup',
     props: {
         type: {
             type: String,

src/components/confirmdialog/ConfirmDialog.vue

@@ -16,6 +16,7 @@ import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
 
 export default {
+    name: 'ConfirmDialog',
     props: {
         group: String,
         breakpoints: {

src/components/confirmpopup/ConfirmPopup.vue

@@ -22,6 +22,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 
 export default {
+    name: 'ConfirmPopup',
     inheritAttrs: false,
     props: {
         group: String

src/components/contextmenu/ContextMenu.vue

@@ -13,6 +13,7 @@ import {DomHandler,ZIndexUtils} from 'primevue/utils';
 import ContextMenuSub from './ContextMenuSub.vue';
 
 export default {
+    name: 'ContextMenu',
     inheritAttrs: false,
     props: {
 		model: {

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,

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: {

src/components/datatable/ColumnFilter.vue

@@ -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: {

src/components/datatable/DataTable.vue

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

src/components/datatable/FooterCell.vue

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

src/components/datatable/HeaderCell.vue

@@ -28,6 +28,7 @@ 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',
             'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],

src/components/datatable/HeaderCheckbox.vue

@@ -9,6 +9,7 @@
 
 <script>
 export default {
+    name: 'HeaderCheckbox',
     inheritAttrs: false,
     emits: ['change'],
     props: {

src/components/datatable/RowCheckbox.vue

@@ -9,6 +9,7 @@
 
 <script>
 export default {
+    name: 'RowCheckbox',
     inheritAttrs: false,
     emits: ['change'],
     props: {

src/components/datatable/RowRadioButton.vue

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

src/components/datatable/TableBody.vue

@@ -48,6 +48,7 @@ import {ObjectUtils,DomHandler} from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
+    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',

src/components/datatable/TableFooter.vue

@@ -19,6 +19,7 @@
 import FooterCell from './FooterCell.vue';
 
 export default {
+    name: 'TableFooter',
     props: {
         columnGroup: {
             type: null,

src/components/datatable/TableHeader.vue

@@ -53,6 +53,7 @@ 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',
             'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],

src/components/datatable/TableLoadingBody.vue

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

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: {

src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue

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

src/components/deferredcontent/DeferredContent.vue

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

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: {

src/components/divider/Divider.vue

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

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,

src/components/editor/Editor.vue

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

src/components/fieldset/Fieldset.vue

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

src/components/fileupload/FileUpload.vue

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

src/components/fullcalendar/FullCalendar.vue

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

src/components/galleria/Galleria.vue

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

src/components/galleria/GalleriaContent.vue

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

src/components/galleria/GalleriaItem.vue

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

src/components/galleria/GalleriaThumbnails.vue

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

src/components/inlinemessage/InlineMessage.vue

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

src/components/inplace/Inplace.vue

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

src/components/inputmask/InputMask.vue

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

src/components/inputnumber/InputNumber.vue

@@ -16,6 +16,7 @@ import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
 
 export default {
+    name: 'InputNumber',
     inheritAttrs: false,
     emits: ['update:modelValue', 'input'],
     props: {

src/components/inputswitch/InputSwitch.vue

@@ -10,6 +10,7 @@
 
 <script>
 export default {
+    name: 'InputSwitch',
     inheritAttrs: false,
     emits: ['update:modelValue', 'click', 'change'],
     props: {

src/components/inputtext/InputText.vue

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

src/components/knob/Knob.vue

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

src/components/listbox/Listbox.vue

@@ -45,6 +45,7 @@ import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'Listbox',
     emits: ['update:modelValue', 'change', 'filter'],
     props: {
         modelValue: null,

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,

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: {

src/components/menu/Menuitem.vue

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

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,

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: {

src/components/message/Message.vue

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

src/components/multiselect/MultiSelect.vue

@@ -99,6 +99,7 @@ import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'MultiSelect',
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'filter'],
     props: {
         modelValue: null,

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: {

src/components/organizationchart/OrganizationChart.vue

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

src/components/organizationchart/OrganizationChartNode.vue

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

src/components/overlaypanel/OverlayPanel.vue

@@ -19,6 +19,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
 
 export default {
+    name: 'OverlayPanel',
     inheritAttrs: false,
     props: {
 		dismissable: {

src/components/paginator/CurrentPageReport.vue

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

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', {

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', {

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', {

src/components/paginator/PageLinks.vue

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

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: {

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', {

src/components/paginator/RowsPerPageDropdown.vue

@@ -7,6 +7,7 @@
 import Dropdown from 'primevue/dropdown';
 
 export default {
+    name: 'RowsPerPageDropdown',
     inheritAttrs: false,
     emits: ['rows-change'],
     props: {

src/components/panel/Panel.vue

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

src/components/panelmenu/PanelMenu.vue

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

src/components/panelmenu/PanelMenuSub.vue

@@ -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,

src/components/password/Password.vue

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

src/components/picklist/PickList.vue

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

src/components/progressbar/ProgressBar.vue

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

src/components/progressspinner/ProgressSpinner.vue

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

src/components/radiobutton/RadioButton.vue

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

src/components/rating/Rating.vue

@@ -8,6 +8,7 @@
 
 <script>
 export default {
+    name: 'Rating',
     emits: ['update:modelValue', 'change'],
     props: {
         modelValue: {

src/components/row/Row.vue

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

src/components/scrollpanel/ScrollPanel.vue

@@ -14,6 +14,7 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'ScrollPanel',
     initialized: false,
     documentResizeListener: null,
     documentMouseMoveListener: null,

src/components/scrolltop/ScrollTop.vue

@@ -10,6 +10,7 @@
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
 
 export default {
+    name: 'ScrollTop',
     scrollListener: null,
     container: null,
     data() {

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,

src/components/sidebar/Sidebar.vue

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

src/components/skeleton/Skeleton.vue

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

src/components/slider/Slider.vue

@@ -14,6 +14,7 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'Slider',
     emits: ['update:modelValue', 'change', 'slideend'],
     props: {
         modelValue: [Number,Array],

src/components/splitbutton/SplitButton.vue

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

src/components/splitter/Splitter.vue

@@ -17,8 +17,8 @@
 import {DomHandler} from 'primevue/utils';
 
 export default {
+    name: 'Splitter',
     emits: ['resizeend'],
-    name: 'splitter',
     props: {
         layout: {
             type: String,
@@ -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;

src/components/splitterpanel/SplitterPanel.vue

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

src/components/steps/Steps.vue

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

src/components/tabmenu/TabMenu.vue

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