From 0cd1b46ecb5866ac84c4684836ab62b6eb4001a7 Mon Sep 17 00:00:00 2001
From: Tonya <tonya@tokia.dev>
Date: Thu, 8 May 2025 08:16:51 +0000
Subject: [PATCH] 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          | 23 +++++++++++++++++++++++
 frontend/layouts/404.vue    |  5 -----
 frontend/pages/[...all].vue | 18 ------------------
 3 files changed, 23 insertions(+), 23 deletions(-)
 create mode 100644 frontend/error.vue
 delete mode 100644 frontend/layouts/404.vue
 delete mode 100644 frontend/pages/[...all].vue

diff --git a/frontend/error.vue b/frontend/error.vue
new file mode 100644
index 00000000..2235c703
--- /dev/null
+++ b/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>
diff --git a/frontend/layouts/404.vue b/frontend/layouts/404.vue
deleted file mode 100644
index 31e31392..00000000
--- a/frontend/layouts/404.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <main class="grid min-h-screen w-full place-items-center">
-    <slot></slot>
-  </main>
-</template>
diff --git a/frontend/pages/[...all].vue b/frontend/pages/[...all].vue
deleted file mode 100644
index 9abc3a2a..00000000
--- a/frontend/pages/[...all].vue
+++ /dev/null
@@ -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>