feat: add error handling page (#269)

* feat: add error handling page

* fix: add files to solutions

Author: splendente

content/en/2.concepts/12.error-handling/index.md

@@ -0,0 +1,7 @@
+---
+ogImage: true
+---
+
+# Error Handling
+
+// TODO:

content/ja/2.concepts/12.error-handling/.template/files/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

content/ja/2.concepts/12.error-handling/.template/files/error.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+})
+
+const handleError = () => clearError({ redirect: '/' })
+</script>
+
+<template>
+  <div>
+    <h1>{{ error.statusCode }}</h1>
+    <p>{{ error.message }}</p>
+    <button type="button" @click="handleError">
+      Clear errors
+    </button>
+  </div>
+</template>

content/ja/2.concepts/12.error-handling/.template/files/pages/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { data: todos } = useFetch('/api/todos')
+</script>
+
+<template>
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">
+      <NuxtLink :to="`/todo/${todo.id}`">
+        {{ todo.title }}
+      </NuxtLink>
+    </li>
+  </ul>
+</template>

content/ja/2.concepts/12.error-handling/.template/files/pages/todo/[id].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute()
+const id = route.params.id
+const { data } = useFetch(`/api/todos/${id}`)
+
+// Challenge
+</script>
+
+<template>
+  <h1 v-if="data">
+    {{ data.title }}
+  </h1>
+</template>

content/ja/2.concepts/12.error-handling/.template/files/server/api/todos/[id].ts

@@ -0,0 +1,7 @@
+import { data } from './index'
+
+export default defineEventHandler((event) => {
+  const id = Number(event.context.params?.id)
+  const todo = data.find(item => item.id === id)
+  return todo
+})

content/ja/2.concepts/12.error-handling/.template/files/server/api/todos/index.ts

@@ -0,0 +1,9 @@
+export const data = [
+  { id: 1, title: 'Todo 1' },
+  { id: 2, title: 'Todo 2' },
+  { id: 3, title: 'Todo 3' },
+] as const
+
+export default defineEventHandler(() => {
+  return data
+})

content/ja/2.concepts/12.error-handling/.template/index.ts

@@ -0,0 +1,8 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'pages/todo/[id].vue',
+  features: {
+    fileTree: true,
+  },
+}

content/ja/2.concepts/12.error-handling/.template/solutions/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

content/ja/2.concepts/12.error-handling/.template/solutions/error.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+})
+
+const handleError = () => clearError({ redirect: '/' })
+</script>
+
+<template>
+  <div>
+    <h1>{{ error.statusCode }}</h1>
+    <p>{{ error.message }}</p>
+    <button type="button" @click="handleError">
+      Clear errors
+    </button>
+  </div>
+</template>