diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index d28bde567..47d83be1c 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -135,7 +135,7 @@ export default {
                 extImport += `import FullCalendar from 'primevue/fullcalendar';`;
                 extElement += `app.component('FullCalendar', FullCalendar);`;
             }
-            if(name === 'BarChartDemo' || name === 'ComboChartDemo' || name === 'DoughnutChartDemo' || name === 'LineChartDemo' || name === 'PieChartDemo' || name === 'PolarAreaChartDemo' || name === 'RadarChartDemo') {
+            if(name.slice(-9) === 'ChartDemo') {
                 extDependencies['chart.js'] = "2.7.3";
                 extImport += `import Chart from 'primevue/chart';`;
                 extElement += `app.component('Chart', Chart);`;
@@ -148,16 +148,18 @@ export default {
                     serviceArr.push(el.split(','))
                 })
 
-                this.data.forEach(el => {
-                    dataArr.push(el.split(','))
-                })
+                if(this.data) {
+                    this.data.forEach(el => {
+                        dataArr.push(el.split(','))
+                    })
 
-                if(dataArr) {
-                    dataArr.forEach(el => {
-                        _files[`public/data/${el}.json`] = {
-                            content: data[el]
-                        };
-                    });
+                    if(dataArr) {
+                        dataArr.forEach(el => {
+                            _files[`public/data/${el}.json`] = {
+                                content: data[el]
+                            };
+                        });
+                    }
                 }
 
                 serviceArr.forEach(serv => {
@@ -595,7 +597,7 @@ img.flag {
             }
 
             if(pages) {
-                const routes = [];
+                let routes = [], routeImports = '';
 
                 pages.forEach((page, i) => {
                     _files[`src/components/${page.tabName}.vue`] = {
@@ -604,17 +606,20 @@ img.flag {
 
                     let route = '';
 
+                    routeImports += `import ${page.tabName} from './components/${page.tabName}.vue';
+`;
+
                     if(i === 0) {
                         route += `{
-                            path: "/",
-                            component: () => import("./components/${page.tabName}.vue")
-                        }`;
+    path: "/",
+    component: ${page.tabName}
+}`;
                     }
                     else {
                         route += `{
-                            path: "/${page.tabName.slice(0, -4).toLowerCase()}",
-                            component: () => import("./components/${page.tabName}.vue")
-                        }`;
+    path: "/${page.tabName.slice(0, -4).toLowerCase()}",
+    component: ${page.tabName}
+}`;
                     }
 
                     routes.push(route);
@@ -622,15 +627,11 @@ img.flag {
 
                 _files['src/router.js'] = {
                     'content': `import { createRouter, createWebHistory } from "vue-router";
-
+${routeImports}
 export const router = createRouter({
     history: createWebHistory(),
     routes: [
-        {
-            path: "/",
-            component: () => import("./${name}.vue"),
-            children: [${routes}]
-        }
+        ${routes}
     ]
 });
 `
@@ -665,12 +666,3 @@ export const router = createRouter({
     }
 }
 </script>
-
-<style lang="scss" scoped>
-.liveEditorSplitButton {
-    color: red;
-    a:hover {
-        text-decoration: none;
-    }
-}
-</style>
diff --git a/src/views/liveeditor/LiveEditorData.js b/src/views/liveeditor/LiveEditorData.js
index 8e87cb755..b9341210a 100644
--- a/src/views/liveeditor/LiveEditorData.js
+++ b/src/views/liveeditor/LiveEditorData.js
@@ -1,5 +1,6 @@
 const services = {
-    'CountryService': `import axios from 'axios'
+    'CountryService': `
+import axios from 'axios'
 
 export default class CountryService {
     
@@ -8,7 +9,8 @@ export default class CountryService {
     }
 }    
     `,
-    'CustomerService': `import axios from 'axios'
+    'CustomerService': `
+import axios from 'axios'
 
 export default class CustomerService {
     
@@ -33,7 +35,8 @@ export default class CustomerService {
     }
 }
     `,
-    'EventService': `import axios from 'axios';
+    'EventService': `
+import axios from 'axios';
 
 export default class EventService {
 
@@ -42,7 +45,8 @@ export default class EventService {
     }
 }
     `,
-    'NodeService': `import axios from 'axios';
+    'NodeService': `
+import axios from 'axios';
 
 export default class NodeService {
     
@@ -58,7 +62,8 @@ export default class NodeService {
     
 }
     `,
-    'PhotoService': `import axios from 'axios'
+    'PhotoService': `
+import axios from 'axios'
 
 export default class PhotoService {
 
@@ -68,7 +73,8 @@ export default class PhotoService {
     }
 }
 `,
-    'ProductService': `import axios from 'axios';
+    'ProductService': `
+import axios from 'axios';
 
 export default class ProductService {
 
@@ -404,7 +410,8 @@ const data = {
     ]
 }
     `,
-    'customers-large': `{
+    'customers-large': `
+{
         "data":[
            {
               "id":1000,
@@ -4912,7 +4919,8 @@ const data = {
            }
         ]
       }`,
-    'customers-small': `{
+    'customers-small': `
+{
         "data":[
            {
               "id":1000,