diff --git a/layouts/AppDocumentation.vue b/layouts/AppDocumentation.vue
index 7a9aafa85..ddda5ddf4 100644
--- a/layouts/AppDocumentation.vue
+++ b/layouts/AppDocumentation.vue
@@ -1,7 +1,7 @@
 <script lang="jsx">
-import EventBus from './AppEventBus';
 import LiveEditor from '@/pages/liveeditor/LiveEditor';
-import { services, data } from '@/pages/liveeditor/LiveEditorData';
+import { data, services } from '@/pages/liveeditor/LiveEditorData';
+import EventBus from './AppEventBus';
 
 export default {
     name: 'appdoc',
@@ -14,12 +14,15 @@ export default {
         extPages: null,
         extFiles: null,
         component: null,
-        github: null
+        github: {
+            type: String,
+            default: 'index'
+        }
     },
     viewGithubListener: null,
     mounted() {
         this.viewGithubListener = () => {
-            window.open('https://github.com/primefaces/primevue/blob/master/src/views/' + this.github, '_blank');
+            window.open('https://github.com/primefaces/primevue/blob/master/pages/' + this.name.toLowerCase().replaceAll('demo', '/') + this.github + '.vue', '_blank');
         };
         EventBus.on('view-github', this.viewGithubListener);
     },
diff --git a/pages/accordion/AccordionDoc.vue b/pages/accordion/AccordionDoc.vue
index bac3b6004..877c137ef 100755
--- a/pages/accordion/AccordionDoc.vue
+++ b/pages/accordion/AccordionDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
+    <AppDoc name="AccordionDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Accordion from 'primevue/accordion';
diff --git a/pages/autocomplete/AutoCompleteDoc.vue b/pages/autocomplete/AutoCompleteDoc.vue
index 41206f856..7faf69f9f 100755
--- a/pages/autocomplete/AutoCompleteDoc.vue
+++ b/pages/autocomplete/AutoCompleteDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
+    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';
diff --git a/pages/avatar/AvatarDoc.vue b/pages/avatar/AvatarDoc.vue
index 4f40c9f0c..0952e0440 100644
--- a/pages/avatar/AvatarDoc.vue
+++ b/pages/avatar/AvatarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
+    <AppDoc name="AvatarDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Avatar from 'primevue/avatar';
diff --git a/pages/badge/BadgeDoc.vue b/pages/badge/BadgeDoc.vue
index 7186e96fa..7261a152e 100644
--- a/pages/badge/BadgeDoc.vue
+++ b/pages/badge/BadgeDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
+    <AppDoc name="BadgeDemo" :sources="sources">
         <h5>Getting Started</h5>
         <p>Badge can either be used as a standalone component or as a directive.</p>
 
diff --git a/pages/blockui/BlockUIDoc.vue b/pages/blockui/BlockUIDoc.vue
index 226f8ac1d..f7729dfec 100755
--- a/pages/blockui/BlockUIDoc.vue
+++ b/pages/blockui/BlockUIDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
+    <AppDoc name="BlockUIDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import BlockUI from 'primevue/blockui';
diff --git a/pages/breadcrumb/BreadcrumbDoc.vue b/pages/breadcrumb/BreadcrumbDoc.vue
index 0a706f112..54126517a 100755
--- a/pages/breadcrumb/BreadcrumbDoc.vue
+++ b/pages/breadcrumb/BreadcrumbDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
+    <AppDoc name="BreadcrumbDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Breadcrumb from 'primevue/breadcrumb';
diff --git a/pages/button/ButtonDoc.vue b/pages/button/ButtonDoc.vue
index fbbc45bf1..9b7b5442f 100755
--- a/pages/button/ButtonDoc.vue
+++ b/pages/button/ButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
+    <AppDoc name="ButtonDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Button from 'primevue/button';
diff --git a/pages/calendar/CalendarDoc.vue b/pages/calendar/CalendarDoc.vue
index e90c6a9c9..fbcf8e4e8 100755
--- a/pages/calendar/CalendarDoc.vue
+++ b/pages/calendar/CalendarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
+    <AppDoc name="CalendarDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Calendar from 'primevue/calendar';
diff --git a/pages/card/CardDoc.vue b/pages/card/CardDoc.vue
index 3bf8d4a01..f386d2b5c 100755
--- a/pages/card/CardDoc.vue
+++ b/pages/card/CardDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
+    <AppDoc name="CardDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Card from 'primevue/card';
diff --git a/pages/carousel/CarouselDoc.vue b/pages/carousel/CarouselDoc.vue
index bed0de93a..9b17bfb3b 100755
--- a/pages/carousel/CarouselDoc.vue
+++ b/pages/carousel/CarouselDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
+    <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Carousel from 'primevue/carousel';
diff --git a/pages/cascadeselect/CascadeSelectDoc.vue b/pages/cascadeselect/CascadeSelectDoc.vue
index 7c20b66a7..12d4c2693 100644
--- a/pages/cascadeselect/CascadeSelectDoc.vue
+++ b/pages/cascadeselect/CascadeSelectDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
+    <AppDoc name="CascadeSelectDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import CascadeSelect from 'primevue/cascadeselect';
diff --git a/pages/chart/BarChartDoc.vue b/pages/chart/BarChartDoc.vue
index f9cd953ec..9757af46c 100755
--- a/pages/chart/BarChartDoc.vue
+++ b/pages/chart/BarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Bar" />
 </template>
 
 <script>
diff --git a/pages/chart/ComboChartDoc.vue b/pages/chart/ComboChartDoc.vue
index 0689f3305..86d1a4f74 100755
--- a/pages/chart/ComboChartDoc.vue
+++ b/pages/chart/ComboChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Combo" />
 </template>
 
 <script>
diff --git a/pages/chart/DoughnutChartDoc.vue b/pages/chart/DoughnutChartDoc.vue
index 87980b8be..e3419aec0 100755
--- a/pages/chart/DoughnutChartDoc.vue
+++ b/pages/chart/DoughnutChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Doughnut" />
 </template>
 
 <script>
diff --git a/pages/chart/LineChartDoc.vue b/pages/chart/LineChartDoc.vue
index 53bf4c226..9bd36a6aa 100755
--- a/pages/chart/LineChartDoc.vue
+++ b/pages/chart/LineChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Line" />
 </template>
 
 <script>
diff --git a/pages/chart/PieChartDoc.vue b/pages/chart/PieChartDoc.vue
index acf398ebd..2be13d9b0 100755
--- a/pages/chart/PieChartDoc.vue
+++ b/pages/chart/PieChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Pie" />
 </template>
 
 <script>
diff --git a/pages/chart/PolarAreaChartDoc.vue b/pages/chart/PolarAreaChartDoc.vue
index 5203dc5c9..3973e9dd5 100755
--- a/pages/chart/PolarAreaChartDoc.vue
+++ b/pages/chart/PolarAreaChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="PolarArea" />
 </template>
 
 <script>
diff --git a/pages/chart/RadarChartDoc.vue b/pages/chart/RadarChartDoc.vue
index e3ebed344..a8ebc711e 100755
--- a/pages/chart/RadarChartDoc.vue
+++ b/pages/chart/RadarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Radar" />
 </template>
 
 <script>
diff --git a/pages/checkbox/CheckboxDoc.vue b/pages/checkbox/CheckboxDoc.vue
index 1ef0966a1..e9f43c877 100755
--- a/pages/checkbox/CheckboxDoc.vue
+++ b/pages/checkbox/CheckboxDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
+    <AppDoc name="CheckboxDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Checkbox from 'primevue/checkbox';
diff --git a/pages/chip/ChipDoc.vue b/pages/chip/ChipDoc.vue
index a00073ee5..f86f67049 100644
--- a/pages/chip/ChipDoc.vue
+++ b/pages/chip/ChipDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
+    <AppDoc name="ChipDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Chip from 'primevue/chip';
diff --git a/pages/chips/ChipsDoc.vue b/pages/chips/ChipsDoc.vue
index 876f55fb0..15ae2c82e 100755
--- a/pages/chips/ChipsDoc.vue
+++ b/pages/chips/ChipsDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
+    <AppDoc name="ChipsDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Chips from 'primevue/chips';
diff --git a/pages/colorpicker/ColorPickerDoc.vue b/pages/colorpicker/ColorPickerDoc.vue
index 6242af051..07d9a401f 100755
--- a/pages/colorpicker/ColorPickerDoc.vue
+++ b/pages/colorpicker/ColorPickerDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
+    <AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ColorPicker from 'primevue/colorpicker';
diff --git a/pages/confirmdialog/ConfirmDialogDoc.vue b/pages/confirmdialog/ConfirmDialogDoc.vue
index d55cc9c56..be06a779d 100644
--- a/pages/confirmdialog/ConfirmDialogDoc.vue
+++ b/pages/confirmdialog/ConfirmDialogDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
+    <AppDoc name="ConfirmDialogDemo" :sources="sources">
         <h5>ConfirmationService</h5>
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
         <pre v-code.script><code>
diff --git a/pages/confirmpopup/ConfirmPopupDoc.vue b/pages/confirmpopup/ConfirmPopupDoc.vue
index c35eaf654..ba9ffee56 100644
--- a/pages/confirmpopup/ConfirmPopupDoc.vue
+++ b/pages/confirmpopup/ConfirmPopupDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
+    <AppDoc name="ConfirmPopupDemo" :sources="sources">
         <h5>ConfirmationService</h5>
         <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
         <pre v-code.script><code>
diff --git a/pages/contextmenu/ContextMenuDoc.vue b/pages/contextmenu/ContextMenuDoc.vue
index f20d20636..eb5d81f31 100755
--- a/pages/contextmenu/ContextMenuDoc.vue
+++ b/pages/contextmenu/ContextMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
+    <AppDoc name="ContextMenuDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ContextMenu from 'primevue/contextmenu';
diff --git a/pages/datatable/ColGroup.vue b/pages/datatable/ColGroup.vue
index 9ee633cec..919eebc5a 100755
--- a/pages/datatable/ColGroup.vue
+++ b/pages/datatable/ColGroup.vue
@@ -55,7 +55,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" github="ColGroup" />
     </div>
 </template>
 
diff --git a/pages/datatable/ColResize.vue b/pages/datatable/ColResize.vue
index 350749262..d0b379185 100755
--- a/pages/datatable/ColResize.vue
+++ b/pages/datatable/ColResize.vue
@@ -33,7 +33,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="ColResize" />
     </div>
 </template>
 
diff --git a/pages/datatable/ColToggle.vue b/pages/datatable/ColToggle.vue
index ee569b15d..a605f37a0 100755
--- a/pages/datatable/ColToggle.vue
+++ b/pages/datatable/ColToggle.vue
@@ -22,7 +22,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="ColToggle" />
     </div>
 </template>
 
diff --git a/pages/datatable/ContextMenu.vue b/pages/datatable/ContextMenu.vue
index 2aaf2a5c5..26db9b716 100755
--- a/pages/datatable/ContextMenu.vue
+++ b/pages/datatable/ContextMenu.vue
@@ -25,7 +25,7 @@
             <ContextMenu ref="cm" :model="menuModel" />
         </div>
 
-        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="ContextMenu" />
     </div>
 </template>
 
diff --git a/pages/datatable/Crud.vue b/pages/datatable/Crud.vue
index cfc822848..22f59c170 100755
--- a/pages/datatable/Crud.vue
+++ b/pages/datatable/Crud.vue
@@ -171,7 +171,7 @@
             </Dialog>
         </div>
 
-        <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="Crud" />
     </div>
 </template>
 
diff --git a/pages/datatable/DataTableBasicDoc.vue b/pages/datatable/DataTableBasicDoc.vue
index 4a7da5aad..16920702e 100644
--- a/pages/datatable/DataTableBasicDoc.vue
+++ b/pages/datatable/DataTableBasicDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
+    <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Basic" />
 </template>
 
 <script>
diff --git a/pages/datatable/DataTableDoc.vue b/pages/datatable/DataTableDoc.vue
index e5123e1bc..54276a712 100755
--- a/pages/datatable/DataTableDoc.vue
+++ b/pages/datatable/DataTableDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="content-section documentation">
-        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-small']" github="datatable/DataTableDemo.vue">
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-small']">
             <h5>Import via Module</h5>
             <pre v-code.script><code>
 import DataTable from 'primevue/datatable';
diff --git a/pages/datatable/DynamicColumns.vue b/pages/datatable/DynamicColumns.vue
index ba4732179..cc95143f2 100755
--- a/pages/datatable/DynamicColumns.vue
+++ b/pages/datatable/DynamicColumns.vue
@@ -16,7 +16,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="DynamicColumns" />
     </div>
 </template>
 
diff --git a/pages/datatable/Edit.vue b/pages/datatable/Edit.vue
index 13b1c97f4..30ed831d3 100755
--- a/pages/datatable/Edit.vue
+++ b/pages/datatable/Edit.vue
@@ -70,7 +70,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Edit" />
     </div>
 </template>
 
diff --git a/pages/datatable/Export.vue b/pages/datatable/Export.vue
index 716165431..68fa722b8 100755
--- a/pages/datatable/Export.vue
+++ b/pages/datatable/Export.vue
@@ -24,7 +24,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Export" />
     </div>
 </template>
 
diff --git a/pages/datatable/Filter.vue b/pages/datatable/Filter.vue
index 3cb204788..df649558f 100755
--- a/pages/datatable/Filter.vue
+++ b/pages/datatable/Filter.vue
@@ -220,7 +220,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="Filter" />
     </div>
 </template>
 
diff --git a/pages/datatable/FlexScroll.vue b/pages/datatable/FlexScroll.vue
index 5eac91b79..322d7dfec 100644
--- a/pages/datatable/FlexScroll.vue
+++ b/pages/datatable/FlexScroll.vue
@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="FlexScroll" />
     </div>
 </template>
 
diff --git a/pages/datatable/GridLines.vue b/pages/datatable/GridLines.vue
index 8a383809c..0a37bc843 100644
--- a/pages/datatable/GridLines.vue
+++ b/pages/datatable/GridLines.vue
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="GridLines" />
     </div>
 </template>
 
diff --git a/pages/datatable/Lazy.vue b/pages/datatable/Lazy.vue
index 22e0158fe..11808d24d 100755
--- a/pages/datatable/Lazy.vue
+++ b/pages/datatable/Lazy.vue
@@ -62,7 +62,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" github="Lazy" />
     </div>
 </template>
 
diff --git a/pages/datatable/Paginator.vue b/pages/datatable/Paginator.vue
index f80a2b4b4..7e0dc7eea 100755
--- a/pages/datatable/Paginator.vue
+++ b/pages/datatable/Paginator.vue
@@ -63,7 +63,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="Paginator" />
     </div>
 </template>
 
diff --git a/pages/datatable/Reorder.vue b/pages/datatable/Reorder.vue
index 47e6f7897..127e2f3c2 100755
--- a/pages/datatable/Reorder.vue
+++ b/pages/datatable/Reorder.vue
@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Reorder" />
     </div>
 </template>
 
diff --git a/pages/datatable/Responsive.vue b/pages/datatable/Responsive.vue
index 36d5b3881..140fe017d 100755
--- a/pages/datatable/Responsive.vue
+++ b/pages/datatable/Responsive.vue
@@ -50,7 +50,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Responsive" />
     </div>
 </template>
 
diff --git a/pages/datatable/RowExpand.vue b/pages/datatable/RowExpand.vue
index ebb1bd36d..da47c465d 100755
--- a/pages/datatable/RowExpand.vue
+++ b/pages/datatable/RowExpand.vue
@@ -69,7 +69,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="RowExpand" />
     </div>
 </template>
 
diff --git a/pages/datatable/RowGroup.vue b/pages/datatable/RowGroup.vue
index 4f880839f..0cfd173c3 100755
--- a/pages/datatable/RowGroup.vue
+++ b/pages/datatable/RowGroup.vue
@@ -115,7 +115,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="RowGroup" />
     </div>
 </template>
 
diff --git a/pages/datatable/Scroll.vue b/pages/datatable/Scroll.vue
index ab94cecd0..a152f997b 100755
--- a/pages/datatable/Scroll.vue
+++ b/pages/datatable/Scroll.vue
@@ -126,7 +126,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="Scroll" />
     </div>
 </template>
 
diff --git a/pages/datatable/Selection.vue b/pages/datatable/Selection.vue
index ba16c05e5..07e9154e5 100755
--- a/pages/datatable/Selection.vue
+++ b/pages/datatable/Selection.vue
@@ -79,7 +79,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Selection" />
     </div>
 </template>
 
diff --git a/pages/datatable/Size.vue b/pages/datatable/Size.vue
index 3d7d5ea64..0c025b314 100644
--- a/pages/datatable/Size.vue
+++ b/pages/datatable/Size.vue
@@ -40,7 +40,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Size" />
     </div>
 </template>
 
diff --git a/pages/datatable/Sort.vue b/pages/datatable/Sort.vue
index fc5c3fb13..39e586252 100755
--- a/pages/datatable/Sort.vue
+++ b/pages/datatable/Sort.vue
@@ -71,7 +71,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Sort" />
     </div>
 </template>
 
diff --git a/pages/datatable/State.vue b/pages/datatable/State.vue
index 3a1cdd300..cb69a7d52 100755
--- a/pages/datatable/State.vue
+++ b/pages/datatable/State.vue
@@ -142,7 +142,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="State" />
     </div>
 </template>
 
diff --git a/pages/datatable/Striped.vue b/pages/datatable/Striped.vue
index 4fa176a4d..be978e746 100644
--- a/pages/datatable/Striped.vue
+++ b/pages/datatable/Striped.vue
@@ -19,7 +19,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Striped" />
     </div>
 </template>
 
diff --git a/pages/datatable/Style.vue b/pages/datatable/Style.vue
index 1720fda22..0ffb164a4 100755
--- a/pages/datatable/Style.vue
+++ b/pages/datatable/Style.vue
@@ -25,7 +25,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Style" />
     </div>
 </template>
 
diff --git a/pages/datatable/Templating.vue b/pages/datatable/Templating.vue
index b1e565292..c3e634177 100755
--- a/pages/datatable/Templating.vue
+++ b/pages/datatable/Templating.vue
@@ -43,7 +43,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Templating" />
     </div>
 </template>
 
diff --git a/pages/datatable/VirtualScroll.vue b/pages/datatable/VirtualScroll.vue
index 76a7332bf..01590618c 100644
--- a/pages/datatable/VirtualScroll.vue
+++ b/pages/datatable/VirtualScroll.vue
@@ -61,7 +61,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CarService']" github="VirtualScroll" />
     </div>
 </template>
 
@@ -80,7 +80,7 @@ export default {
                     content: `
 <template>
 	<div>
-         <div class="card">
+        <div class="card">
             <h5>Preloaded Data (100000 Rows)</h5>
             <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
                 <Column field="id" header="Id" style="min-width: '200px'"></Column>
@@ -185,7 +185,7 @@ export default {
                     content: `
 <template>
 	<div>
-         <div class="card">
+        <div class="card">
             <h5>Preloaded Data (100000 Rows)</h5>
             <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
                 <Column field="id" header="Id" style="min-width: '200px'"></Column>
diff --git a/pages/dataview/DataViewDoc.vue b/pages/dataview/DataViewDoc.vue
index bf5fd4c77..320b76869 100755
--- a/pages/dataview/DataViewDoc.vue
+++ b/pages/dataview/DataViewDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
+    <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']">
         <h5>Import via Module</h5>
 
         <pre v-code.script><code>
diff --git a/pages/deferredcontent/DeferredContentDoc.vue b/pages/deferredcontent/DeferredContentDoc.vue
index c5df34cdf..5857dc2e0 100755
--- a/pages/deferredcontent/DeferredContentDoc.vue
+++ b/pages/deferredcontent/DeferredContentDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
+    <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';
diff --git a/pages/dialog/DialogDoc.vue b/pages/dialog/DialogDoc.vue
index dff18a982..2277e62e6 100755
--- a/pages/dialog/DialogDoc.vue
+++ b/pages/dialog/DialogDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
+    <AppDoc name="DialogDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Dialog from 'primevue/dialog';
diff --git a/pages/divider/DividerDoc.vue b/pages/divider/DividerDoc.vue
index 89935f9cf..bcf966118 100644
--- a/pages/divider/DividerDoc.vue
+++ b/pages/divider/DividerDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
+    <AppDoc name="DividerDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Divider from 'primevue/divider';
diff --git a/pages/dock/DockDoc.vue b/pages/dock/DockDoc.vue
index eaec10906..69e22672a 100644
--- a/pages/dock/DockDoc.vue
+++ b/pages/dock/DockDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
+    <AppDoc name="DockDemo" :sources="sources" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Dock from 'primevue/dock';
diff --git a/pages/dropdown/DropdownDoc.vue b/pages/dropdown/DropdownDoc.vue
index b99aa70a8..1a5b12fa2 100755
--- a/pages/dropdown/DropdownDoc.vue
+++ b/pages/dropdown/DropdownDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
+    <AppDoc name="DropdownDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Dropdown from 'primevue/dropdown';
diff --git a/pages/dynamicdialog/DynamicDialogDoc.vue b/pages/dynamicdialog/DynamicDialogDoc.vue
index 1fb9d1c5d..dcd03a31a 100644
--- a/pages/dynamicdialog/DynamicDialogDoc.vue
+++ b/pages/dynamicdialog/DynamicDialogDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
+    <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']">
         <h5>DialogService</h5>
         <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
 
diff --git a/pages/editor/EditorDoc.vue b/pages/editor/EditorDoc.vue
index 0d4bcbc71..137f2014b 100755
--- a/pages/editor/EditorDoc.vue
+++ b/pages/editor/EditorDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
+    <AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Editor from 'primevue/editor';
diff --git a/pages/fieldset/FieldsetDoc.vue b/pages/fieldset/FieldsetDoc.vue
index adc773b11..e80a5923d 100755
--- a/pages/fieldset/FieldsetDoc.vue
+++ b/pages/fieldset/FieldsetDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
+    <AppDoc name="FieldsetDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Fieldset from 'primevue/fieldset';
diff --git a/pages/fileupload/FileUploadDoc.vue b/pages/fileupload/FileUploadDoc.vue
index f86d7c2c5..45d07d45c 100755
--- a/pages/fileupload/FileUploadDoc.vue
+++ b/pages/fileupload/FileUploadDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
+    <AppDoc name="FileUploadDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import FileUpload from 'primevue/fileupload';
diff --git a/pages/filterservice/FilterServiceDoc.vue b/pages/filterservice/FilterServiceDoc.vue
index 2f6defc99..f75d87d42 100644
--- a/pages/filterservice/FilterServiceDoc.vue
+++ b/pages/filterservice/FilterServiceDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
+    <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import &#123;FilterService&#125; from 'primevue/api';
diff --git a/pages/floatlabel/index.vue b/pages/floatlabel/index.vue
index ca6b7e8ad..11bb5ea13 100644
--- a/pages/floatlabel/index.vue
+++ b/pages/floatlabel/index.vue
@@ -112,7 +112,7 @@
             </div>
         </div>
 
-        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" />
+        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" />
     </div>
 </template>
 
diff --git a/pages/focustrap/FocusTrapDoc.vue b/pages/focustrap/FocusTrapDoc.vue
index 082aa27b3..11d7564cb 100644
--- a/pages/focustrap/FocusTrapDoc.vue
+++ b/pages/focustrap/FocusTrapDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
+    <AppDoc name="FocusTrapDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import FocusTrap from 'primevue/focustrap';
diff --git a/pages/fullcalendar/FullCalendarDoc.vue b/pages/fullcalendar/FullCalendarDoc.vue
index d8c839453..c007c0672 100755
--- a/pages/fullcalendar/FullCalendarDoc.vue
+++ b/pages/fullcalendar/FullCalendarDoc.vue
@@ -4,7 +4,6 @@
         :sources="sources"
         :service="['EventService']"
         :data="['events']"
-        github="fullcalendar/FullCalendarDemo.vue"
         :dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }"
         component="FullCalendar"
     >
diff --git a/pages/image/ImageDoc.vue b/pages/image/ImageDoc.vue
index 444e5642a..6fd70f091 100644
--- a/pages/image/ImageDoc.vue
+++ b/pages/image/ImageDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
+    <AppDoc name="ImageDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Image from 'primevue/image';
diff --git a/pages/inplace/InplaceDoc.vue b/pages/inplace/InplaceDoc.vue
index b884a4a0a..056cd267d 100755
--- a/pages/inplace/InplaceDoc.vue
+++ b/pages/inplace/InplaceDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue">
+    <AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Inplace from 'primevue/inplace';
diff --git a/pages/inputgroup/InputGroupDoc.vue b/pages/inputgroup/InputGroupDoc.vue
index afb2d6aa8..f35dbbc9f 100755
--- a/pages/inputgroup/InputGroupDoc.vue
+++ b/pages/inputgroup/InputGroupDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" />
+    <AppDoc name="InputGroupDemo" :sources="sources" />
 </template>
 
 <script>
diff --git a/pages/inputmask/InputMaskDoc.vue b/pages/inputmask/InputMaskDoc.vue
index 0c32f67c9..1d3f734bb 100755
--- a/pages/inputmask/InputMaskDoc.vue
+++ b/pages/inputmask/InputMaskDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
+    <AppDoc name="InputMaskDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import InputMask from 'primevue/inputmask';
diff --git a/pages/inputnumber/InputNumberDoc.vue b/pages/inputnumber/InputNumberDoc.vue
index b64c3e7d2..37f79f3ee 100755
--- a/pages/inputnumber/InputNumberDoc.vue
+++ b/pages/inputnumber/InputNumberDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
+    <AppDoc name="InputNumberDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import InputNumber from 'primevue/inputnumber';
diff --git a/pages/inputswitch/InputSwitchDoc.vue b/pages/inputswitch/InputSwitchDoc.vue
index 4ccb6dc33..c2b20db27 100755
--- a/pages/inputswitch/InputSwitchDoc.vue
+++ b/pages/inputswitch/InputSwitchDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
+    <AppDoc name="InputSwitchDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import InputSwitch from 'primevue/inputswitch';
diff --git a/pages/inputtext/InputTextDoc.vue b/pages/inputtext/InputTextDoc.vue
index 34b4fbe38..8dc20c779 100755
--- a/pages/inputtext/InputTextDoc.vue
+++ b/pages/inputtext/InputTextDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
+    <AppDoc name="InputTextDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import InputText from 'primevue/inputtext';
diff --git a/pages/invalid/index.vue b/pages/invalid/index.vue
index fbbc31584..b80bd0fac 100644
--- a/pages/invalid/index.vue
+++ b/pages/invalid/index.vue
@@ -51,7 +51,7 @@
             </div>
         </div>
 
-        <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="invalid/InvalidDemo.vue" />
+        <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" />
     </div>
 </template>
 
diff --git a/pages/knob/KnobDoc.vue b/pages/knob/KnobDoc.vue
index dff6017fb..de21cafd0 100644
--- a/pages/knob/KnobDoc.vue
+++ b/pages/knob/KnobDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
+    <AppDoc name="KnobDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Knob from 'primevue/knob';
diff --git a/pages/listbox/ListboxDoc.vue b/pages/listbox/ListboxDoc.vue
index f570cb66c..fa70b894b 100755
--- a/pages/listbox/ListboxDoc.vue
+++ b/pages/listbox/ListboxDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
+    <AppDoc name="ListboxDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Listbox from 'primevue/listbox';
diff --git a/pages/megamenu/MegaMenuDoc.vue b/pages/megamenu/MegaMenuDoc.vue
index b57991af8..46f2db452 100755
--- a/pages/megamenu/MegaMenuDoc.vue
+++ b/pages/megamenu/MegaMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
+    <AppDoc name="MegaMenuDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import MegaMenu from 'primevue/megamenu';
diff --git a/pages/menu/MenuDoc.vue b/pages/menu/MenuDoc.vue
index c69ebd9cf..3f4d687a3 100755
--- a/pages/menu/MenuDoc.vue
+++ b/pages/menu/MenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
+    <AppDoc name="MenuDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Menu from 'primevue/menu';
diff --git a/pages/menubar/MenubarDoc.vue b/pages/menubar/MenubarDoc.vue
index 12c8bf9ae..dd9f0aa0c 100755
--- a/pages/menubar/MenubarDoc.vue
+++ b/pages/menubar/MenubarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
+    <AppDoc name="MenubarDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Menubar from 'primevue/menubar';
diff --git a/pages/message/MessageDoc.vue b/pages/message/MessageDoc.vue
index 87a76ecc1..ae7b6106a 100755
--- a/pages/message/MessageDoc.vue
+++ b/pages/message/MessageDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
+    <AppDoc name="MessageDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Message from 'primevue/message';
diff --git a/pages/multiselect/MultiSelectDoc.vue b/pages/multiselect/MultiSelectDoc.vue
index 4fb5b7f30..04e3fb643 100755
--- a/pages/multiselect/MultiSelectDoc.vue
+++ b/pages/multiselect/MultiSelectDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
+    <AppDoc name="MultiSelectDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import MultiSelect from 'primevue/multiselect';
diff --git a/pages/orderlist/OrderListDoc.vue b/pages/orderlist/OrderListDoc.vue
index aa8a0bac3..b54438792 100755
--- a/pages/orderlist/OrderListDoc.vue
+++ b/pages/orderlist/OrderListDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue">
+    <AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import OrderList from 'primevue/orderlist';
diff --git a/pages/organizationchart/OrganizationChartDoc.vue b/pages/organizationchart/OrganizationChartDoc.vue
index 1882cd5ad..c815898c1 100755
--- a/pages/organizationchart/OrganizationChartDoc.vue
+++ b/pages/organizationchart/OrganizationChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
+    <AppDoc name="OrganizationChartDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import OrganizationChart from 'primevue/organizationchart';
diff --git a/pages/overlaypanel/OverlayPanelDoc.vue b/pages/overlaypanel/OverlayPanelDoc.vue
index 8aa4fed74..8baf0c66c 100755
--- a/pages/overlaypanel/OverlayPanelDoc.vue
+++ b/pages/overlaypanel/OverlayPanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue">
+    <AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import OverlayPanel from 'primevue/overlaypanel';
diff --git a/pages/paginator/PaginatorDoc.vue b/pages/paginator/PaginatorDoc.vue
index c4cc09439..6146a4449 100755
--- a/pages/paginator/PaginatorDoc.vue
+++ b/pages/paginator/PaginatorDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
+    <AppDoc name="PaginatorDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Paginator from 'primevue/paginator';
diff --git a/pages/panel/PanelDoc.vue b/pages/panel/PanelDoc.vue
index 8e02ff511..73d95cad8 100755
--- a/pages/panel/PanelDoc.vue
+++ b/pages/panel/PanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
+    <AppDoc name="PanelDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Panel from 'primevue/panel';
diff --git a/pages/panelmenu/PanelMenuDoc.vue b/pages/panelmenu/PanelMenuDoc.vue
index d29dcb3cc..301782817 100755
--- a/pages/panelmenu/PanelMenuDoc.vue
+++ b/pages/panelmenu/PanelMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
+    <AppDoc name="PanelMenuDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import PanelMenu from 'primevue/panelmenu';
diff --git a/pages/password/PasswordDoc.vue b/pages/password/PasswordDoc.vue
index d5260c55d..78d4df4d2 100755
--- a/pages/password/PasswordDoc.vue
+++ b/pages/password/PasswordDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
+    <AppDoc name="PasswordDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Password from 'primevue/password';
diff --git a/pages/picklist/PickListDoc.vue b/pages/picklist/PickListDoc.vue
index 478cacc3d..63f7f2e03 100755
--- a/pages/picklist/PickListDoc.vue
+++ b/pages/picklist/PickListDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="picklist/PickListDemo.vue">
+    <AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import PickList from 'primevue/picklist';
diff --git a/pages/progressbar/ProgressBarDoc.vue b/pages/progressbar/ProgressBarDoc.vue
index 9e04987e6..60e0c7146 100755
--- a/pages/progressbar/ProgressBarDoc.vue
+++ b/pages/progressbar/ProgressBarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ProgressBarDemo" :sources="sources" github="progressbar/ProgressBarDemo.vue">
+    <AppDoc name="ProgressBarDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ProgressBar from 'primevue/progressbar';
diff --git a/pages/progressspinner/ProgressSpinnerDoc.vue b/pages/progressspinner/ProgressSpinnerDoc.vue
index 0ef058b76..760615a67 100755
--- a/pages/progressspinner/ProgressSpinnerDoc.vue
+++ b/pages/progressspinner/ProgressSpinnerDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ProgressSpinnerDemo" :sources="sources" github="progressspinner/ProgressSpinnerDemo.vue">
+    <AppDoc name="ProgressSpinnerDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ProgressSpinner from 'primevue/progressspinner';
diff --git a/pages/radiobutton/RadioButtonDoc.vue b/pages/radiobutton/RadioButtonDoc.vue
index 7ca0e347f..3677b4c32 100755
--- a/pages/radiobutton/RadioButtonDoc.vue
+++ b/pages/radiobutton/RadioButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="RadioButtonDemo" :sources="sources" github="radiobutton/RadioButtonDemo.vue">
+    <AppDoc name="RadioButtonDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import RadioButton from 'primevue/radiobutton';
diff --git a/pages/rating/RatingDoc.vue b/pages/rating/RatingDoc.vue
index b4231d976..0bc7b97df 100755
--- a/pages/rating/RatingDoc.vue
+++ b/pages/rating/RatingDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="RatingDemo" :sources="sources" github="rating/RatingDemo.vue">
+    <AppDoc name="RatingDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Rating from 'primevue/rating';
diff --git a/pages/ripple/RippleDoc.vue b/pages/ripple/RippleDoc.vue
index 9e9627730..5c0fc0b35 100644
--- a/pages/ripple/RippleDoc.vue
+++ b/pages/ripple/RippleDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="RippleDemo" :sources="sources" github="ripple/RippleDemo.vue">
+    <AppDoc name="RippleDemo" :sources="sources">
         <h5>Getting Started</h5>
         <h5>Ripple</h5>
         <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
diff --git a/pages/scrollpanel/ScrollPanelDoc.vue b/pages/scrollpanel/ScrollPanelDoc.vue
index 2a83e1772..4c7339874 100644
--- a/pages/scrollpanel/ScrollPanelDoc.vue
+++ b/pages/scrollpanel/ScrollPanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ScrollPanelDemo" :sources="sources" github="scrollpanel/ScrollPanelDemo.vue">
+    <AppDoc name="ScrollPanelDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ScrollPanel from 'primevue/scrollpanel';
diff --git a/pages/scrolltop/ScrollTopDoc.vue b/pages/scrolltop/ScrollTopDoc.vue
index 35bb44721..04cad40cd 100644
--- a/pages/scrolltop/ScrollTopDoc.vue
+++ b/pages/scrolltop/ScrollTopDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ScrollTopDemo" :sources="sources" github="scrolltop/ScrollTopDemo.vue">
+    <AppDoc name="ScrollTopDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ScrollTop from 'primevue/scrolltop';
diff --git a/pages/selectbutton/SelectButtonDoc.vue b/pages/selectbutton/SelectButtonDoc.vue
index 96e39e00b..56c793175 100755
--- a/pages/selectbutton/SelectButtonDoc.vue
+++ b/pages/selectbutton/SelectButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="SelectButtonDemo" :sources="sources" github="selectbutton/SelectButtonDemo.vue">
+    <AppDoc name="SelectButtonDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import SelectButton from 'primevue/selectbutton';
diff --git a/pages/sidebar/SidebarDoc.vue b/pages/sidebar/SidebarDoc.vue
index d9c1b1b13..dce73b828 100755
--- a/pages/sidebar/SidebarDoc.vue
+++ b/pages/sidebar/SidebarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="SidebarDemo" :sources="sources" github="sidebar/SidebarDemo.vue">
+    <AppDoc name="SidebarDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Sidebar from 'primevue/sidebar';
diff --git a/pages/skeleton/SkeletonDoc.vue b/pages/skeleton/SkeletonDoc.vue
index 588b05c94..37ae35184 100644
--- a/pages/skeleton/SkeletonDoc.vue
+++ b/pages/skeleton/SkeletonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="SkeletonDemo" :sources="sources" github="skeleton/SkeletonDemo.vue">
+    <AppDoc name="SkeletonDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Skeleton from 'primevue/skeleton';
diff --git a/pages/slider/SliderDoc.vue b/pages/slider/SliderDoc.vue
index f5dcbd135..d4283e033 100755
--- a/pages/slider/SliderDoc.vue
+++ b/pages/slider/SliderDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="SliderDemo" :sources="sources" github="slider/SliderDemo.vue">
+    <AppDoc name="SliderDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Slider from 'primevue/slider';
diff --git a/pages/speeddial/SpeedDialDoc.vue b/pages/speeddial/SpeedDialDoc.vue
index fb2d17ad5..29eaacb6b 100644
--- a/pages/speeddial/SpeedDialDoc.vue
+++ b/pages/speeddial/SpeedDialDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="SpeedDialDemo" :sources="sources" github="speeddial/SpeedDialDemo.vue">
+    <AppDoc name="SpeedDialDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import SpeedDial from 'primevue/speeddial';
diff --git a/pages/splitbutton/SplitButtonDoc.vue b/pages/splitbutton/SplitButtonDoc.vue
index f9b25c800..bad3142f2 100755
--- a/pages/splitbutton/SplitButtonDoc.vue
+++ b/pages/splitbutton/SplitButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="SplitButtonDemo" :sources="sources" github="splitbutton/SplitButtonDemo.vue">
+    <AppDoc name="SplitButtonDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import SplitButton from 'primevue/splitbutton';
diff --git a/pages/splitter/SplitterDoc.vue b/pages/splitter/SplitterDoc.vue
index afac5490d..663eb7f4b 100644
--- a/pages/splitter/SplitterDoc.vue
+++ b/pages/splitter/SplitterDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="SplitterDemo" :sources="sources" github="splitter/SplitterDemo.vue">
+    <AppDoc name="SplitterDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Splitter from 'primevue/splitter';
diff --git a/pages/steps/StepsDoc.vue b/pages/steps/StepsDoc.vue
index 68b652fb6..0bf0bac94 100755
--- a/pages/steps/StepsDoc.vue
+++ b/pages/steps/StepsDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="StepsDemo" :sources="sources" :extPages="pages" github="steps/StepsDemo.vue">
+    <AppDoc name="StepsDemo" :sources="sources" :extPages="pages">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Steps from 'primevue/steps';
diff --git a/pages/styleclass/StyleClassDoc.vue b/pages/styleclass/StyleClassDoc.vue
index f5d9ced2e..79a15e17d 100644
--- a/pages/styleclass/StyleClassDoc.vue
+++ b/pages/styleclass/StyleClassDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="StyleClassDemo" :sources="sources" github="styleclass/StyleClassDemo.vue">
+    <AppDoc name="StyleClassDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import StyleClass from 'primevue/styleclass';
diff --git a/pages/tabmenu/TabMenuDoc.vue b/pages/tabmenu/TabMenuDoc.vue
index a1649ed03..b4da0cd6c 100755
--- a/pages/tabmenu/TabMenuDoc.vue
+++ b/pages/tabmenu/TabMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages" github="tabmenu/TabMenuDemo.vue">
+    <AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import TabMenu from 'primevue/tabmenu';
diff --git a/pages/tabview/TabViewDoc.vue b/pages/tabview/TabViewDoc.vue
index ae00126a8..acd2822c2 100755
--- a/pages/tabview/TabViewDoc.vue
+++ b/pages/tabview/TabViewDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TabViewDemo" :sources="sources" github="tabview/TabViewDemo.vue">
+    <AppDoc name="TabViewDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import TabView from 'primevue/tabview';
diff --git a/pages/tag/TagDoc.vue b/pages/tag/TagDoc.vue
index c3012a6a5..5d5691f12 100644
--- a/pages/tag/TagDoc.vue
+++ b/pages/tag/TagDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TagDemo" :sources="sources" github="tag/TagDemo.vue">
+    <AppDoc name="TagDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Tag from 'primevue/tag';
diff --git a/pages/terminal/TerminalDoc.vue b/pages/terminal/TerminalDoc.vue
index fac211d80..4b0697a7b 100755
--- a/pages/terminal/TerminalDoc.vue
+++ b/pages/terminal/TerminalDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TerminalDemo" :sources="sources" github="terminal/TerminalDemo.vue">
+    <AppDoc name="TerminalDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Terminal from 'primevue/terminal';
diff --git a/pages/textarea/TextareaDoc.vue b/pages/textarea/TextareaDoc.vue
index 18a289178..b61d4fdb4 100755
--- a/pages/textarea/TextareaDoc.vue
+++ b/pages/textarea/TextareaDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TextareaDemo" :sources="sources" github="textarea/TextareaDemo.vue">
+    <AppDoc name="TextareaDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Textarea from 'primevue/textarea';
diff --git a/pages/tieredmenu/TieredMenuDoc.vue b/pages/tieredmenu/TieredMenuDoc.vue
index 911a394e5..67f510e85 100755
--- a/pages/tieredmenu/TieredMenuDoc.vue
+++ b/pages/tieredmenu/TieredMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TieredMenuDemo" :sources="sources" github="tieredmenu/TieredMenuDemo.vue">
+    <AppDoc name="TieredMenuDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import TieredMenu from 'primevue/tieredmenu';
diff --git a/pages/timeline/TimelineDoc.vue b/pages/timeline/TimelineDoc.vue
index 3fc5ac4bf..bfdddb245 100644
--- a/pages/timeline/TimelineDoc.vue
+++ b/pages/timeline/TimelineDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TimelineDemo" :sources="sources" github="timeline/TimelineDemo.vue">
+    <AppDoc name="TimelineDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Timeline from 'primevue/timeline';
diff --git a/pages/toast/ToastDoc.vue b/pages/toast/ToastDoc.vue
index 4d9437b00..eef9f9c2f 100755
--- a/pages/toast/ToastDoc.vue
+++ b/pages/toast/ToastDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ToastDemo" :sources="sources" github="toast/ToastDemo.vue">
+    <AppDoc name="ToastDemo" :sources="sources">
         <h5>ToastService</h5>
         <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application instance is created.</p>
         <pre v-code.script><code>
diff --git a/pages/togglebutton/ToggleButtonDoc.vue b/pages/togglebutton/ToggleButtonDoc.vue
index 1d4fc3941..ac3dd117c 100755
--- a/pages/togglebutton/ToggleButtonDoc.vue
+++ b/pages/togglebutton/ToggleButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ToggleButtonDemo" :sources="sources" github="togglebutton/ToggleButtonDemo.vue">
+    <AppDoc name="ToggleButtonDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import ToggleButton from 'primevue/togglebutton';
diff --git a/pages/toolbar/ToolbarDoc.vue b/pages/toolbar/ToolbarDoc.vue
index ffa1c359d..a1e9a0ca9 100755
--- a/pages/toolbar/ToolbarDoc.vue
+++ b/pages/toolbar/ToolbarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ToolbarDemo" :sources="sources" github="toolbar/ToolbarDemo.vue">
+    <AppDoc name="ToolbarDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Toolbar from 'primevue/toolbar';
diff --git a/pages/tooltip/TooltipDoc.vue b/pages/tooltip/TooltipDoc.vue
index 317ecf292..fe4528bf1 100755
--- a/pages/tooltip/TooltipDoc.vue
+++ b/pages/tooltip/TooltipDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TooltipDemo" :sources="sources" github="tooltip/TooltipDemo.vue">
+    <AppDoc name="TooltipDemo" :sources="sources">
         <h5>Getting Started</h5>
         <p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
         <pre v-code.script><code>
diff --git a/pages/tree/Filter.vue b/pages/tree/Filter.vue
index c0a724c07..27b789ede 100755
--- a/pages/tree/Filter.vue
+++ b/pages/tree/Filter.vue
@@ -18,7 +18,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeFilterDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeFilterDemo.vue" />
+        <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="Filter" />
     </div>
 </template>
 
diff --git a/pages/tree/Lazy.vue b/pages/tree/Lazy.vue
index 3a9069434..1a018c471 100755
--- a/pages/tree/Lazy.vue
+++ b/pages/tree/Lazy.vue
@@ -14,7 +14,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeLazyDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeLazyDemo.vue" />
+        <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="Lazy" />
     </div>
 </template>
 
diff --git a/pages/tree/Scroll.vue b/pages/tree/Scroll.vue
index 45d617849..651896cea 100644
--- a/pages/tree/Scroll.vue
+++ b/pages/tree/Scroll.vue
@@ -30,7 +30,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeScrollDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeScrollDemo.vue" />
+        <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="Scroll" />
     </div>
 </template>
 
diff --git a/pages/tree/Selection.vue b/pages/tree/Selection.vue
index 00f26df16..9ea143a1b 100755
--- a/pages/tree/Selection.vue
+++ b/pages/tree/Selection.vue
@@ -27,7 +27,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeSelectionDemo.vue" />
+        <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="Selection" />
     </div>
 </template>
 
diff --git a/pages/tree/Templating.vue b/pages/tree/Templating.vue
index be610f5e7..eeb53d7d3 100755
--- a/pages/tree/Templating.vue
+++ b/pages/tree/Templating.vue
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeTemplatingDemo.vue" />
+        <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="Templating" />
     </div>
 </template>
 
diff --git a/pages/tree/TreeDoc.vue b/pages/tree/TreeDoc.vue
index 391928b1a..33960cdf5 100755
--- a/pages/tree/TreeDoc.vue
+++ b/pages/tree/TreeDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue">
+    <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import Tree from 'primevue/tree';
diff --git a/pages/treeselect/TreeSelectDoc.vue b/pages/treeselect/TreeSelectDoc.vue
index afc4c41e4..b35820917 100644
--- a/pages/treeselect/TreeSelectDoc.vue
+++ b/pages/treeselect/TreeSelectDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TreeSelectDemo" :sources="sources" github="treeselect/TreeSelectDemo.vue" :service="['NodeService']" :data="['treenodes']">
+    <AppDoc name="TreeSelectDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import TreeSelect from 'primevue/treeselect';
diff --git a/pages/treetable/ColResize.vue b/pages/treetable/ColResize.vue
index 88e766ee2..c2f35e773 100755
--- a/pages/treetable/ColResize.vue
+++ b/pages/treetable/ColResize.vue
@@ -31,7 +31,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableColResizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColResizeDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="ColResize" />
     </div>
 </template>
 
diff --git a/pages/treetable/ColToggle.vue b/pages/treetable/ColToggle.vue
index 640fc3e38..d40f759c5 100755
--- a/pages/treetable/ColToggle.vue
+++ b/pages/treetable/ColToggle.vue
@@ -22,7 +22,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableColToggleDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColToggleDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="ColToggle" />
     </div>
 </template>
 
diff --git a/pages/treetable/Filter.vue b/pages/treetable/Filter.vue
index c04b8ed16..ef2c3528b 100755
--- a/pages/treetable/Filter.vue
+++ b/pages/treetable/Filter.vue
@@ -68,7 +68,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableFilterDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableFilterDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Filter" />
     </div>
 </template>
 
diff --git a/pages/treetable/Lazy.vue b/pages/treetable/Lazy.vue
index a9c0b34b7..3bde050ad 100755
--- a/pages/treetable/Lazy.vue
+++ b/pages/treetable/Lazy.vue
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableLazyDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableLazyDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Lazy" />
     </div>
 </template>
 
diff --git a/pages/treetable/Paginator.vue b/pages/treetable/Paginator.vue
index 193bb5b48..cc025542d 100755
--- a/pages/treetable/Paginator.vue
+++ b/pages/treetable/Paginator.vue
@@ -18,7 +18,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTablePaginatorDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTablePaginatorDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Paginator" />
     </div>
 </template>
 
diff --git a/pages/treetable/Responsive.vue b/pages/treetable/Responsive.vue
index affc31b89..5bcb25562 100755
--- a/pages/treetable/Responsive.vue
+++ b/pages/treetable/Responsive.vue
@@ -36,7 +36,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableResponsiveDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableResponsiveDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Responsive" />
     </div>
 </template>
 
diff --git a/pages/treetable/Scroll.vue b/pages/treetable/Scroll.vue
index 8bb8e8862..2605d1f93 100644
--- a/pages/treetable/Scroll.vue
+++ b/pages/treetable/Scroll.vue
@@ -91,7 +91,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableScrollDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Scroll" />
     </div>
 </template>
 
diff --git a/pages/treetable/Selection.vue b/pages/treetable/Selection.vue
index f48e3e3fb..748aaaa64 100755
--- a/pages/treetable/Selection.vue
+++ b/pages/treetable/Selection.vue
@@ -55,7 +55,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSelectionDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Selection" />
     </div>
 </template>
 
diff --git a/pages/treetable/Size.vue b/pages/treetable/Size.vue
index e07a98867..487b0367c 100644
--- a/pages/treetable/Size.vue
+++ b/pages/treetable/Size.vue
@@ -37,7 +37,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableSizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Size" />
     </div>
 </template>
 
diff --git a/pages/treetable/Sort.vue b/pages/treetable/Sort.vue
index 6500cd2ac..966f82f30 100755
--- a/pages/treetable/Sort.vue
+++ b/pages/treetable/Sort.vue
@@ -37,7 +37,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableSortDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSortDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Sort" />
     </div>
 </template>
 
diff --git a/pages/treetable/Templating.vue b/pages/treetable/Templating.vue
index b359e75f4..872176aae 100755
--- a/pages/treetable/Templating.vue
+++ b/pages/treetable/Templating.vue
@@ -33,7 +33,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableTemplatingDemo.vue" />
+        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="Templating" />
     </div>
 </template>
 
diff --git a/pages/treetable/TreeTableDoc.vue b/pages/treetable/TreeTableDoc.vue
index bcbdd8d12..1dc61700f 100755
--- a/pages/treetable/TreeTableDoc.vue
+++ b/pages/treetable/TreeTableDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableDemo.vue">
+    <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import TreeTable from 'primevue/treetable';
diff --git a/pages/tristatecheckbox/TriStateCheckboxDoc.vue b/pages/tristatecheckbox/TriStateCheckboxDoc.vue
index e99ce95a4..234b7d616 100755
--- a/pages/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/pages/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="TriStateCheckboxDemo" :sources="sources" github="tristatecheckbox/TriStateCheckboxDemo.vue">
+    <AppDoc name="TriStateCheckboxDemo" :sources="sources">
         <h5>Import via Module</h5>
         <pre v-code.script><code>
 import TriStateCheckbox from 'primevue/tristatecheckbox';
diff --git a/pages/validation/index.vue b/pages/validation/index.vue
index 34ae6654b..3c2d752df 100644
--- a/pages/validation/index.vue
+++ b/pages/validation/index.vue
@@ -97,14 +97,7 @@
             </div>
         </div>
 
-        <AppDoc
-            name="VuelidateFormDemo"
-            :sources="sources"
-            :service="['CountryService']"
-            :data="['countries']"
-            github="validation/VuelidateFormDemo.vue"
-            :dependencies="{ '@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12' }"
-        />
+        <AppDoc name="ValidationDemo" :sources="sources" :service="['CountryService']" :data="['countries']" :dependencies="{ '@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12' }" />
     </div>
 </template>
 
diff --git a/pages/virtualscroller/VirtualScrollerDoc.vue b/pages/virtualscroller/VirtualScrollerDoc.vue
index 1efa7cd7a..3c729b23a 100644
--- a/pages/virtualscroller/VirtualScrollerDoc.vue
+++ b/pages/virtualscroller/VirtualScrollerDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="VirtualScrollerDemo" :sources="sources" github="virtualscroller/VirtualScrollerDemo.vue">
+    <AppDoc name="VirtualScrollerDemo" :sources="sources">
         <h5>Imports</h5>
         <pre v-code.script><code>
 import VirtualScroller from 'primevue/virtualscroller';