feat: add 404 page

layouts/error.vue

@@ -1 +1,12 @@
-<template>error!</template>
+<script setup lang="ts">
+import Default from "./default.vue";
+</script>
+
+<template>
+  <Default>
+    <main class="flex flex-col grow">
+      <h1>404 - Not Found</h1>
+      <p>The page you are looking for cannot be found.</p>
+    </main>
+  </Default>
+</template>

nuxt.config.ts

@@ -19,6 +19,9 @@ export default defineNuxtConfig({
   sitemap: {
     hostname: process.env.BASE_URL || "https://eggworld.tk",
   },
+  generate: {
+    fallback: "404.html",
+  },
   tailwindcss: {},
   colorMode: {
     classSuffix: "",

pages/[...slug].vue

@@ -49,6 +49,10 @@ const captionText =
       </template>
       <template #not-found>
         <h1>404 - Not Found</h1>
+        <p>
+          Thanks for dropping by! But the page you're looking for can't be
+          found.
+        </p>
       </template>
     </ContentRenderer>
   </div>