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

* add content of concepts/auto-import

* update examples and solutions

* add content of concepts/middleware

Author: Mini-ghost

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}