docs: translate content form Japanese to English (#214)

* docs: translate content form Japanese to English

* update style of folder structure

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Mini-ghost

content/2.concepts/10.data-fetching/.template/files/app.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { data: todos, refresh } = useFetch('/api/todos')
+</script>
+
+<template>
+  <button type="button" @click="refresh()">
+    Refresh
+  </button>
+
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">
+      {{ todo.title }}
+    </li>
+  </ul>
+</template>

content/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts

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

content/2.concepts/10.data-fetching/.template/index.ts

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

content/2.concepts/10.data-fetching/.template/solutions/app.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { data: todos, refresh } = useFetch('/api/todos')
+</script>
+
+<template>
+  <button type="button" @click="refresh()">
+    Refresh
+  </button>
+
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">
+      <span :class="{ completed: todo.completed }">{{ todo.title }}</span>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.completed {
+  text-decoration: line-through;
+}
+</style>

content/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(() => {
+  return [
+    { id: 1, title: 'Todo 1', completed: false },
+    { id: 2, title: 'Todo 2', completed: false },
+    { id: 3, title: 'Todo 3', completed: true },
+    { id: 4, title: 'Todo 4', completed: false },
+  ]
+})

content/2.concepts/10.data-fetching/index.md

@@ -4,11 +4,52 @@ ogImage: true
 
 # Data Fetching
 
-<!-- TODO:
-  - What is Data Fetching?
-  - useFetch, $fetch, useAsyncData
-  - SSR (default)
-  - CSR
-  - SSG
-  - ISR (?)
--->
+When building practical applications, data fetching is an essential feature.\
+Data fetching refers to retrieving data from APIs or databases.
+
+Nuxt provides useful functions like `useFetch`, `useAsyncData`, and `$fetch` to handle data fetching conveniently.
+
+In short:
+
+- `useFetch` is the simplest way to handle data fetching in a component's setup function.
+- `$fetch` is ideal for making network requests based on user interactions.
+- `useAsyncData` works with `$fetch` to provide more granular control.
+
+https://nuxt.com/docs/getting-started/data-fetching
+
+Among these, `useFetch` is the easiest to use. In fact, it is a convenient wrapper around `useAsyncData` and `$fetch`.
+
+Here’s how to use it:
+
+```vue
+<script setup lang="ts">
+const { data, pending, error, refresh, clear } = await useFetch('/api/modules')
+</script>
+```
+
+Specifically, it offers the following features:
+
+- Runs on both server and client\
+  Since `useFetch` works on both the server and client sides, it allows easy data fetching even during universal rendering.
+- Data caching\
+  When the API is called on the server, the data is transferred to the client, preventing redundant fetching on the client side.
+- Typed request URLs and responses\
+  By implementing the API inside the `server` directory, request URLs and response types are automatically inferred.
+
+For more details, refer to the [official documentation](https://nuxt.com/docs/api/composables/use-fetch).
+
+If you need finer control, you can use `useAsyncData` or `$fetch` for more advanced data fetching.
+
+https://nuxt.com/docs/api/composables/use-async-data
+
+https://nuxt.com/docs/api/utils/dollarfetch
+
+## Challenge
+
+1. Check that the API works
+   Add a fourth Todo item to `server/api/todos/index.ts`, then click the refresh button to verify that the data updates.
+
+2. Check type inference
+   Add a `completed` property to the Todo in `server/api/todos/index.ts`, and confirm that the `useFetch` type updates accordingly.
+
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}

content/2.concepts/6.layout/.template/files/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

content/2.concepts/6.layout/.template/files/layouts/default.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="view">
+    <header>
+      header
+    </header>
+    <main>
+      <slot />
+    </main>
+    <footer>
+      footer
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.view {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+}
+
+header {
+  background-color: #333;
+  color: white;
+  padding: 1rem;
+}
+
+main {
+  flex: 1;
+  padding: 1rem;
+}
+
+footer {
+  background-color: #333;
+  color: white;
+  padding: 1rem;
+}
+</style>

content/2.concepts/6.layout/.template/files/layouts/no-header.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="view">
+    <main>
+      <slot />
+    </main>
+    <footer>
+      footer
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.view {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+}
+
+main {
+  flex: 1;
+  padding: 1rem;
+}
+
+footer {
+  background-color: #333;
+  color: white;
+  padding: 1rem;
+}
+</style>

content/2.concepts/6.layout/.template/files/pages/foo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'no-header',
+})
+</script>
+
+<template>
+  <h1>Foo</h1>
+  <NuxtLink to="/">
+    /Index
+  </NuxtLink>
+</template>