implement not found for ui

ui/src/App.vue

@@ -13,7 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/test">Test</RouterLink>
+        <RouterLink to="/asdf">asdfasdf</RouterLink>
       </nav>
     </div>
   </header>

ui/src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import NotFoundView from '../views/NotFoundView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,6 +18,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue'),
     },
+    {
+      path: '/:path(.*)*',
+      name: 'not-found',
+      component: NotFoundView,
+    },
   ],
 })
 

ui/src/views/NotFoundView.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+let path = "/"
+for( let part of route.params.path ){
+  path += part + "/"
+}
+path = path.slice(0,-1)
+</script>
+
+<template>
+  <main>
+    Could not find page at {{ path }}
+  </main>
+</template>