Update LiveEditor

src/views/liveeditor/LiveEditor.vue

@@ -67,6 +67,10 @@ export default {
         terminalService: {
             type: Boolean,
             default: false
+        },
+        router: {
+            type: Boolean,
+            default: false
         }
     },
     methods: {
@@ -148,8 +152,9 @@ export default {
             let style = this.sources.template.style || '';
             let api = this.sources.api ?  this.sources.api.content : '';
             let apiStyle = this.sources.api && this.sources.api.style ? this.sources.api.style : '';
+            let pages = this.sources.pages ? this.sources.pages : ''; 
             let scriptText = 'script';
-            let _files = {}, importElement = '', element = '', components = '', imports = '', directives = '';
+            let _files = {}, importElement = '', element = '', components = '', imports = '', directives = '', router = '';
 
             if(sourceType === 'core') {
                 _files[`src/components/${name}${extension}`] = {       
@@ -170,6 +175,25 @@ ${apiStyle}
                 }
             }
 
+            if(this.router) {
+                extDependencies['vue-router'] = "^4.0.0-0";
+
+                imports += `import { router } from "./router";
+`;
+
+                router += `app.use(router);`;
+
+                _files[`src/router.js`] = {
+                    content: `import { createRouter, createWebHistory } from "vue-router";
+import App from "./App.vue";
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: "/", component: App }]
+});`
+                }
+            }
+
             if(this.components) {
                 this.components.forEach(comp => {
                     imports += `import ${comp} from "primevue/${comp.toLowerCase()}";
@@ -279,16 +303,17 @@ ${services[this.service]}
 
             _files['src/main.js'] = {
                 content: `import { createApp } from "vue";
+import App from "./App.vue";
 import "primeflex/primeflex.css";
 import "primevue/resources/themes/saga-blue/theme.css";
 import "primevue/resources/primevue.min.css";
 import "primeicons/primeicons.css";
-import App from "./App.vue";
 import PrimeVue from "primevue/config";
 ${importElement}
 ${imports}
 const app = createApp(App);
 app.use(PrimeVue, { ripple: true });
+${router}
 ${directives}
 ${element}
 ${components}
@@ -565,6 +590,52 @@ img.flag {
                         `,
             }
 
+            if(pages) {
+                extDependencies['vue-router'] = "^4.0.0-0";
+                const routes = [];
+
+                pages.forEach((page, i) => {
+                    _files[`src/components/${page.name}.vue`] = {
+                        'content': `${page.tag}
+</${scriptText}>`
+                    }
+
+                    let route = '';
+
+                    if(i === 0) {
+                        route += `{
+                            path: "",
+                            component: () => import("./components/${page.name}.vue")
+                        }`;
+                    }
+                    else {
+                        route += `{
+                            path: "/${page.name.slice(0, -4).toLowerCase()}",
+                            component: () => import("./components/${page.name}.vue")
+                        }`;
+                    }
+
+                    routes.push(route);
+                })
+
+                _files['src/router.js'] = {
+                    'content': `import { createRouter, createWebHistory } from "vue-router";
+
+export const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: "/",
+            component: () => import("./components/${name}.vue"),
+            children: [${routes}]
+        }
+    ]
+});
+`
+                }
+
+            }
+
             return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
         }
     },