3-5 Handling Server-Side Errors

Author: tesla3327

error.vue

@@ -0,0 +1,31 @@
+<template>
+  <NuxtLayout>
+    <div class="prose">
+      <h1>Dang</h1>
+      <p>It looks like something broke.</p>
+      <p>Sorry about that.</p>
+      <p>
+        <strong>{{ error.message }}</strong>
+      </p>
+      <p>
+        Go to the
+        <a
+          class="hover:cursor-pointer"
+          @click="handleError"
+        >
+          first lesson.
+        </a>
+      </p>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script setup>
+const error = useError();
+const handleError = () => {
+  clearError({
+    redirect:
+      '/course/chapter/1-chapter-1/lesson/1-introduction-to-typescript-with-vue-js-3',
+  });
+};
+</script>

pages/course/chapter/[chapterSlug]/lesson/[lessonSlug].vue

@@ -42,12 +42,26 @@ const chapter = computed(() => {
   );
 });
 
+if (!chapter.value) {
+  throw createError({
+    statusCode: 404,
+    message: 'Chapter not found',
+  });
+}
+
 const lesson = computed(() => {
   return chapter.value.lessons.find(
     (lesson) => lesson.slug === route.params.lessonSlug
   );
 });
 
+if (!lesson.value) {
+  throw createError({
+    statusCode: 404,
+    message: 'Lesson not found',
+  });
+}
+
 const title = computed(() => {
   return `${lesson.value.title} - ${course.title}`;
 });