Merge pull request 'Add NotFound.vue #48' (#50) from feature/not-found-page into main

Reviewed-on: #50
Reviewed-by: Jakob Scheid

package-lock.json

@@ -2060,6 +2060,7 @@
       "resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz",
       "integrity": "sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^4.2.0",
         "colorette": "^2.0.16",

src/router/index.js

@@ -18,6 +18,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 
 import SearchView from '../views/SearchView.vue';
 import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
+import NotFound from '../views/NotFound.vue';
 
 const routes = [
     {
@@ -35,7 +36,12 @@ const routes = [
         meta: {
             title: (route) => route.query.q
         }
-    }
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'notFound',
+        component: NotFound
+    },
 ];
 
 const router = createRouter({

src/views/NotFound.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="not-found">
+       <span class="error-message">
+            The page you are looking for does not exist. Please check the URL or return to the search page.
+        </span>
+        <RouterLink to="/" id="link">Back to Search</RouterLink>
+    </div>
+</template>
+
+<style scoped>
+.not-found {
+    text-align: center;
+    padding-top: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+.error-message{
+    margin: 0;
+    font-weight: 600;
+    font-size: 2vw;
+}
+#link {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    padding: 10px 20px;
+    text-decoration: none;
+}
+</style>