allow vue-router urls to work in frontend image

Added 404 fallback in Vue

frontend/nginx-default.conf

@@ -10,5 +10,12 @@ server {
     location / {
         root /user/share/nginx/html;
         index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page  404 /index.html;
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
     }
 }

frontend/src/router/index.ts

@@ -5,6 +5,7 @@ import CollectionsView from '@/views/CollectionsView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
 import ContactPage from '@/components/ContactPage.vue'
+import NotFoundView from '@/views/NotFoundView.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -37,6 +38,11 @@ const router = createRouter({
       path: '/',
       name: 'start',
       component: StartView
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: '404',
+      component: NotFoundView
     }
   ]
 })

frontend/src/views/NotFoundView.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="d-flex flex-column vh-100">
+    <div class="flex-shrink-1">
+      <div class="mt-5">
+        <SloganComponent />
+      </div>
+      <div class="mt-5">
+        <Suspense>
+          <div class="container">
+            <h2>404 Error: Not Found</h2>
+            <p>We could not match your request with a valid document.</p>
+          </div>
+        </Suspense>
+      </div>
+    </div>
+    <FooterComponent />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FooterComponent from '@/components/FooterComponent.vue'
+import SloganComponent from '@/components/SloganComponent.vue'
+import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
+import DragToStartProjectComponent from '@/components/DragToStartProjectComponent.vue'
+import StatementsComponent from '@/components/StatementsComponent.vue'
+</script>

frontend/src/views/StartView.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script setup lang="ts">
+import FooterComponent from '@/components/FooterComponent.vue'
 import CollectionsView from './CollectionsView.vue'
 import HomeView from '@/views/HomeView.vue'
 import { type Project } from '@/constants'