feat: custom error page

app/error.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps<{ error: NuxtError }>()
+</script>
+
+<template>
+  <UApp>
+    <div class="min-h-screen flex items-center justify-center">
+      <div class="text-center space-y-2">
+        <p class="text-8xl font-black tracking-tight">404</p>
+        <p class="text-lg font-medium">This link doesn't exist.</p>
+        <p class="text-muted text-sm">
+          Maybe check out
+          <a
+            href="https://pihkaal.me"
+            class="underline underline-offset-2 hover:text-default transition-colors"
+          >pihkaal.me</a>
+          instead?
+        </p>
+      </div>
+    </div>
+  </UApp>
+</template>

app/plugins/redirect-error.server.ts

@@ -0,0 +1,6 @@
+export default defineNuxtPlugin(() => {
+  const event = useRequestEvent()
+  if (event?.context.redirectNotFound) {
+    showError({ statusCode: 404, message: 'Link not found' })
+  }
+})