add 404

src/router/index.js

@@ -9,13 +9,25 @@ const routes = [
       {
         path: '',
         name: 'Home',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
       },
     ],
   },
+  // Leave this as the last route.
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/layouts/default/Default.vue'),
+    children: [
+      {
+        path: '',
+        name: 'not-found',
+        component: () =>
+          import(
+            /* webpackChunkName: "default" */ '@/views/FileNotFound.vue'
+          ),
+      },
+    ],
+  },
 ]
 
 const router = createRouter({

src/views/FileNotFound.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-container class="fill-height">
+    <v-row>
+      <v-col class="text-center fill-height">
+        <v-icon class="text-error text-h1">mdi-web-remove</v-icon>
+        <div class="mt-4 mb-8 text-h5 text-error">(404) File Not Found</div>
+        <v-btn color="success" variant="outlined" to="/">Home</v-btn>
+        <div class="mb-16 pt-8" />
+        <site-footer />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import siteFooter from '@/components/Footer.vue';
+</script>