new-frontend/src/App.vue

@@ -13,7 +13,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <XmlTool></XmlTool>
+  <RouterView></RouterView>
 </template>
 
 <style scoped></style>

new-frontend/src/components/LandingComponent.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
 
 
 </script>

new-frontend/src/main.ts

@@ -1,4 +1,5 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import router from "./router";
+import App from './App.vue';
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

new-frontend/src/router/index.ts

@@ -1,21 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import XmlTool from '../components/XmlTool.vue';
+
+const landingPage = import("@/views/LandingView.vue")
+
+const routes = [
+  {
+    path: '/',
+    name: 'landing',
+    component: () => landingPage
+  },
+]
 
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
+  routes: routes
-    {
-      path: '/',
-      name: 'landing',
-      component: () => import('../components/XmlTool.vue')
-    },
-    {
-      path: '/xmltools',
-      name: 'portfolio',
-      component: () => import('../views/PortfolioView.vue')
-    }
-  ]
 })
 
+
 export default router;

new-frontend/src/views/LandingView.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import LandingComponent from '@/components/LandingComponent.vue'
+
+export default {
+    name:"LandingView",
+    components: {LandingComponent}
+}
+</script>
+
+
+<template>
+    <LandingComponent></LandingComponent>
+</template>
+

new-frontend/tsconfig.json

@@ -1,4 +1,12 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
   "files": [],
   "references": [
     {