init

.eslintrc.js

@@ -60,6 +60,7 @@ module.exports = {
   rules: {
     
       'prefer-promise-reject-errors': 'off',
+      'eslint-disable-next-line': 'off',
 
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'

.vscode/settings.json

@@ -11,5 +11,8 @@
         "javascriptreact",
         "typescript",
         "vue"
-  ]
+    ],
+    "[vue]": {
+        "editor.defaultFormatter": "octref.vetur"
+    }
 }

src/App.vue

@@ -3,9 +3,19 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: 'App'
-})
+  name: "App",
+  data() {
+    return {
+    };
+  },
+  computed: {},
+  created: function () {
+    // this.$router.push("/configuration");
+    this.$router.push("/code");
+  },
+  methods: {},
+});
 </script>

src/pages/ConfigurationPage.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <q-splitter v-model="splitterModel" style="height: 250px">
+      <template v-slot:before>
+        <q-tabs v-model="tab" vertical class="text-teal">
+          <q-tab name="mails" icon="mail" label="Mails" />
+          <q-tab name="alarms" icon="alarm" label="Alarms" />
+          <q-tab name="movies" icon="movie" label="Movies" />
+        </q-tabs>
+      </template>
+
+      <template v-slot:after>
+        <q-tab-panels
+          v-model="tab"
+          animated
+          swipeable
+          vertical
+          transition-prev="jump-up"
+          transition-next="jump-up"
+        >
+          <q-tab-panel name="mails">
+            <div class="text-h4 q-mb-md">Mails</div>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+              praesentium cumque magnam odio iure quidem, quod illum numquam
+              possimus obcaecati commodi minima assumenda consectetur culpa fuga
+              nulla ullam. In, libero.
+            </p>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+              praesentium cumque magnam odio iure quidem, quod illum numquam
+              possimus obcaecati commodi minima assumenda consectetur culpa fuga
+              nulla ullam. In, libero.
+            </p>
+          </q-tab-panel>
+
+          <q-tab-panel name="alarms">
+            <div class="text-h4 q-mb-md">Alarms</div>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+              praesentium cumque magnam odio iure quidem, quod illum numquam
+              possimus obcaecati commodi minima assumenda consectetur culpa fuga
+              nulla ullam. In, libero.
+            </p>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+              praesentium cumque magnam odio iure quidem, quod illum numquam
+              possimus obcaecati commodi minima assumenda consectetur culpa fuga
+              nulla ullam. In, libero.
+            </p>
+          </q-tab-panel>
+
+          <q-tab-panel name="movies">
+            <div class="text-h4 q-mb-md">Movies</div>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+              praesentium cumque magnam odio iure quidem, quod illum numquam
+              possimus obcaecati commodi minima assumenda consectetur culpa fuga
+              nulla ullam. In, libero.
+            </p>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+              praesentium cumque magnam odio iure quidem, quod illum numquam
+              possimus obcaecati commodi minima assumenda consectetur culpa fuga
+              nulla ullam. In, libero.
+            </p>
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+              praesentium cumque magnam odio iure quidem, quod illum numquam
+              possimus obcaecati commodi minima assumenda consectetur culpa fuga
+              nulla ullam. In, libero.
+            </p>
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+    </q-splitter>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tab: "mails",
+      splitterModel: 20,
+    };
+  },
+};
+</script>

src/router/routes.js

@@ -1,4 +1,3 @@
-
 const routes = [
     {
         path: '/',
@@ -7,12 +6,13 @@ const routes = [
             { path: '', component: () => import('pages/IndexPage.vue') }
         ]
     },
-
-  // Always leave this as last one,
-  // but you can also remove it
     {
-    path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue')
+        path: '/configuration',
+        component: () => import('pages/ConfigurationPage.vue')
+    },
+    {
+        path: '/code',
+        component: () => import('pages/CodeRunner.vue')
     }
 ]