new-frontend/src/App.vue

@@ -13,6 +13,11 @@ onMounted(() => {
 </script>
 
 <template>
+   <button @click="$router.push('/xml')">XML</button>
+   <button @click="$router.push('/formatter')">Formatter</button>
+   <button @click="$router.push('/restmock')">REST Mock</button>
+
+
   <RouterView></RouterView>
 </template>
 

new-frontend/src/router/index.ts

@@ -1,6 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 const landingPage = import("@/views/LandingView.vue")
+const xmlTool = import("@/views/XmlToolView.vue")
+const restMock = import("@/views/RestMockView.vue")
+const formatter = import("@/views/FormatterView.vue")
 
 const routes = [
   {
@@ -8,6 +11,21 @@ const routes = [
     name: 'landing',
     component: () => landingPage
   },
+  {
+    path: '/xml',
+    name: 'xmltool',
+    component: () => xmlTool
+  },
+  {
+    path: '/restmock',
+    name: 'restmock',
+    component: () => restMock
+  },
+  {
+    path: '/formatter',
+    name: 'formatter',
+    component: () => formatter
+  },
 ]
 
 

new-frontend/src/views/FormatterView.vue

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

new-frontend/src/views/RestMockView.vue

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

new-frontend/src/views/XmlToolView.vue

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