docs: translate content form Japanese to English

content/2.concepts/4.auto-imports/.template/files/app.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const count = ref(0)
+</script>
+
+<template>
+  <button type="button" @click="count++">
+    count is: {{ count }}
+  </button>
+
+  <Counter />
+</template>

content/2.concepts/4.auto-imports/.template/files/components/Counter.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const { count, increment } = useCounter()
+</script>
+
+<template>
+  <button type="button" @click="increment">
+    count is: {{ count }}
+  </button>
+</template>

content/2.concepts/4.auto-imports/.template/files/composables/counter.ts

@@ -0,0 +1,8 @@
+export function useCounter() {
+  const count = ref(0)
+  function increment() {
+    count.value++
+  }
+
+  return { count, increment }
+}

content/2.concepts/4.auto-imports/.template/files/utils/double.ts

@@ -0,0 +1 @@
+// Challenge

content/2.concepts/4.auto-imports/.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/4.auto-imports/.template/solutions/app.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const count = ref(0)
+</script>
+
+<template>
+  <button type="button" @click="count++">
+    count is: {{ count }}
+  </button>
+
+  <p>double is: {{ double(count) }}</p>
+
+  <Counter />
+</template>

content/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const { count, increment } = useCounter()
+</script>
+
+<template>
+  <button type="button" @click="increment">
+    count is: {{ count }}
+  </button>
+</template>

content/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts

@@ -0,0 +1,8 @@
+export function useCounter() {
+  const count = ref(0)
+  function increment() {
+    count.value++
+  }
+
+  return { count, increment }
+}

content/2.concepts/4.auto-imports/.template/solutions/utils/double.ts

@@ -0,0 +1,3 @@
+export function double(n: number): number {
+  return n * 2
+}

content/2.concepts/4.auto-imports/index.md

@@ -3,3 +3,49 @@ ogImage: true
 ---
 
 # Auto Imports
