feat: use nuxts built in error page instead of a catch all page (#675)

* feat: use nuxts built in error page instead of a catch all page

* fix: require error prop in error.vue and remove optional chaining for more reliable error handling

frontend/error.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import type { NuxtError } from "#app";
+  import { buttonVariants } from "@/components/ui/button";
+
+  const props = defineProps({
+    error: {
+      type: Object as () => NuxtError,
+      required: true,
+    },
+  });
+
+  console.log(props.error);
+</script>
+
+<template>
+  <main class="grid min-h-screen w-full place-items-center">
+    <h1 class="flex flex-col gap-5 text-center font-extrabold">
+      <span class="text-7xl">{{ error.statusCode }}.</span>
+      <span class="text-5xl"> {{ error.message }} </span>
+      <NuxtLink to="/" :class="buttonVariants({ size: 'lg' })"> Return Home </NuxtLink>
+    </h1>
+  </main>
+</template>

frontend/layouts/404.vue

@@ -1,5 +0,0 @@
-<template>
-  <main class="grid min-h-screen w-full place-items-center">
-    <slot></slot>
-  </main>
-</template>

frontend/pages/[...all].vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-  import { buttonVariants } from "@/components/ui/button";
-
-  useHead({
-    title: "404. Not Found",
-  });
-  definePageMeta({
-    layout: "404",
-  });
-</script>
-
-<template>
-  <h1 class="flex flex-col gap-5 text-center font-extrabold">
-    <span class="text-7xl">404.</span>
-    <span class="text-5xl"> Page Not Found </span>
-    <NuxtLink to="/" :class="buttonVariants({ size: 'lg' })"> Return Home </NuxtLink>
-  </h1>
-</template>