Initiated Vue 3 update

2020-09-11 19:50:20 +03:00 · 2020-09-11 19:50:20 +03:00 · 0dce8b5174
parent f6f03c7299
commit 0dce8b5174
36 changed files with 3102 additions and 2681 deletions
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
--- a/package.json
+++ b/package.json
@ -27,20 +27,22 @@
    "bootstrap"
  ],
  "devDependencies": {
-    "core-js": "^2.6.5",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.5.21",
-    "@babel/cli": "^7.4.4",
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0-0",
+    "vue-router": "^4.0.0-0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0-0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0-0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2",
    "axios": "^0.19.0",
    "vuelidate": "^0.7.4",
-    "babel-eslint": "^10.0.1",
    "chart.js": "2.7.3",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-flatten": "^0.2.0",
@ -54,8 +56,9 @@
    "@fullcalendar/core": "4.0.2",
    "@fullcalendar/daygrid": "4.0.1",
    "@fullcalendar/interaction": "4.0.2",
-    "@fullcalendar/timegrid": "4.0.1",
-    "sass-loader": "^7.0.1",
-    "node-sass": "^4.9.0"
+    "@fullcalendar/timegrid": "4.0.1"
+  },
+  "dependencies": {
+    "mitt": "^2.1.0"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -88,7 +88,7 @@ export default {

            this.activeMenuIndex = null;

-            EventBus.$emit('change-theme', event);
+            EventBus.emit('change-theme', event);
            this.$appState.darkTheme = event.dark;

            if (event.theme.startsWith('md')) {
--- a/src/EventBus.js
+++ b/src/EventBus.js
@ -1,3 +1,3 @@
-import Vue from 'vue';
-const EventBus = new Vue();
+import mitt from 'mitt';
+const EventBus = mitt();
 export default EventBus;
--- a/src/components/terminal/Terminal.vue
+++ b/src/components/terminal/Terminal.vue
@ -36,14 +36,14 @@ export default {
        }
    },
    mounted() {
-        TerminalService.$on('response', this.responseListener);
+        TerminalService.on('response', this.responseListener);
        this.$refs.input.focus();
    },
    updated() {
        this.$el.scrollTop = this.$el.scrollHeight;
    },
    beforeDestroy() {
-        TerminalService.$off('response', this.responseListener);
+        TerminalService.off('response', this.responseListener);
    },
    methods: {
        onClick() {
@ -52,7 +52,7 @@ export default {
        onKeydown(event) {
            if (event.keyCode === 13 && this.commandText) {
                this.commands.push({text: this.commandText});
-                TerminalService.$emit('command', this.commandText);
+                TerminalService.emit('command', this.commandText);
                this.commandText = '';
            }
        },
--- a/src/components/terminal/TerminalService.js
+++ b/src/components/terminal/TerminalService.js
@ -1,4 +1,4 @@
-import Vue from 'vue';
-const TerminalService = new Vue();
+import mitt from 'mitt';
+const TerminalService = mitt();

 export default TerminalService;
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@ -38,17 +38,17 @@ export default {
        }
    },
    mounted() {
-        ToastEventBus.$on('add', (message) => {
+        ToastEventBus.on('add', (message) => {
            if (this.group == message.group) {
                this.add(message);
            }
        });
-        ToastEventBus.$on('remove-group', (group) => {
+        ToastEventBus.on('remove-group', (group) => {
            if (this.group === group) {
                this.messages = [];
            }
        });
-        ToastEventBus.$on('remove-all-groups', () => {
+        ToastEventBus.on('remove-all-groups', () => {
            this.messages = [];
        });

--- a/src/components/toast/ToastEventBus.js
+++ b/src/components/toast/ToastEventBus.js
@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mitt from 'mitt';
+const EventBus = mitt();

-const EventBus = new Vue();
 export default EventBus;
--- a/src/components/toast/ToastService.js
+++ b/src/components/toast/ToastService.js
@ -1,21 +1,17 @@
 import ToastEventBus from './ToastEventBus';

-const ToastService = {
-
-    install: (Vue) => {
-        Vue.prototype.$toast = {
+export default {
+    install: (app) => {
+        app.config.globalProperties.$toast = {
            add: (message) => {
-                ToastEventBus.$emit('add', message);
+                ToastEventBus.emit('add', message);
            },
            removeGroup: (group) => {
-                ToastEventBus.$emit('remove-group', group);
+                ToastEventBus.emit('remove-group', group);
            },
            removeAllGroups: () => {
-                ToastEventBus.$emit('remove-all-groups');
+                ToastEventBus.emit('remove-all-groups');
            }
-        }
+        };
    }
-
-};
-
-export default ToastService;
+};
--- a/src/main.js
+++ b/src/main.js
@ -1,6 +1,7 @@
-import Vue from 'vue';
-import App from './App.vue';
+import {createApp} from 'vue';
+import {reactive} from 'vue'
 import router from './router';
+import App from './App.vue';
 import AutoComplete from './components/autocomplete/AutoComplete';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordiontab/AccordionTab';
@ -86,98 +87,97 @@ import '@fullcalendar/core/main.min.css';
 import '@fullcalendar/daygrid/main.min.css';
 import '@fullcalendar/timegrid/main.min.css';
 import './assets/styles/flags.css';
-import Vuelidate from 'vuelidate';
+//import Vuelidate from 'vuelidate';

-Vue.use(Vuelidate);
-Vue.use(ToastService);
-Vue.directive('tooltip', Tooltip);
-Vue.directive('ripple', Ripple);
-
-Vue.prototype.$appState = Vue.observable({inputStyle: 'outlined', darkTheme: false});
-Vue.prototype.$primevue = Vue.observable({ripple: true});
-
-Vue.config.productionTip = false;
-
-Vue.component('Accordion', Accordion);
-Vue.component('AccordionTab', AccordionTab);
-Vue.component('AutoComplete', AutoComplete);
-Vue.component('BlockUI', BlockUI);
-Vue.component('Breadcrumb', Breadcrumb);
-Vue.component('Button', Button);
-Vue.component('Calendar', Calendar);
-Vue.component('Card', Card);
-Vue.component('Carousel', Carousel);
-Vue.component('Chart', Chart);
-Vue.component('Checkbox', Checkbox);
-Vue.component('Chips', Chips);
-Vue.component('ColorPicker', ColorPicker);
-Vue.component('Column', Column);
-Vue.component('ColumnGroup', ColumnGroup);
-Vue.component('ContextMenu', ContextMenu);
-Vue.component('DataTable', DataTable);
-Vue.component('DataView', DataView);
-Vue.component('DataViewLayoutOptions', DataViewLayoutOptions);
-Vue.component('DeferredContent', DeferredContent);
-Vue.component('Dialog', Dialog);
-Vue.component('Dropdown', Dropdown);
-Vue.component('Editor', Editor);
-Vue.component('Fieldset', Fieldset);
-Vue.component('FileUpload', FileUpload);
-Vue.component('FullCalendar', FullCalendar);
-Vue.component('InlineMessage', InlineMessage);
-Vue.component('Inplace', Inplace);
-Vue.component('InputMask', InputMask);
-Vue.component('InputNumber', InputNumber);
-Vue.component('InputSwitch', InputSwitch);
-Vue.component('InputText', InputText);
-Vue.component('Listbox', Listbox);
-Vue.component('MegaMenu', MegaMenu);
-Vue.component('Menu', Menu);
-Vue.component('Menubar', Menubar);
-Vue.component('Message', Message);
-Vue.component('MultiSelect', MultiSelect);
-Vue.component('OrderList', OrderList);
-Vue.component('OrganizationChart', OrganizationChart);
-Vue.component('OverlayPanel', OverlayPanel);
-Vue.component('Paginator', Paginator);
-Vue.component('Panel', Panel);
-Vue.component('PanelMenu', PanelMenu);
-Vue.component('Password', Password);
-Vue.component('PickList', PickList);
-Vue.component('ProgressBar', ProgressBar);
-Vue.component('ProgressSpinner', ProgressSpinner);
-Vue.component('RadioButton', RadioButton);
-Vue.component('Rating', Rating);
-Vue.component('Row', Row);
-Vue.component('ScrollPanel', ScrollPanel);
-Vue.component('SelectButton', SelectButton);
-Vue.component('Slider', Slider);
-Vue.component('Sidebar', Sidebar);
-Vue.component('SplitButton', SplitButton);
-Vue.component('Steps', Steps);
-Vue.component('TabView', TabView);
-Vue.component('TabPanel', TabPanel);
-Vue.component('TabMenu', TabMenu);
-Vue.component('Terminal', Terminal);
-Vue.component('Textarea', Textarea);
-Vue.component('TieredMenu', TieredMenu);
-Vue.component('Toast', Toast);
-Vue.component('Toolbar', Toolbar);
-Vue.component('ToggleButton', ToggleButton);
-Vue.component('Tree', Tree);
-Vue.component('TreeTable', TreeTable);
-Vue.component('TriStateCheckbox', TriStateCheckbox);
-Vue.component('Galleria', Galleria);
-
-Vue.component('CodeHighlight', CodeHighlight);
-Vue.component('AppInputStyleSwitch', AppInputStyleSwitch);
-
-router.beforeEach(function (to, from, next) {
+//Vue.use(Vuelidate);
+/*router.beforeEach(function (to, from, next) {
    window.scrollTo(0, 0);
    next();
-});
+});*/

-new Vue({
-  router,
-  render: h => h(App)
-}).$mount('#app');
+const app = createApp(App);
+
+app.config.globalProperties.$appState = reactive({inputStyle: 'outlined', darkTheme: false});
+app.config.globalProperties.$primevue = reactive({ripple: true});
+
+app.use(ToastService);
+app.use(router);
+
+app.directive('tooltip', Tooltip);
+app.directive('ripple', Ripple);
+
+app.component('Accordion', Accordion);
+app.component('AccordionTab', AccordionTab);
+app.component('AutoComplete', AutoComplete);
+app.component('BlockUI', BlockUI);
+app.component('Breadcrumb', Breadcrumb);
+app.component('Button', Button);
+app.component('Calendar', Calendar);
+app.component('Card', Card);
+app.component('Carousel', Carousel);
+app.component('Chart', Chart);
+app.component('Checkbox', Checkbox);
+app.component('Chips', Chips);
+app.component('ColorPicker', ColorPicker);
+app.component('Column', Column);
+app.component('ColumnGroup', ColumnGroup);
+app.component('ContextMenu', ContextMenu);
+app.component('DataTable', DataTable);
+app.component('DataView', DataView);
+app.component('DataViewLayoutOptions', DataViewLayoutOptions);
+app.component('DeferredContent', DeferredContent);
+app.component('Dialog', Dialog);
+app.component('Dropdown', Dropdown);
+app.component('Editor', Editor);
+app.component('Fieldset', Fieldset);
+app.component('FileUpload', FileUpload);
+app.component('FullCalendar', FullCalendar);
+app.component('InlineMessage', InlineMessage);
+app.component('Inplace', Inplace);
+app.component('InputMask', InputMask);
+app.component('InputNumber', InputNumber);
+app.component('InputSwitch', InputSwitch);
+app.component('InputText', InputText);
+app.component('Listbox', Listbox);
+app.component('MegaMenu', MegaMenu);
+app.component('Menu', Menu);
+app.component('Menubar', Menubar);
+app.component('Message', Message);
+app.component('MultiSelect', MultiSelect);
+app.component('OrderList', OrderList);
+app.component('OrganizationChart', OrganizationChart);
+app.component('OverlayPanel', OverlayPanel);
+app.component('Paginator', Paginator);
+app.component('Panel', Panel);
+app.component('PanelMenu', PanelMenu);
+app.component('Password', Password);
+app.component('PickList', PickList);
+app.component('ProgressBar', ProgressBar);
+app.component('ProgressSpinner', ProgressSpinner);
+app.component('RadioButton', RadioButton);
+app.component('Rating', Rating);
+app.component('Row', Row);
+app.component('ScrollPanel', ScrollPanel);
+app.component('SelectButton', SelectButton);
+app.component('Slider', Slider);
+app.component('Sidebar', Sidebar);
+app.component('SplitButton', SplitButton);
+app.component('Steps', Steps);
+app.component('TabView', TabView);
+app.component('TabPanel', TabPanel);
+app.component('TabMenu', TabMenu);
+app.component('Terminal', Terminal);
+app.component('Textarea', Textarea);
+app.component('TieredMenu', TieredMenu);
+app.component('Toast', Toast);
+app.component('Toolbar', Toolbar);
+app.component('ToggleButton', ToggleButton);
+app.component('Tree', Tree);
+app.component('TreeTable', TreeTable);
+app.component('TriStateCheckbox', TriStateCheckbox);
+app.component('Galleria', Galleria);
+
+app.component('CodeHighlight', CodeHighlight);
+app.component('AppInputStyleSwitch', AppInputStyleSwitch);
+
+app.mount('#app');
--- a/src/router.js
+++ b/src/router.js
@ -1,739 +0,0 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import Home from './views/Home.vue';
-
-Vue.use(Router);
-
-export default new Router({
-	routes: [
-		{
-			path: '/',
-			name: 'home',
-			component: Home
-		},
-		{
-			path: '/setup',
-			name: 'setup',
-			component: () => import('./views/setup/Setup.vue')
-        },
-        {
-			path: '/accessibility',
-			name: 'accessibility',
-			component: () => import('./views/accessibility/AccessibilityDemo.vue')
-        },
-		{
-			path: '/support',
-			name: 'support',
-			component: () => import('./views/support/Support.vue')
-        },
-        {
-			path: '/theming',
-			name: 'theming',
-			component: () => import('./views/theming/Theming.vue')
-		},
-		{
-			path: '/icons',
-			name: 'icons',
-			component: () => import('./views/icons/Icons.vue')
-		},
-		{
-			path: '/accordion',
-			name: 'accordion',
-			component: () => import('./views/accordion/AccordionDemo.vue')
-		},
-		{
-			path: '/autocomplete',
-			name: 'autocomplete',
-			component: () => import('./views/autocomplete/AutoCompleteDemo.vue')
-        },
-        {
-			path: '/badge',
-			name: 'badge',
-			component: () => import('./views/badge/BadgeDemo.vue')
-		},
-        {
-			path: '/blockui',
-			name: 'blockui',
-			component: () => import('./views/blockui/BlockUIDemo.vue')
-		},
-        {
-			path: '/breadcrumb',
-			name: 'breadcrumb',
-			component: () => import('./views/breadcrumb/BreadcrumbDemo.vue')
-		},
-		{
-			path: '/button',
-			name: 'button',
-			component: () => import('./views/button/ButtonDemo.vue')
-		},
-		{
-			path: '/calendar',
-			name: 'calendar',
-			component: () => import('./views/calendar/CalendarDemo.vue')
-		},
-		{
-			path: '/card',
-			name: 'card',
-			component: () => import('./views/card/CardDemo.vue')
-		},
-		{
-			path: '/carousel',
-			name: 'carousel',
-			component: () => import('./views/carousel/CarouselDemo.vue')
-		},
-		{
-			path: '/chart',
-			name: 'chart',
-			component: () => import('./views/chart/ChartDemo.vue')
-		},
-		{
-			path: '/chart/bar',
-			name: 'barchart',
-			component: () => import('./views/chart/BarChartDemo.vue')
-		},
-		{
-			path: '/chart/combo',
-			name: 'combochart',
-			component: () => import('./views/chart/ComboChartDemo.vue')
-		},
-		{
-			path: '/chart/doughnut',
-			name: 'doughnutchart',
-			component: () => import('./views/chart/DoughnutChartDemo.vue')
-		},
-		{
-			path: '/chart/line',
-			name: 'linechart',
-			component: () => import('./views/chart/LineChartDemo.vue')
-		},
-		{
-			path: '/chart/pie',
-			name: 'piechart',
-			component: () => import('./views/chart/PieChartDemo.vue')
-		},
-		{
-			path: '/chart/polararea',
-			name: 'polarareachart',
-			component: () => import('./views/chart/PolarAreaChartDemo.vue')
-		},
-		{
-			path: '/chart/radar',
-			name: 'radarchart',
-			component: () => import('./views/chart/RadarChartDemo.vue')
-		},
-		{
-			path: '/checkbox',
-			name: 'checkbox',
-			component: () => import('./views/checkbox/CheckboxDemo.vue')
-		},
-		{
-			path: '/chips',
-			name: 'chips',
-			component: () => import('./views/chips/ChipsDemo.vue')
-        },
-        {
-			path: '/colorpicker',
-			name: 'colorpicker',
-			component: () => import('./views/colorpicker/ColorPickerDemo.vue')
-		},
-        {
-			path: '/contextmenu',
-			name: 'contextmenu',
-			component: () => import('./views/contextmenu/ContextMenuDemo.vue')
-        },
-        {
-			path: '/datatable',
-			name: 'datatable',
-			component: () => import('./views/datatable/DataTableDemo.vue')
-        },
-        {
-			path: '/datatable/basic',
-			name: 'datatablebasic',
-			component: () => import('./views/datatable/DataTableBasicDemo.vue')
-        },
-        {
-			path: '/datatable/dynamiccolumns',
-			name: 'datatabledynamiccolumns',
-			component: () => import('./views/datatable/DataTableDynamicColumnsDemo.vue')
-        },
-        {
-			path: '/datatable/templating',
-			name: 'datatabletemplating',
-			component: () => import('./views/datatable/DataTableTemplatingDemo.vue')
-        },
-        {
-			path: '/datatable/paginator',
-			name: 'datatablepaginator',
-			component: () => import('./views/datatable/DataTablePaginatorDemo.vue')
-        },
-        {
-			path: '/datatable/sort',
-			name: 'datatablesort',
-			component: () => import('./views/datatable/DataTableSortDemo.vue')
-        },
-        {
-			path: '/datatable/filter',
-			name: 'datatablefilter',
-			component: () => import('./views/datatable/DataTableFilterDemo.vue')
-        },
-        {
-			path: '/datatable/lazy',
-			name: 'datatablelazy',
-			component: () => import('./views/datatable/DataTableLazyDemo.vue')
-        },
-        {
-			path: '/datatable/selection',
-			name: 'datatableselection',
-			component: () => import('./views/datatable/DataTableSelectionDemo.vue')
-        },
-        {
-			path: '/datatable/coltoggle',
-			name: 'datatablecoltoggle',
-			component: () => import('./views/datatable/DataTableColToggleDemo.vue')
-        },
-        {
-			path: '/datatable/reorder',
-			name: 'datatablereorder',
-			component: () => import('./views/datatable/DataTableReorderDemo.vue')
-        },
-        {
-			path: '/datatable/rowgroup',
-			name: 'datatablerowgroup',
-			component: () => import('./views/datatable/DataTableRowGroupDemo.vue')
-        },
-        {
-			path: '/datatable/responsive',
-			name: 'datatableresponsive',
-			component: () => import('./views/datatable/DataTableResponsiveDemo.vue')
-        },
-        {
-			path: '/datatable/export',
-			name: 'datatableexport',
-			component: () => import('./views/datatable/DataTableExportDemo.vue')
-        },
-        {
-			path: '/datatable/colgroup',
-			name: 'datatablecolgroup',
-			component: () => import('./views/datatable/DataTableColGroupDemo.vue')
-        },
-        {
-			path: '/datatable/size',
-			name: 'datatablesize',
-			component: () => import('./views/datatable/DataTableSizeDemo.vue')
-		},
-        {
-			path: '/datatable/colresize',
-			name: 'datatablecolresize',
-			component: () => import('./views/datatable/DataTableColResizeDemo.vue')
-        },
-        {
-			path: '/datatable/rowexpand',
-			name: 'datatablerowexpand',
-			component: () => import('./views/datatable/DataTableRowExpandDemo.vue')
-        },
-        {
-			path: '/datatable/state',
-			name: 'datatablestate',
-			component: () => import('./views/datatable/DataTableStateDemo.vue')
-        },
-        {
-			path: '/datatable/edit',
-			name: 'datatableedit',
-			component: () => import('./views/datatable/DataTableEditDemo.vue')
-        },
-        {
-			path: '/datatable/crud',
-			name: 'datatablecrud',
-			component: () => import('./views/datatable/DataTableCrudDemo.vue')
-        },
-        {
-			path: '/datatable/scroll',
-			name: 'datatablescroll',
-			component: () => import('./views/datatable/DataTableScrollDemo.vue')
-        },
-        {
-			path: '/datatable/flexscroll',
-			name: 'datatableflexscroll',
-			component: () => import('./views/datatable/DataTableFlexScrollDemo.vue')
-        },
-        {
-			path: '/datatable/style',
-			name: 'datatablestyle',
-			component: () => import('./views/datatable/DataTableStyleDemo.vue')
-        },
-        {
-			path: '/datatable/contextmenu',
-			name: 'datatablecontextmenu',
-			component: () => import('./views/datatable/DataTableContextMenuDemo.vue')
-        },
-        {
-			path: '/datatable/gridlines',
-			name: 'datatablegridlines',
-			component: () => import('./views/datatable/DataTableGridLinesDemo.vue')
-        },
-        {
-			path: '/datatable/striped',
-			name: 'datatablestriped',
-			component: () => import('./views/datatable/DataTableStripedDemo.vue')
-        },
-		{
-			path: '/dataview',
-			name: 'dataview',
-			component: () => import('./views/dataview/DataViewDemo.vue')
-        },
-        {
-			path: '/deferredcontent',
-			name: 'deferredcontent',
-			component: () => import('./views/deferredcontent/DeferredContentDemo.vue')
-        },
-		{
-			path: '/dialog',
-			name: 'dialog',
-			component: () => import('./views/dialog/DialogDemo.vue')
-        },
-        {
-			path: '/display',
-			name: 'display',
-			component: () => import('./views/display/DisplayDemo.vue')
-        },
-		{
-			path: '/dropdown',
-			name: 'dropdown',
-			component: () => import('./views/dropdown/DropdownDemo.vue')
-		},
-		{
-			path: '/editor',
-			name: 'editor',
-			component: () => import('./views/editor/EditorDemo.vue')
-        },
-        {
-			path: '/elevation',
-			name: 'elevation',
-			component: () => import('./views/elevation/ElevationDemo.vue')
-		},
-		{
-			path: '/fieldset',
-			name: 'fieldset',
-			component: () => import('./views/fieldset/FieldsetDemo.vue')
-		},
-		{
-			path: '/fileupload',
-			name: 'fileupload',
-			component: () => import('./views/fileupload/FileUploadDemo.vue')
-		},
-		{
-			path: '/grid',
-			name: 'grid',
-			component: () => import('./views/grid/GridDemo.vue')
-        },
-        {
-			path: '/formlayout',
-			name: 'formlayout',
-			component: () => import('./views/formlayout/FormLayoutDemo.vue')
-		},
-		{
-			path: '/fullcalendar',
-			name: 'fullcalendar',
-			component: () => import('./views/fullcalendar/FullCalendarDemo.vue')
-        },
-        {
-			path: '/inplace',
-			name: 'inplace',
-			component: () => import('./views/inplace/InplaceDemo.vue')
-		},
-		{
-			path: '/inputgroup',
-			name: 'inputgroup',
-			component: () => import('./views/inputgroup/InputGroupDemo.vue')
-		},
-		{
-			path: '/inputswitch',
-			name: 'inputswitch',
-			component: () => import('./views/inputswitch/InputSwitchDemo.vue')
-		},
-		{
-			path: '/inputtext',
-			name: 'inputtext',
-			component: () => import('./views/inputtext/InputTextDemo.vue')
-		},
-		{
-			path: '/inputmask',
-			name: 'inputmask',
-			component: () => import('./views/inputmask/InputMaskDemo.vue')
-        },
-        {
-			path: '/inputnumber',
-			name: 'inputnumber',
-			component: () => import('./views/inputnumber/InputNumberDemo.vue')
-		},
-		{
-			path: '/listbox',
-			name: 'listbox',
-			component: () => import('./views/listbox/ListboxDemo.vue')
-        },
-        {
-			path: '/flexbox',
-			name: 'flexbox',
-			component: () => import('./views/flexbox/FlexBoxDemo.vue')
-        },
-        {
-			path: '/floatlabel',
-			name: 'floatlabel',
-			component: () => import('./views/floatlabel/FloatLabelDemo.vue')
-		},
-        {
-			path: '/megamenu',
-			name: 'megamenu',
-			component: () => import('./views/megamenu/MegaMenuDemo.vue')
-        },
-        {
-			path: '/menu',
-			name: 'menu',
-			component: () => import('./views/menu/MenuDemo.vue')
-        },
-        {
-			path: '/menubar',
-			name: 'menubar',
-			component: () => import('./views/menubar/MenubarDemo.vue')
-        },
-        {
-			path: '/menumodel',
-			name: 'menumodel',
-			component: () => import('./views/menumodel/MenuModel.vue')
-		},
-		{
-			path: '/message',
-			name: 'message',
-			component: () => import('./views/message/MessageDemo.vue')
-		},
-		{
-			path: '/multiselect',
-			name: 'multiselect',
-			component: () => import('./views/multiselect/MultiSelectDemo.vue')
-        },
-        {
-			path: '/orderlist',
-			name: 'orderlist',
-			component: () => import('./views/orderlist/OrderListDemo.vue')
-        },
-        {
-			path: '/organizationchart',
-			name: 'organizationchart',
-			component: () => import('./views/organizationchart/OrganizationChartDemo.vue')
-		},
-		{
-			path: '/overlaypanel',
-			name: 'overlaypanel',
-			component: () => import('./views/overlaypanel/OverlayPanelDemo.vue')
-		},
-		{
-			path: '/paginator',
-			name: 'paginator',
-			component: () => import('./views/paginator/PaginatorDemo.vue')
-		},
-		{
-			path: '/panel',
-			name: 'panel',
-			component: () => import('./views/panel/PanelDemo.vue')
-        },
-        {
-			path: '/panelmenu',
-			name: 'panelmenu',
-			component: () => import('./views/panelmenu/PanelMenuDemo.vue')
-		},
-        {
-			path: '/picklist',
-			name: 'picklist',
-			component: () => import('./views/picklist/PickListDemo.vue')
-		},
-		{
-			path: '/password',
-			name: 'password',
-			component: () => import('./views/password/PasswordDemo.vue')
-		},
-		{
-			path: '/progressbar',
-			name: 'progressbar',
-			component: () => import('./views/progressbar/ProgressBarDemo.vue')
-        },
-        {
-			path: '/progressspinner',
-			name: 'progressspinner',
-			component: () => import('./views/progressspinner/ProgressSpinnerDemo.vue')
-        },
-        {
-			path: '/primeflex',
-			name: 'primeflex',
-			component: () => import('./views/primeflex/PrimeFlexSetup.vue')
-        },
-		{
-			path: '/radiobutton',
-			name: 'radiobutton',
-			component: () => import('./views/radiobutton/RadioButtonDemo.vue')
-		},
-		{
-			path: '/rating',
-			name: 'rating',
-			component: () => import('./views/rating/RatingDemo.vue')
-        },
-        {
-			path: '/ripple',
-			name: 'ripple',
-			component: () => import('./views/ripple/RippleDemo.vue')
-		},
-        {
-			path: '/scrollpanel',
-			name: 'scrollpanel',
-			component: () => import('./views/scrollpanel/ScrollPanelDemo.vue')
-        },
-		{
-			path: '/selectbutton',
-			name: 'selectbutton',
-			component: () => import('./views/selectbutton/SelectButtonDemo.vue')
-        },
-		{
-			path: '/sidebar',
-			name: 'sidebar',
-			component: () => import('./views/sidebar/SidebarDemo.vue')
-		},
-		{
-			path: '/slider',
-			name: 'slider',
-			component: () => import('./views/slider/SliderDemo.vue')
-        },
-        {
-			path: '/spacing',
-			name: 'spacing',
-			component: () => import('./views/spacing/SpacingDemo.vue')
-        },
-		{
-			path: '/splitbutton',
-			name: 'splitbutton',
-			component: () => import('./views/splitbutton/SplitButtonDemo.vue')
-        },
-        {
-			path: '/steps',
-            component: () => import('./views/steps/StepsDemo.vue'),
-            children: [{
-                path: '',
-                component: () => import('./views/steps/PersonalDemo.vue')
-            },
-            {
-                path: '/steps/seat',
-                component: () => import('./views/steps/SeatDemo.vue')
-            },
-            {
-                path: '/steps/payment',
-                component: () => import('./views/steps/PaymentDemo.vue')
-            },
-            {
-                path: '/steps/confirmation',
-                component: () => import('./views/steps/ConfirmationDemo.vue')
-            }]
-        },
-        {
-			path: '/tabmenu',
-            component: () => import('./views/tabmenu/TabMenuDemo.vue'),
-            children: [{
-                path: '',
-                component: () => import('./views/tabmenu/HomeDemo.vue')
-            },
-            {
-                path: '/tabmenu/calendar',
-                component: () => import('./views/tabmenu/CalendarDemo.vue')
-            },
-            {
-                path: '/tabmenu/edit',
-                component: () => import('./views/tabmenu/EditDemo.vue')
-            },
-            {
-                path: '/tabmenu/documentation',
-                component: () => import('./views/tabmenu/DocumentationDemo.vue')
-            },
-            {
-                path: '/tabmenu/settings',
-                component: () => import('./views/tabmenu/SettingsDemo.vue')
-            }]
-        },
-		{
-			path: '/tabview',
-			name: 'tabview',
-			component: () => import('./views/tabview/TabViewDemo.vue')
-        },
-        {
-			path: '/text',
-			name: 'text',
-			component: () => import('./views/text/TextDemo.vue')
-        },
-        {
-			path: '/textarea',
-			name: 'textarea',
-			component: () => import('./views/textarea/TextareaDemo.vue')
-        },
-        {
-			path: '/terminal',
-			name: 'terminal',
-			component: () => import('./views/terminal/TerminalDemo.vue')
-        },
-        {
-			path: '/tieredmenu',
-			name: 'tieredmenu',
-			component: () => import('./views/tieredmenu/TieredMenuDemo.vue')
-        },
-		{
-			path: '/toast',
-			name: 'toast',
-			component: () => import('./views/toast/ToastDemo.vue')
-		},
-		{
-			path: '/togglebutton',
-			name: 'togglebutton',
-			component: () => import('./views/togglebutton/ToggleButtonDemo.vue')
-		},
-		{
-			path: '/toolbar',
-			name: 'toolbar',
-			component: () => import('./views/toolbar/ToolbarDemo.vue')
-        },
-        {
-			path: '/tooltip',
-			name: 'tooltip',
-			component: () => import('./views/tooltip/TooltipDemo.vue')
-		},
-        {
-			path: '/tree',
-			name: 'tree',
-			component: () => import('./views/tree/TreeDemo.vue')
-        },
-        {
-			path: '/tree/selection',
-			name: 'treeselection',
-			component: () => import('./views/tree/TreeSelectionDemo.vue')
-        },
-        {
-			path: '/tree/lazy',
-			name: 'treelazy',
-			component: () => import('./views/tree/TreeLazyDemo.vue')
-        },
-        {
-			path: '/tree/templating',
-			name: 'treetemplating',
-			component: () => import('./views/tree/TreeTemplatingDemo.vue')
-        },
-        {
-			path: '/tree/filter',
-			name: 'treefilter',
-			component: () => import('./views/tree/TreeFilterDemo.vue')
-        },
-        {
-			path: '/treetable',
-			name: 'treetable',
-			component: () => import('./views/treetable/TreeTableDemo.vue')
-        },
-        {
-			path: '/treetable/templating',
-			name: 'treetabletemplating',
-			component: () => import('./views/treetable/TreeTableTemplatingDemo.vue')
-        },
-        {
-			path: '/treetable/size',
-			name: 'treetablesize',
-			component: () => import('./views/treetable/TreeTableSizeDemo.vue')
-        },
-        {
-			path: '/treetable/paginator',
-			name: 'treetablepaginator',
-			component: () => import('./views/treetable/TreeTablePaginatorDemo.vue')
-        },
-        {
-			path: '/treetable/sort',
-			name: 'treetablesort',
-			component: () => import('./views/treetable/TreeTableSortDemo.vue')
-        },
-        {
-			path: '/treetable/filter',
-			name: 'treetablefilter',
-			component: () => import('./views/treetable/TreeTableFilterDemo.vue')
-        },
-        {
-			path: '/treetable/selection',
-			name: 'treetableselection',
-			component: () => import('./views/treetable/TreeTableSelectionDemo.vue')
-        },
-        {
-			path: '/treetable/lazy',
-			name: 'treetablelazy',
-			component: () => import('./views/treetable/TreeTableLazyDemo.vue')
-        },
-        {
-			path: '/treetable/coltoggle',
-			name: 'treetablecoltoggle',
-			component: () => import('./views/treetable/TreeTableColToggleDemo.vue')
-        },
-        {
-			path: '/treetable/responsive',
-			name: 'treetableresponsive',
-			component: () => import('./views/treetable/TreeTableResponsiveDemo.vue')
-        },
-        {
-			path: '/treetable/colresize',
-			name: 'treetablecolresize',
-			component: () => import('./views/treetable/TreeTableColResizeDemo.vue')
-        },
-		{
-			path: '/tristatecheckbox',
-			name: 'tristatecheckbox',
-			component: () => import('./views/tristatecheckbox/TriStateCheckboxDemo.vue')
-        },
-        {
-			path: '/galleria',
-			name: 'galleria',
-			component: () => import('./views/galleria/GalleriaDemo.vue')
-        },
-        {
-			path: '/galleria/programmatic',
-			name: 'galleriaprogrammatic',
-			component: () => import('./views/galleria/GalleriaProgrammaticDemo.vue')
-        },
-        {
-			path: '/galleria/indicator',
-			name: 'galleriaindicator',
-			component: () => import('./views/galleria/GalleriaIndicatorDemo.vue')
-        },
-        {
-			path: '/galleria/thumbnail',
-			name: 'galleriathumbnail',
-			component: () => import('./views/galleria/GalleriaThumbnailDemo.vue')
-        },
-        {
-			path: '/galleria/navigator',
-			name: 'gallerianavigator',
-			component: () => import('./views/galleria/GalleriaNavigatorDemo.vue')
-        },
-        {
-			path: '/galleria/responsive',
-			name: 'galleriaresponsive',
-			component: () => import('./views/galleria/GalleriaResponsiveDemo.vue')
-        },
-        {
-			path: '/galleria/fullscreen',
-			name: 'galleriafullscreen',
-			component: () => import('./views/galleria/GalleriaFullScreenDemo.vue')
-        },
-        {
-			path: '/galleria/autoplay',
-			name: 'galleriaautoplay',
-			component: () => import('./views/galleria/GalleriaAutoPlayDemo.vue')
-        },
-        {
-			path: '/galleria/caption',
-			name: 'galleriacaption',
-			component: () => import('./views/galleria/GalleriaCaptionDemo.vue')
-        },
-        {
-			path: '/galleria/advanced',
-			name: 'galleriaadvvanced',
-			component: () => import('./views/galleria/GalleriaAdvancedDemo.vue')
-        }
-	]
-});
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,741 @@
+import {createRouter, createWebHashHistory} from 'vue-router'
+import Home from '../views/Home.vue';
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home
+    },
+    {
+        path: '/setup',
+        name: 'setup',
+        component: () => import('../views/setup/Setup.vue')
+    },
+    {
+        path: '/accessibility',
+        name: 'accessibility',
+        component: () => import('../views/accessibility/AccessibilityDemo.vue')
+    },
+    {
+        path: '/support',
+        name: 'support',
+        component: () => import('../views/support/Support.vue')
+    },
+    {
+        path: '/theming',
+        name: 'theming',
+        component: () => import('../views/theming/Theming.vue')
+    },
+    {
+        path: '/icons',
+        name: 'icons',
+        component: () => import('../views/icons/Icons.vue')
+    },
+    {
+        path: '/accordion',
+        name: 'accordion',
+        component: () => import('../views/accordion/AccordionDemo.vue')
+    },
+    {
+        path: '/autocomplete',
+        name: 'autocomplete',
+        component: () => import('../views/autocomplete/AutoCompleteDemo.vue')
+    },
+    {
+        path: '/badge',
+        name: 'badge',
+        component: () => import('../views/badge/BadgeDemo.vue')
+    },
+    {
+        path: '/blockui',
+        name: 'blockui',
+        component: () => import('../views/blockui/BlockUIDemo.vue')
+    },
+    {
+        path: '/breadcrumb',
+        name: 'breadcrumb',
+        component: () => import('../views/breadcrumb/BreadcrumbDemo.vue')
+    },
+    {
+        path: '/button',
+        name: 'button',
+        component: () => import('../views/button/ButtonDemo.vue')
+    },
+    {
+        path: '/calendar',
+        name: 'calendar',
+        component: () => import('../views/calendar/CalendarDemo.vue')
+    },
+    {
+        path: '/card',
+        name: 'card',
+        component: () => import('../views/card/CardDemo.vue')
+    },
+    {
+        path: '/carousel',
+        name: 'carousel',
+        component: () => import('../views/carousel/CarouselDemo.vue')
+    },
+    {
+        path: '/chart',
+        name: 'chart',
+        component: () => import('../views/chart/ChartDemo.vue')
+    },
+    {
+        path: '/chart/bar',
+        name: 'barchart',
+        component: () => import('../views/chart/BarChartDemo.vue')
+    },
+    {
+        path: '/chart/combo',
+        name: 'combochart',
+        component: () => import('../views/chart/ComboChartDemo.vue')
+    },
+    {
+        path: '/chart/doughnut',
+        name: 'doughnutchart',
+        component: () => import('../views/chart/DoughnutChartDemo.vue')
+    },
+    {
+        path: '/chart/line',
+        name: 'linechart',
+        component: () => import('../views/chart/LineChartDemo.vue')
+    },
+    {
+        path: '/chart/pie',
+        name: 'piechart',
+        component: () => import('../views/chart/PieChartDemo.vue')
+    },
+    {
+        path: '/chart/polararea',
+        name: 'polarareachart',
+        component: () => import('../views/chart/PolarAreaChartDemo.vue')
+    },
+    {
+        path: '/chart/radar',
+        name: 'radarchart',
+        component: () => import('../views/chart/RadarChartDemo.vue')
+    },
+    {
+        path: '/checkbox',
+        name: 'checkbox',
+        component: () => import('../views/checkbox/CheckboxDemo.vue')
+    },
+    {
+        path: '/chips',
+        name: 'chips',
+        component: () => import('../views/chips/ChipsDemo.vue')
+    },
+    {
+        path: '/colorpicker',
+        name: 'colorpicker',
+        component: () => import('../views/colorpicker/ColorPickerDemo.vue')
+    },
+    {
+        path: '/contextmenu',
+        name: 'contextmenu',
+        component: () => import('../views/contextmenu/ContextMenuDemo.vue')
+    },
+    {
+        path: '/datatable',
+        name: 'datatable',
+        component: () => import('../views/datatable/DataTableDemo.vue')
+    },
+    {
+        path: '/datatable/basic',
+        name: 'datatablebasic',
+        component: () => import('../views/datatable/DataTableBasicDemo.vue')
+    },
+    {
+        path: '/datatable/dynamiccolumns',
+        name: 'datatabledynamiccolumns',
+        component: () => import('../views/datatable/DataTableDynamicColumnsDemo.vue')
+    },
+    {
+        path: '/datatable/templating',
+        name: 'datatabletemplating',
+        component: () => import('../views/datatable/DataTableTemplatingDemo.vue')
+    },
+    {
+        path: '/datatable/paginator',
+        name: 'datatablepaginator',
+        component: () => import('../views/datatable/DataTablePaginatorDemo.vue')
+    },
+    {
+        path: '/datatable/sort',
+        name: 'datatablesort',
+        component: () => import('../views/datatable/DataTableSortDemo.vue')
+    },
+    {
+        path: '/datatable/filter',
+        name: 'datatablefilter',
+        component: () => import('../views/datatable/DataTableFilterDemo.vue')
+    },
+    {
+        path: '/datatable/lazy',
+        name: 'datatablelazy',
+        component: () => import('../views/datatable/DataTableLazyDemo.vue')
+    },
+    {
+        path: '/datatable/selection',
+        name: 'datatableselection',
+        component: () => import('../views/datatable/DataTableSelectionDemo.vue')
+    },
+    {
+        path: '/datatable/coltoggle',
+        name: 'datatablecoltoggle',
+        component: () => import('../views/datatable/DataTableColToggleDemo.vue')
+    },
+    {
+        path: '/datatable/reorder',
+        name: 'datatablereorder',
+        component: () => import('../views/datatable/DataTableReorderDemo.vue')
+    },
+    {
+        path: '/datatable/rowgroup',
+        name: 'datatablerowgroup',
+        component: () => import('../views/datatable/DataTableRowGroupDemo.vue')
+    },
+    {
+        path: '/datatable/responsive',
+        name: 'datatableresponsive',
+        component: () => import('../views/datatable/DataTableResponsiveDemo.vue')
+    },
+    {
+        path: '/datatable/export',
+        name: 'datatableexport',
+        component: () => import('../views/datatable/DataTableExportDemo.vue')
+    },
+    {
+        path: '/datatable/colgroup',
+        name: 'datatablecolgroup',
+        component: () => import('../views/datatable/DataTableColGroupDemo.vue')
+    },
+    {
+        path: '/datatable/size',
+        name: 'datatablesize',
+        component: () => import('../views/datatable/DataTableSizeDemo.vue')
+    },
+    {
+        path: '/datatable/colresize',
+        name: 'datatablecolresize',
+        component: () => import('../views/datatable/DataTableColResizeDemo.vue')
+    },
+    {
+        path: '/datatable/rowexpand',
+        name: 'datatablerowexpand',
+        component: () => import('../views/datatable/DataTableRowExpandDemo.vue')
+    },
+    {
+        path: '/datatable/state',
+        name: 'datatablestate',
+        component: () => import('../views/datatable/DataTableStateDemo.vue')
+    },
+    {
+        path: '/datatable/edit',
+        name: 'datatableedit',
+        component: () => import('../views/datatable/DataTableEditDemo.vue')
+    },
+    {
+        path: '/datatable/crud',
+        name: 'datatablecrud',
+        component: () => import('../views/datatable/DataTableCrudDemo.vue')
+    },
+    {
+        path: '/datatable/scroll',
+        name: 'datatablescroll',
+        component: () => import('../views/datatable/DataTableScrollDemo.vue')
+    },
+    {
+        path: '/datatable/flexscroll',
+        name: 'datatableflexscroll',
+        component: () => import('../views/datatable/DataTableFlexScrollDemo.vue')
+    },
+    {
+        path: '/datatable/style',
+        name: 'datatablestyle',
+        component: () => import('../views/datatable/DataTableStyleDemo.vue')
+    },
+    {
+        path: '/datatable/contextmenu',
+        name: 'datatablecontextmenu',
+        component: () => import('../views/datatable/DataTableContextMenuDemo.vue')
+    },
+    {
+        path: '/datatable/gridlines',
+        name: 'datatablegridlines',
+        component: () => import('../views/datatable/DataTableGridLinesDemo.vue')
+    },
+    {
+        path: '/datatable/striped',
+        name: 'datatablestriped',
+        component: () => import('../views/datatable/DataTableStripedDemo.vue')
+    },
+    {
+        path: '/dataview',
+        name: 'dataview',
+        component: () => import('../views/dataview/DataViewDemo.vue')
+    },
+    {
+        path: '/deferredcontent',
+        name: 'deferredcontent',
+        component: () => import('../views/deferredcontent/DeferredContentDemo.vue')
+    },
+    {
+        path: '/dialog',
+        name: 'dialog',
+        component: () => import('../views/dialog/DialogDemo.vue')
+    },
+    {
+        path: '/display',
+        name: 'display',
+        component: () => import('../views/display/DisplayDemo.vue')
+    },
+    {
+        path: '/dropdown',
+        name: 'dropdown',
+        component: () => import('../views/dropdown/DropdownDemo.vue')
+    },
+    {
+        path: '/editor',
+        name: 'editor',
+        component: () => import('../views/editor/EditorDemo.vue')
+    },
+    {
+        path: '/elevation',
+        name: 'elevation',
+        component: () => import('../views/elevation/ElevationDemo.vue')
+    },
+    {
+        path: '/fieldset',
+        name: 'fieldset',
+        component: () => import('../views/fieldset/FieldsetDemo.vue')
+    },
+    {
+        path: '/fileupload',
+        name: 'fileupload',
+        component: () => import('../views/fileupload/FileUploadDemo.vue')
+    },
+    {
+        path: '/grid',
+        name: 'grid',
+        component: () => import('../views/grid/GridDemo.vue')
+    },
+    {
+        path: '/formlayout',
+        name: 'formlayout',
+        component: () => import('../views/formlayout/FormLayoutDemo.vue')
+    },
+    {
+        path: '/fullcalendar',
+        name: 'fullcalendar',
+        component: () => import('../views/fullcalendar/FullCalendarDemo.vue')
+    },
+    {
+        path: '/inplace',
+        name: 'inplace',
+        component: () => import('../views/inplace/InplaceDemo.vue')
+    },
+    {
+        path: '/inputgroup',
+        name: 'inputgroup',
+        component: () => import('../views/inputgroup/InputGroupDemo.vue')
+    },
+    {
+        path: '/inputswitch',
+        name: 'inputswitch',
+        component: () => import('../views/inputswitch/InputSwitchDemo.vue')
+    },
+    {
+        path: '/inputtext',
+        name: 'inputtext',
+        component: () => import('../views/inputtext/InputTextDemo.vue')
+    },
+    {
+        path: '/inputmask',
+        name: 'inputmask',
+        component: () => import('../views/inputmask/InputMaskDemo.vue')
+    },
+    {
+        path: '/inputnumber',
+        name: 'inputnumber',
+        component: () => import('../views/inputnumber/InputNumberDemo.vue')
+    },
+    {
+        path: '/listbox',
+        name: 'listbox',
+        component: () => import('../views/listbox/ListboxDemo.vue')
+    },
+    {
+        path: '/flexbox',
+        name: 'flexbox',
+        component: () => import('../views/flexbox/FlexBoxDemo.vue')
+    },
+    {
+        path: '/floatlabel',
+        name: 'floatlabel',
+        component: () => import('../views/floatlabel/FloatLabelDemo.vue')
+    },
+    {
+        path: '/megamenu',
+        name: 'megamenu',
+        component: () => import('../views/megamenu/MegaMenuDemo.vue')
+    },
+    {
+        path: '/menu',
+        name: 'menu',
+        component: () => import('../views/menu/MenuDemo.vue')
+    },
+    {
+        path: '/menubar',
+        name: 'menubar',
+        component: () => import('../views/menubar/MenubarDemo.vue')
+    },
+    {
+        path: '/menumodel',
+        name: 'menumodel',
+        component: () => import('../views/menumodel/MenuModel.vue')
+    },
+    {
+        path: '/message',
+        name: 'message',
+        component: () => import('../views/message/MessageDemo.vue')
+    },
+    {
+        path: '/multiselect',
+        name: 'multiselect',
+        component: () => import('../views/multiselect/MultiSelectDemo.vue')
+    },
+    {
+        path: '/orderlist',
+        name: 'orderlist',
+        component: () => import('../views/orderlist/OrderListDemo.vue')
+    },
+    {
+        path: '/organizationchart',
+        name: 'organizationchart',
+        component: () => import('../views/organizationchart/OrganizationChartDemo.vue')
+    },
+    {
+        path: '/overlaypanel',
+        name: 'overlaypanel',
+        component: () => import('../views/overlaypanel/OverlayPanelDemo.vue')
+    },
+    {
+        path: '/paginator',
+        name: 'paginator',
+        component: () => import('../views/paginator/PaginatorDemo.vue')
+    },
+    {
+        path: '/panel',
+        name: 'panel',
+        component: () => import('../views/panel/PanelDemo.vue')
+    },
+    {
+        path: '/panelmenu',
+        name: 'panelmenu',
+        component: () => import('../views/panelmenu/PanelMenuDemo.vue')
+    },
+    {
+        path: '/picklist',
+        name: 'picklist',
+        component: () => import('../views/picklist/PickListDemo.vue')
+    },
+    {
+        path: '/password',
+        name: 'password',
+        component: () => import('../views/password/PasswordDemo.vue')
+    },
+    {
+        path: '/progressbar',
+        name: 'progressbar',
+        component: () => import('../views/progressbar/ProgressBarDemo.vue')
+    },
+    {
+        path: '/progressspinner',
+        name: 'progressspinner',
+        component: () => import('../views/progressspinner/ProgressSpinnerDemo.vue')
+    },
+    {
+        path: '/primeflex',
+        name: 'primeflex',
+        component: () => import('../views/primeflex/PrimeFlexSetup.vue')
+    },
+    {
+        path: '/radiobutton',
+        name: 'radiobutton',
+        component: () => import('../views/radiobutton/RadioButtonDemo.vue')
+    },
+    {
+        path: '/rating',
+        name: 'rating',
+        component: () => import('../views/rating/RatingDemo.vue')
+    },
+    {
+        path: '/ripple',
+        name: 'ripple',
+        component: () => import('../views/ripple/RippleDemo.vue')
+    },
+    {
+        path: '/scrollpanel',
+        name: 'scrollpanel',
+        component: () => import('../views/scrollpanel/ScrollPanelDemo.vue')
+    },
+    {
+        path: '/selectbutton',
+        name: 'selectbutton',
+        component: () => import('../views/selectbutton/SelectButtonDemo.vue')
+    },
+    {
+        path: '/sidebar',
+        name: 'sidebar',
+        component: () => import('../views/sidebar/SidebarDemo.vue')
+    },
+    {
+        path: '/slider',
+        name: 'slider',
+        component: () => import('../views/slider/SliderDemo.vue')
+    },
+    {
+        path: '/spacing',
+        name: 'spacing',
+        component: () => import('../views/spacing/SpacingDemo.vue')
+    },
+    {
+        path: '/splitbutton',
+        name: 'splitbutton',
+        component: () => import('../views/splitbutton/SplitButtonDemo.vue')
+    },
+    {
+        path: '/steps',
+        component: () => import('../views/steps/StepsDemo.vue'),
+        children: [{
+            path: '',
+            component: () => import('../views/steps/PersonalDemo.vue')
+        },
+        {
+            path: '/steps/seat',
+            component: () => import('../views/steps/SeatDemo.vue')
+        },
+        {
+            path: '/steps/payment',
+            component: () => import('../views/steps/PaymentDemo.vue')
+        },
+        {
+            path: '/steps/confirmation',
+            component: () => import('../views/steps/ConfirmationDemo.vue')
+        }]
+    },
+    {
+        path: '/tabmenu',
+        component: () => import('../views/tabmenu/TabMenuDemo.vue'),
+        children: [{
+            path: '',
+            component: () => import('../views/tabmenu/HomeDemo.vue')
+        },
+        {
+            path: '/tabmenu/calendar',
+            component: () => import('../views/tabmenu/CalendarDemo.vue')
+        },
+        {
+            path: '/tabmenu/edit',
+            component: () => import('../views/tabmenu/EditDemo.vue')
+        },
+        {
+            path: '/tabmenu/documentation',
+            component: () => import('../views/tabmenu/DocumentationDemo.vue')
+        },
+        {
+            path: '/tabmenu/settings',
+            component: () => import('../views/tabmenu/SettingsDemo.vue')
+        }]
+    },
+    {
+        path: '/tabview',
+        name: 'tabview',
+        component: () => import('../views/tabview/TabViewDemo.vue')
+    },
+    {
+        path: '/text',
+        name: 'text',
+        component: () => import('../views/text/TextDemo.vue')
+    },
+    {
+        path: '/textarea',
+        name: 'textarea',
+        component: () => import('../views/textarea/TextareaDemo.vue')
+    },
+    {
+        path: '/terminal',
+        name: 'terminal',
+        component: () => import('../views/terminal/TerminalDemo.vue')
+    },
+    {
+        path: '/tieredmenu',
+        name: 'tieredmenu',
+        component: () => import('../views/tieredmenu/TieredMenuDemo.vue')
+    },
+    {
+        path: '/toast',
+        name: 'toast',
+        component: () => import('../views/toast/ToastDemo.vue')
+    },
+    {
+        path: '/togglebutton',
+        name: 'togglebutton',
+        component: () => import('../views/togglebutton/ToggleButtonDemo.vue')
+    },
+    {
+        path: '/toolbar',
+        name: 'toolbar',
+        component: () => import('../views/toolbar/ToolbarDemo.vue')
+    },
+    {
+        path: '/tooltip',
+        name: 'tooltip',
+        component: () => import('../views/tooltip/TooltipDemo.vue')
+    },
+    {
+        path: '/tree',
+        name: 'tree',
+        component: () => import('../views/tree/TreeDemo.vue')
+    },
+    {
+        path: '/tree/selection',
+        name: 'treeselection',
+        component: () => import('../views/tree/TreeSelectionDemo.vue')
+    },
+    {
+        path: '/tree/lazy',
+        name: 'treelazy',
+        component: () => import('../views/tree/TreeLazyDemo.vue')
+    },
+    {
+        path: '/tree/templating',
+        name: 'treetemplating',
+        component: () => import('../views/tree/TreeTemplatingDemo.vue')
+    },
+    {
+        path: '/tree/filter',
+        name: 'treefilter',
+        component: () => import('../views/tree/TreeFilterDemo.vue')
+    },
+    {
+        path: '/treetable',
+        name: 'treetable',
+        component: () => import('../views/treetable/TreeTableDemo.vue')
+    },
+    {
+        path: '/treetable/templating',
+        name: 'treetabletemplating',
+        component: () => import('../views/treetable/TreeTableTemplatingDemo.vue')
+    },
+    {
+        path: '/treetable/size',
+        name: 'treetablesize',
+        component: () => import('../views/treetable/TreeTableSizeDemo.vue')
+    },
+    {
+        path: '/treetable/paginator',
+        name: 'treetablepaginator',
+        component: () => import('../views/treetable/TreeTablePaginatorDemo.vue')
+    },
+    {
+        path: '/treetable/sort',
+        name: 'treetablesort',
+        component: () => import('../views/treetable/TreeTableSortDemo.vue')
+    },
+    {
+        path: '/treetable/filter',
+        name: 'treetablefilter',
+        component: () => import('../views/treetable/TreeTableFilterDemo.vue')
+    },
+    {
+        path: '/treetable/selection',
+        name: 'treetableselection',
+        component: () => import('../views/treetable/TreeTableSelectionDemo.vue')
+    },
+    {
+        path: '/treetable/lazy',
+        name: 'treetablelazy',
+        component: () => import('../views/treetable/TreeTableLazyDemo.vue')
+    },
+    {
+        path: '/treetable/coltoggle',
+        name: 'treetablecoltoggle',
+        component: () => import('../views/treetable/TreeTableColToggleDemo.vue')
+    },
+    {
+        path: '/treetable/responsive',
+        name: 'treetableresponsive',
+        component: () => import('../views/treetable/TreeTableResponsiveDemo.vue')
+    },
+    {
+        path: '/treetable/colresize',
+        name: 'treetablecolresize',
+        component: () => import('../views/treetable/TreeTableColResizeDemo.vue')
+    },
+    {
+        path: '/tristatecheckbox',
+        name: 'tristatecheckbox',
+        component: () => import('../views/tristatecheckbox/TriStateCheckboxDemo.vue')
+    },
+    {
+        path: '/galleria',
+        name: 'galleria',
+        component: () => import('../views/galleria/GalleriaDemo.vue')
+    },
+    {
+        path: '/galleria/programmatic',
+        name: 'galleriaprogrammatic',
+        component: () => import('../views/galleria/GalleriaProgrammaticDemo.vue')
+    },
+    {
+        path: '/galleria/indicator',
+        name: 'galleriaindicator',
+        component: () => import('../views/galleria/GalleriaIndicatorDemo.vue')
+    },
+    {
+        path: '/galleria/thumbnail',
+        name: 'galleriathumbnail',
+        component: () => import('../views/galleria/GalleriaThumbnailDemo.vue')
+    },
+    {
+        path: '/galleria/navigator',
+        name: 'gallerianavigator',
+        component: () => import('../views/galleria/GalleriaNavigatorDemo.vue')
+    },
+    {
+        path: '/galleria/responsive',
+        name: 'galleriaresponsive',
+        component: () => import('../views/galleria/GalleriaResponsiveDemo.vue')
+    },
+    {
+        path: '/galleria/fullscreen',
+        name: 'galleriafullscreen',
+        component: () => import('../views/galleria/GalleriaFullScreenDemo.vue')
+    },
+    {
+        path: '/galleria/autoplay',
+        name: 'galleriaautoplay',
+        component: () => import('../views/galleria/GalleriaAutoPlayDemo.vue')
+    },
+    {
+        path: '/galleria/caption',
+        name: 'galleriacaption',
+        component: () => import('../views/galleria/GalleriaCaptionDemo.vue')
+    },
+    {
+        path: '/galleria/advanced',
+        name: 'galleriaadvvanced',
+        component: () => import('../views/galleria/GalleriaAdvancedDemo.vue')
+    }
+];
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes
+});
+  
+export default router;
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -226,7 +226,7 @@ export default {
            document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
        }

-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.dark = true;
            else
@ -234,7 +234,7 @@ export default {
        });
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    computed: {
        introductionClass() {
--- a/src/views/chart/BarChartDemo.vue
+++ b/src/views/chart/BarChartDemo.vue
@ -39,7 +39,7 @@ import EventBus from '@/EventBus';

 export default {
    mounted() {
-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.applyDarkTheme();
            else
@ -51,7 +51,7 @@ export default {
        }
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    data() {
        return {
--- a/src/views/chart/ComboChartDemo.vue
+++ b/src/views/chart/ComboChartDemo.vue
@ -23,7 +23,7 @@ import EventBus from '@/EventBus';

 export default {
     mounted() {
-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.applyDarkTheme();
            else
@ -35,7 +35,7 @@ export default {
        }
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    data() {
        return {
--- a/src/views/chart/DoughnutChartDemo.vue
+++ b/src/views/chart/DoughnutChartDemo.vue
@ -23,7 +23,7 @@ import EventBus from '@/EventBus';

 export default {
    mounted() {
-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.chartOptions = this.getDarkTheme();
            else
@ -31,7 +31,7 @@ export default {
        });
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    data() {
        return {
--- a/src/views/chart/LineChartDemo.vue
+++ b/src/views/chart/LineChartDemo.vue
@ -34,7 +34,7 @@ import EventBus from '@/EventBus';

 export default {
    mounted() {
-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.applyDarkTheme();
            else
@ -46,7 +46,7 @@ export default {
        }
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    data() {
        return {
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@ -23,7 +23,7 @@ import EventBus from '@/EventBus';

 export default {
    mounted() {
-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.chartOptions = this.getDarkTheme();
            else
@ -31,7 +31,7 @@ export default {
        });
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    data() {
        return {
--- a/src/views/chart/PolarAreaChartDemo.vue
+++ b/src/views/chart/PolarAreaChartDemo.vue
@ -23,7 +23,7 @@ import EventBus from '@/EventBus';

 export default {
    mounted() {
-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.chartOptions = this.getDarkTheme();
            else
@ -31,7 +31,7 @@ export default {
        });
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    data() {
        return {
--- a/src/views/chart/RadarChartDemo.vue
+++ b/src/views/chart/RadarChartDemo.vue
@ -23,7 +23,7 @@ import EventBus from '@/EventBus';

 export default {
    mounted() {
-        EventBus.$on('change-theme', event => {
+        EventBus.on('change-theme', event => {
            if (event.dark)
                this.chartOptions = this.getDarkTheme();
            else
@ -31,7 +31,7 @@ export default {
        });
    },
    beforeDestroy() {
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    data() {
        return {
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@ -1484,7 +1484,7 @@ export default {
 </CodeHighlight>

                <h5>ContextMenu</h5>
-                <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.
+                <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@ -222,14 +222,14 @@ export default {
                case 'quantity':
                case 'price':
                    if (this.isPositiveInteger(editingCellValue))
-                        Vue.set(this.products2, event.index, this.editingCellRows[event.index]);
+                        this.products2[event.index] = this.editingCellRows[event.index];
                    else
                        event.preventDefault();
                break;

                default:
                    if (editingCellValue.trim().length > 0)
-                        Vue.set(this.products2, event.index, this.editingCellRows[event.index]);
+                        this.products2[event.index] = this.editingCellRows[event.index];
                    else
                        event.preventDefault();
                break;
@ -256,7 +256,7 @@ export default {
            this.originalRows[event.index] = {...this.products3[event.index]};
        },
        onRowEditCancel(event) {
-            Vue.set(this.products3, event.index, this.originalRows[event.index]);
+            this.products3[event.index] = this.originalRows[event.index];
        },
        getStatusLabel(status) {
            switch(status) {
@ -296,7 +296,6 @@ export default {

 <script>
 import ProductService from '../../service/ProductService';
-import Vue from 'vue';

 export default {
    data() {
@ -336,14 +335,14 @@ export default {
                case 'quantity':
                case 'price':
                    if (this.isPositiveInteger(editingCellValue))
-                        Vue.set(this.products2, event.index, this.editingCellRows[event.index]);
+                        this.products2[event.index] = this.editingCellRows[event.index];
                    else
                        event.preventDefault();
                break;

                default:
                    if (editingCellValue.trim().length > 0)
-                        Vue.set(this.products2, event.index, this.editingCellRows[event.index]);
+                        this.products2[event.index] = this.editingCellRows[event.index];
                    else
                        event.preventDefault();
                break;
@ -370,7 +369,7 @@ export default {
            this.originalRows[event.index] = {...this.products3[event.index]};
        },
        onRowEditCancel(event) {
-            Vue.set(this.products3, event.index, this.originalRows[event.index]);
+            this.products3[event.index] = this.originalRows[event.index];
        },
        getStatusLabel(status) {
            switch(status) {
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@ -49,7 +49,7 @@ export default {
 </CodeHighlight>

                <h5>Positioning</h5>
-                <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright"<div class=""></div>
+                <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
 <CodeHighlight>
 &lt;Dialog position="top" :visible.sync="display"&gt;
 	Content
--- a/src/views/menumodel/MenuModel.vue
+++ b/src/views/menumodel/MenuModel.vue
@ -159,6 +159,4 @@ const items = [
 </CodeHighlight>
        </div>
    </div>
-</template>
-
-<script>
+</template>
--- a/src/views/primeflex/PrimeFlexSetup.vue
+++ b/src/views/primeflex/PrimeFlexSetup.vue
@ -117,6 +117,4 @@ import 'primeflex/src/_elevation.css';
 </CodeHighlight>
        </div>
    </div>
-</template>
-
-<script>
+</template>
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@ -196,6 +196,4 @@ plugins: [

        </div>
    </div>
-</template>
-
-<script>
+</template>
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@ -53,7 +53,7 @@ export default {
 </CodeHighlight>

                <h5>MenuModel</h5>
-                <p>SplitButton uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.
+                <p>SplitButton uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>

 				<h5>Severity</h5>
 				<p>Different color options are available as severity levels.</p>
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/src/views/steps/ConfirmationDemo.vue
@ -59,7 +59,7 @@ export default {
    },
    methods: {
        prevPage() {
-            this.$emit('prevPage', {pageIndex: 3});
+            this.$emit('prev-page', {pageIndex: 3});
        },
        complete() {
            this.$emit('complete');
--- a/src/views/steps/PaymentDemo.vue
+++ b/src/views/steps/PaymentDemo.vue
@ -54,10 +54,10 @@ export default {
    },
    methods: {
        nextPage() {
-            this.$emit('nextPage', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
+            this.$emit('next-page', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
        },
        prevPage() {
-            this.$emit('prevPage', {pageIndex: 2});
+            this.$emit('prev-page', {pageIndex: 2});
        }
    }
 }
--- a/src/views/steps/PersonalDemo.vue
+++ b/src/views/steps/PersonalDemo.vue
@ -67,7 +67,7 @@ export default {
                return;
            }

-            this.$emit('nextPage', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
+            this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
        }
    }
 }
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@ -68,10 +68,10 @@ export default {
            }
        },
        nextPage() {
-            this.$emit('nextPage', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
+            this.$emit('next-page', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
        },
        prevPage() {
-            this.$emit('prevPage', {pageIndex: 1});
+            this.$emit('prev-page', {pageIndex: 1});
        }
    }
 }
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@ -13,7 +13,7 @@
            </div>

            <keep-alive>
-                <router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
+                <router-view :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete" />
            </keep-alive>
        </div>

--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@ -127,7 +127,7 @@ export default {
 <template v-pre>
 &lt;Steps :model="items" :readonly="true"  style="margin-bottom: 1rem" /&gt;
 &lt;keep-alive&gt;
-    &lt;router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" /&gt;
+    &lt;router-view :formData="formObject" @prevPage="prev-page($event)" @next-page="nextPage($event)" @complete="complete" /&gt;
 &lt;/keep-alive&gt;
 </template>
 </CodeHighlight>
@ -250,7 +250,7 @@ export default {
                return;
            }

-            this.$emit('nextPage', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
+            this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
        }
    }
 }
@ -329,10 +329,10 @@ export default {
            }
        },
        nextPage() {
-            this.$emit('nextPage', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
+            this.$emit('next-page', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
        },
        prevPage() {
-            this.$emit('prevPage', {pageIndex: 1});
+            this.$emit('prev-page', {pageIndex: 1});
        }
    }
 }
@ -397,10 +397,10 @@ export default {
    },
    methods: {
        nextPage() {
-            this.$emit('nextPage', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
+            this.$emit('next-page', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
        },
        prevPage() {
-            this.$emit('prevPage', {pageIndex: 2});
+            this.$emit('prev-page', {pageIndex: 2});
        }
    }
 }
@ -470,7 +470,7 @@ export default {
    },
    methods: {
        prevPage() {
-            this.$emit('prevPage', {pageIndex: 3});
+            this.$emit('prev-page', {pageIndex: 3});
        },
        complete() {
            this.$emit('complete');
--- a/src/views/tabview/TabViewDemo.vue
+++ b/src/views/tabview/TabViewDemo.vue
@ -129,7 +129,7 @@ export default {
    },
    timeout: null,
    mounted() {
-        EventBus.$on('change-theme', () => {
+        EventBus.on('change-theme', () => {
            this.timeout = setTimeout(() => {
                this.$refs.tabview1.updateInkBar();
                this.$refs.tabview2.updateInkBar();
@ -140,7 +140,7 @@ export default {
    },
    beforeDestroy() {
        clearTimeout(this.timeout);
-        EventBus.$off('change-theme');
+        EventBus.off('change-theme');
    },
    methods: {
        activate(index) {
--- a/src/views/terminal/TerminalDemo.vue
+++ b/src/views/terminal/TerminalDemo.vue
@ -46,14 +46,14 @@ export default {
                    response = "Unknown command: " + command;
            }

-            TerminalService.$emit('response', response);
+            TerminalService.emit('response', response);
        }
    },
    mounted() {
-        TerminalService.$on('command', this.commandHandler);
+        TerminalService.on('command', this.commandHandler);
    },
    beforeDestroy() {
-        TerminalService.$off('command', this.commandHandler);
+        TerminalService.off('command', this.commandHandler);
    },
    components: {
        'TerminalDoc': TerminalDoc
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@ -20,7 +20,7 @@
                        <template #header>
                            <Button type="button" icon="pi pi-cog"></Button>
                        </template>
-                        <template #body="slotProps">
+                        <template>
                            <Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
                            <Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
                        </template>
@ -50,7 +50,7 @@
        &lt;template #header&gt;
            &lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
        &lt;/template&gt;
-        &lt;template #body="slotProps"&gt;
+        &lt;template&gt;
            &lt;Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"&gt;&lt;/Button&gt;
            &lt;Button type="button" icon="pi pi-pencil" class="p-button-warning"&gt;&lt;/Button&gt;
        &lt;/template&gt;