+
+Auto import is also one of Nuxt's core concepts.
+
+https://nuxt.com/docs/guide/concepts/auto-imports
+
+Auto import is a feature that allows components, composables, and [Vue.js API](https://vuejs.org/api/) to be automatically imported and used throughout the application without explicit imports.\
+Unlike traditional global declarations, Nuxt retains type information, IDE autocompletion, and hints while including only what is actually used in the production code.
+
+Thanks to Nuxt's directory structure conventions, `components/`, `composables/`, and `utils/` can be automatically imported.\
+In this example, the `Counter.vue` component defined in the `components` directory and `useCounter.ts` defined in the `composables` directory are used without explicit imports.\
+In `app.vue`, the Counter component is used, and in `Counter.vue`, `useCounter()` is utilized.
+
+Additionally, Nuxt provides several components, composables, and utility functions.\
+An example is the `NuxtLink` component introduced in the [Routing](/concepts/routing) section.\
+Other examples include the `useFetch()` composable for data fetching, `useRuntimeConfig()` for accessing runtime configuration, and the `navigateTo()` utility function for page navigation.\
+Since there are many more, refer to the official Nuxt documentation for the full list in the sections on [Components](https://nuxt.com/docs/api/components), [Composables](https://nuxt.com/docs/api/composables), and [Utils](https://nuxt.com/docs/api/utils).
+
+Nuxt also supports explicit imports, which can be done using `#imports`.
+
+```ts
+import { computed, ref } from '#imports'
+
+const count = ref(1)
+const double = computed(() => count.value * 2)
+```
+
+The auto import feature can be opted out in `nuxt.config.ts`.\
+In this case, explicit imports like the one above will be required.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  imports: {
+    autoImport: false
+  }
+})
+```
+
+## Challenge
+
+Try implementing an auto-importable function in the `utils/double.ts` file.
+
+You can create any function, but as an example, let's implement a `double()` function that returns twice the given number.\
+Once you've implemented the function, use it in the template section of `app.vue` to display the doubled value on the screen.
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}

content/2.concepts/5.middleware/.template/files/app.vue

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

content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts

@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware(() => {
+  console.log('hello-foo')
+})

content/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts

@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware(() => {
+  console.log('Hello from global middleware!')
+})

content/2.concepts/5.middleware/.template/files/pages/foo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['hello-foo'],
+})
+</script>
+
+<template>
+  <h1>Foo</h1>
+  <NuxtLink to="/">
+    /Index
+  </NuxtLink>
+</template>

content/2.concepts/5.middleware/.template/files/pages/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <h1>Index</h1>
+  <NuxtLink to="/foo">
+    /Foo
+  </NuxtLink>
+</template>

content/2.concepts/5.middleware/.template/index.ts

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

content/2.concepts/5.middleware/.template/solutions/app.vue

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

content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts

@@ -0,0 +1,14 @@
+export default defineNuxtRouteMiddleware((to) => {
+  // You can also use `import.meta` to check environment
+  if (!window?.localStorage)
+    return
+
+  const isSignedIn = JSON.parse(window.localStorage.getItem('isSignedIn') || 'false')
+
+  if (!isSignedIn && to.path !== '/') {
+    return navigateTo('/')
+  }
+  else {
+    return true
+  }
+})

content/2.concepts/5.middleware/.template/solutions/pages/foo.vue

@@ -0,0 +1,6 @@
+<template>
+  <h1>Foo</h1>
+  <NuxtLink to="/">
+    /Index
+  </NuxtLink>
+</template>

content/2.concepts/5.middleware/.template/solutions/pages/index.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+function setIsSignedIn() {
+  window.localStorage.setItem('isSignedIn', JSON.stringify(true))
+}
+
+function removeIsSignedIn() {
+  window.localStorage.removeItem('isSignedIn')
+}
+</script>
+
+<template>
+  <h1>Index</h1>
+  <NuxtLink to="/foo">
+    /Foo
+  </NuxtLink>
+
+  <div>
+    <button type="button" @click="setIsSignedIn">
+      Set isSignedIn
+    </button>
+
+    <button type="button" @click="removeIsSignedIn">
+      Remove isSignedIn
+    </button>
+  </div>
+</template>

content/2.concepts/5.middleware/index.md

@@ -3,3 +3,80 @@ ogImage: true
 ---
 
 # Middleware
+
+Nuxt provides middleware that allows you to execute code before navigating to a specific route.\
+This feature is useful for cases such as restricting access to pages based on authentication status.
+
+There are two types of middleware: global middleware and named route middleware.\
+Both are implemented in the `middleware` directory.
+
+## Global Middleware
+
+Global middleware can be defined as follows:
+
+```
+├── middleware/
+│   └── hello.global.ts
+```
+
+```ts
+// middleware/hello.global.ts
+export default defineNuxtRouteMiddleware(() => {
+  console.log('hello')
+})
+```
+
+## Named route middleware
+
+Named route middleware can be defined as follows:
+
+```
+├── middleware/
+│   └── helloA.ts
+```
+
+```ts
+// middleware/hello.ts
+export default defineNuxtRouteMiddleware(() => {
+  console.log('helloA')
+})
+```
+
+```vue
+<!-- pages/a.vue -->
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['hello'],
+})
+</script>
+
+<template>
+  <h1>Hello A</h1>
+</template>
+```
+
+## Middleware Execution Timing
+
+These middleware functions are executed not only during client-side navigation but also on the server side when rendering pages with SSR or SSG.\
+If you are using client-side APIs such as local storage within middleware, you need to ensure that the middleware runs only on the client side.\
+You can determine the execution environment using `import.meta`.\
+To skip execution on the server side, use `import.meta.server`.
+
+```ts
+export default defineNuxtRouteMiddleware((to) => {
+  // Skip middleware on the server (equivalent to if (import.meta.client) { ... })
+  if (import.meta.server)
+    return
+
+  // Some processing
+  window.localStorage.setItem('key', 'value')
+})
+```
+
+## Challenge
+
+Create middleware that reads information from `localStorage` and allows access to `/foo` only if a specific value is present.\
+In this example, we will create middleware that grants access to `/foo` only if the key `isSignedIn` is set to `true`.\
+Additionally, add a button in `index.vue` to allow users to set this value.
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}