From da33ecb2c5086384f2a684c139896ed318ef7c86 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Tue, 1 Apr 2025 21:14:12 +0900
Subject: [PATCH 1/6] feat: add basic i18n support, and port Japanese content
 from https://github.com/vuejs-jp/learn.nuxt.com

Co-authored-by: ubugeeei <ubugeeei@users.noreply.github.com>
Co-authored-by: aster-mnch <aster-mnch@users.noreply.github.com>
Co-authored-by: k-miyake <k-miyake@users.noreply.github.com>
Co-authored-by: peraichi-fujishiro <peraichi-fujishiro@users.noreply.github.com>
Co-authored-by: kotafujishiro <kotafujishiro@users.noreply.github.com>
Co-authored-by: rexhent <rexhent@users.noreply.github.com>
Co-authored-by: Archetipo95 <Archetipo95@users.noreply.github.com>
Co-authored-by: tokuda109 <tokuda109@users.noreply.github.com>
Co-authored-by: shiyuu33 <shiyuu33@users.noreply.github.com>
Co-authored-by: arashsheyda <arashsheyda@users.noreply.github.com>
Co-authored-by: RihanArfan <RihanArfan@users.noreply.github.com>
Co-authored-by: atlansien <atlansien@users.noreply.github.com>
Co-authored-by: 2nofa11 <2nofa11@users.noreply.github.com>
Co-authored-by: engineer-naito <engineer-naito@users.noreply.github.com>
Co-authored-by: hiro-xre <hiro-xre@users.noreply.github.com>
Co-authored-by: johnsoncodehk <johnsoncodehk@users.noreply.github.com>
Co-authored-by: abstractHunter <abstractHunter@users.noreply.github.com>
---
 components/TheNav.vue                         |  24 ++
 content/{ => en}/.template/files/app.vue      |   0
 content/{ => en}/.template/index.ts           |   0
 content/{ => en}/.template/solutions/app.vue  |   0
 content/{ => en}/0.index.md                   |   0
 .../{ => en}/1.vue/.template/files/app.vue    |   0
 content/{ => en}/1.vue/.template/index.ts     |   0
 content/{ => en}/1.vue/1.index.md             |   0
 .../2.reactivity/.template/files/app.vue      |   0
 .../1.vue/2.reactivity/.template/index.ts     |   0
 .../2.reactivity/.template/solutions/app.vue  |   0
 content/{ => en}/1.vue/2.reactivity/index.md  |   0
 .../3.reactivity-2/.template/files/app.vue    |   0
 .../1.vue/3.reactivity-2/.template/index.ts   |   0
 .../.template/solutions/app.vue               |   0
 .../{ => en}/1.vue/3.reactivity-2/index.md    |   0
 .../4.composition-api/.template/index.ts      |   0
 .../{ => en}/1.vue/4.composition-api/index.md |   0
 .../1.vue/5.components/.template/index.ts     |   0
 content/{ => en}/1.vue/5.components/index.md  |   0
 .../1.vue/5.summary/.template/index.ts        |   0
 content/{ => en}/1.vue/5.summary/index.md     |   0
 content/{ => en}/2.concepts/1.index.md        |   0
 .../10.data-fetching/.template/files/app.vue  |   0
 .../.template/files/server/api/todos/index.ts |   0
 .../10.data-fetching/.template/index.ts       |   0
 .../.template/solutions/app.vue               |   0
 .../solutions/server/api/todos/index.ts       |   0
 .../2.concepts/10.data-fetching/index.md      |   0
 .../2.app-vue/.template/files/app.vue         |   0
 .../2.concepts/2.app-vue/.template/index.ts   |   0
 .../{ => en}/2.concepts/2.app-vue/index.md    |   0
 .../3.routing/.template/files/app.vue         |   0
 .../3.routing/.template/files/pages/foo.vue   |   0
 .../3.routing/.template/files/pages/index.vue |   0
 .../.template/files/pages/posts/[id].vue      |   0
 .../2.concepts/3.routing/.template/index.ts   |   0
 .../{ => en}/2.concepts/3.routing/index.md    |   0
 .../4.auto-imports/.template/files/app.vue    |   0
 .../.template/files/components/Counter.vue    |   0
 .../.template/files/composables/counter.ts    |   0
 .../.template/files/utils/double.ts           |   0
 .../4.auto-imports/.template/index.ts         |   0
 .../.template/solutions/app.vue               |   0
 .../solutions/components/Counter.vue          |   0
 .../solutions/composables/counter.ts          |   0
 .../.template/solutions/utils/double.ts       |   0
 .../2.concepts/4.auto-imports/index.md        |   0
 .../5.middleware/.template/files/app.vue      |   0
 .../.template/files/middleware/hello-foo.ts   |   0
 .../files/middleware/my-middleware.global.ts  |   0
 .../.template/files/pages/foo.vue             |   0
 .../.template/files/pages/index.vue           |   0
 .../5.middleware/.template/index.ts           |   0
 .../5.middleware/.template/solutions/app.vue  |   0
 .../middleware/my-middleware.global.ts        |   0
 .../.template/solutions/pages/foo.vue         |   0
 .../.template/solutions/pages/index.vue       |   0
 .../{ => en}/2.concepts/5.middleware/index.md |   0
 .../6.layout/.template/files/app.vue          |   0
 .../.template/files/layouts/default.vue       |   0
 .../.template/files/layouts/no-header.vue     |   0
 .../6.layout/.template/files/pages/foo.vue    |   0
 .../6.layout/.template/files/pages/index.vue  |   0
 .../2.concepts/6.layout/.template/index.ts    |   0
 content/{ => en}/2.concepts/6.layout/index.md |   0
 content/{ => en}/2.concepts/7.meta/index.md   |   0
 .../8.rendering-modes/.template/files/app.vue |   0
 .../.template/files/pages/foo.vue             |   0
 .../.template/files/pages/index.vue           |   0
 .../8.rendering-modes/.template/index.ts      |   0
 .../.template/solutions/app.vue               |   0
 .../.template/solutions/nuxt.config.ts        |   0
 .../.template/solutions/pages/foo.vue         |   0
 .../.template/solutions/pages/index.vue       |   0
 .../2.concepts/8.rendering-modes/index.md     |   0
 .../.template/files/app.vue                   |   0
 .../.template/files/components/CounterA.vue   |   0
 .../.template/files/components/CounterB.vue   |   0
 .../9.state-manegement/.template/index.ts     |   0
 .../2.concepts/9.state-manegement/index.md    |   0
 content/ja/.template/files/app.vue            |   7 +
 content/ja/.template/index.ts                 |  10 +
 content/ja/.template/solutions/app.vue        |   8 +
 content/ja/0.index.md                         |  49 +++
 content/ja/1.vue/.template/files/app.vue      |  16 +
 content/ja/1.vue/.template/index.ts           |  10 +
 content/ja/1.vue/1.index.md                   |  22 +
 .../2.reactivity/.template/files/app.vue      |  18 +
 .../ja/1.vue/2.reactivity/.template/index.ts  |  10 +
 .../2.reactivity/.template/solutions/app.vue  |  26 ++
 content/ja/1.vue/2.reactivity/index.md        |  40 ++
 .../3.reactivity-2/.template/files/app.vue    |  42 ++
 .../1.vue/3.reactivity-2/.template/index.ts   |  10 +
 .../.template/solutions/app.vue               |  41 ++
 content/ja/1.vue/3.reactivity-2/index.md      |  37 ++
 .../4.composition-api/.template/files/app.vue |  18 +
 .../.template/files/composables/useCounter.ts |   1 +
 .../4.composition-api/.template/index.ts      |  10 +
 .../.template/solutions/app.vue               |  13 +
 .../solutions/composables/useCounter.ts       |  10 +
 content/ja/1.vue/4.composition-api/index.md   |  26 ++
 .../5.components/.template/files/Child.vue    |  29 ++
 .../5.components/.template/files/app.vue      |  21 +
 .../ja/1.vue/5.components/.template/index.ts  |  10 +
 .../.template/solutions/Child.vue             |  33 ++
 .../5.components/.template/solutions/app.vue  |  30 ++
 content/ja/1.vue/5.components/index.md        | 195 +++++++++
 content/ja/1.vue/6.summary/.template/index.ts |  10 +
 content/ja/1.vue/6.summary/index.md           |   5 +
 content/ja/2.concepts/1.index.md              |  29 ++
 .../2.app-vue/.template/files/app.vue         |   7 +
 .../2.concepts/2.app-vue/.template/index.ts   |  10 +
 content/ja/2.concepts/2.app-vue/index.md      |  18 +
 .../3.routing/.template/files/app.vue         |   3 +
 .../3.routing/.template/files/pages/foo.vue   |  12 +
 .../3.routing/.template/files/pages/index.vue |  12 +
 .../.template/files/pages/posts/[id].vue      |   4 +
 .../2.concepts/3.routing/.template/index.ts   |   9 +
 .../3.routing/.template/solutions/app.vue     |   3 +
 .../.template/solutions/pages/foo.vue         |  17 +
 .../.template/solutions/pages/index.vue       |  17 +
 .../.template/solutions/pages/posts/[id].vue  |  21 +
 content/ja/2.concepts/3.routing/index.md      |  58 +++
 .../4.auto-imports/.template/files/app.vue    |  11 +
 .../.template/files/components/Counter.vue    |   9 +
 .../.template/files/composables/counter.ts    |   8 +
 .../.template/files/utils/double.ts           |   1 +
 .../4.auto-imports/.template/index.ts         |   8 +
 .../.template/solutions/app.vue               |  13 +
 .../solutions/components/Counter.vue          |   9 +
 .../solutions/composables/counter.ts          |   8 +
 .../.template/solutions/utils/double.ts       |   3 +
 content/ja/2.concepts/4.auto-imports/index.md |  51 +++
 .../5.middleware/.template/files/app.vue      |   3 +
 .../.template/files/middleware/hello-foo.ts   |   3 +
 .../files/middleware/my-middleware.global.ts  |   3 +
 .../.template/files/pages/foo.vue             |  12 +
 .../.template/files/pages/index.vue           |   6 +
 .../5.middleware/.template/index.ts           |   8 +
 .../5.middleware/.template/solutions/app.vue  |   3 +
 .../middleware/my-middleware.global.ts        |  14 +
 .../.template/solutions/pages/foo.vue         |   6 +
 .../.template/solutions/pages/index.vue       |  26 ++
 content/ja/2.concepts/5.middleware/index.md   |  82 ++++
 .../6.layout/.template/files/app.vue          |   5 +
 .../.template/files/layouts/default.vue       |  39 ++
 .../.template/files/layouts/no-header.vue     |  30 ++
 .../6.layout/.template/files/pages/foo.vue    |  12 +
 .../6.layout/.template/files/pages/index.vue  |   6 +
 .../ja/2.concepts/6.layout/.template/index.ts |   8 +
 content/ja/2.concepts/6.layout/index.md       |  43 ++
 .../7.rendering-modes/.template/files/app.vue |  14 +
 .../.template/files/pages/foo.vue             |   9 +
 .../.template/files/pages/index.vue           |   9 +
 .../7.rendering-modes/.template/index.ts      |   9 +
 .../.template/solutions/app.vue               |   3 +
 .../.template/solutions/nuxt.config.ts        |   5 +
 .../.template/solutions/pages/foo.vue         |  13 +
 .../.template/solutions/pages/index.vue       |  13 +
 .../ja/2.concepts/7.rendering-modes/index.md  | 130 ++++++
 .../.template/files/app.vue                   |   4 +
 .../.template/files/components/CounterA.vue   |  13 +
 .../.template/files/components/CounterB.vue   |  13 +
 .../8.state-manegement/.template/index.ts     |   8 +
 .../ja/2.concepts/8.state-manegement/index.md |  32 ++
 .../9.data-fetching/.template/files/app.vue   |  15 +
 .../.template/files/server/api/todos/index.ts |   7 +
 .../9.data-fetching/.template/index.ts        |   8 +
 .../.template/solutions/app.vue               |  21 +
 .../solutions/server/api/todos/index.ts       |   8 +
 .../ja/2.concepts/9.data-fetching/index.md    |  54 +++
 i18n.config.ts                                |  11 +
 middleware/index.global.ts                    |   5 +
 nuxt.config.ts                                |  23 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                | 386 ++++++++++++++++++
 pnpm-workspace.yaml                           |  16 +
 178 files changed, 2260 insertions(+), 1 deletion(-)
 rename content/{ => en}/.template/files/app.vue (100%)
 rename content/{ => en}/.template/index.ts (100%)
 rename content/{ => en}/.template/solutions/app.vue (100%)
 rename content/{ => en}/0.index.md (100%)
 rename content/{ => en}/1.vue/.template/files/app.vue (100%)
 rename content/{ => en}/1.vue/.template/index.ts (100%)
 rename content/{ => en}/1.vue/1.index.md (100%)
 rename content/{ => en}/1.vue/2.reactivity/.template/files/app.vue (100%)
 rename content/{ => en}/1.vue/2.reactivity/.template/index.ts (100%)
 rename content/{ => en}/1.vue/2.reactivity/.template/solutions/app.vue (100%)
 rename content/{ => en}/1.vue/2.reactivity/index.md (100%)
 rename content/{ => en}/1.vue/3.reactivity-2/.template/files/app.vue (100%)
 rename content/{ => en}/1.vue/3.reactivity-2/.template/index.ts (100%)
 rename content/{ => en}/1.vue/3.reactivity-2/.template/solutions/app.vue (100%)
 rename content/{ => en}/1.vue/3.reactivity-2/index.md (100%)
 rename content/{ => en}/1.vue/4.composition-api/.template/index.ts (100%)
 rename content/{ => en}/1.vue/4.composition-api/index.md (100%)
 rename content/{ => en}/1.vue/5.components/.template/index.ts (100%)
 rename content/{ => en}/1.vue/5.components/index.md (100%)
 rename content/{ => en}/1.vue/5.summary/.template/index.ts (100%)
 rename content/{ => en}/1.vue/5.summary/index.md (100%)
 rename content/{ => en}/2.concepts/1.index.md (100%)
 rename content/{ => en}/2.concepts/10.data-fetching/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts (100%)
 rename content/{ => en}/2.concepts/10.data-fetching/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/10.data-fetching/.template/solutions/app.vue (100%)
 rename content/{ => en}/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts (100%)
 rename content/{ => en}/2.concepts/10.data-fetching/index.md (100%)
 rename content/{ => en}/2.concepts/2.app-vue/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/2.app-vue/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/2.app-vue/index.md (100%)
 rename content/{ => en}/2.concepts/3.routing/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/3.routing/.template/files/pages/foo.vue (100%)
 rename content/{ => en}/2.concepts/3.routing/.template/files/pages/index.vue (100%)
 rename content/{ => en}/2.concepts/3.routing/.template/files/pages/posts/[id].vue (100%)
 rename content/{ => en}/2.concepts/3.routing/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/3.routing/index.md (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/files/components/Counter.vue (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/files/composables/counter.ts (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/files/utils/double.ts (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/solutions/app.vue (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/.template/solutions/utils/double.ts (100%)
 rename content/{ => en}/2.concepts/4.auto-imports/index.md (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/files/pages/foo.vue (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/files/pages/index.vue (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/solutions/app.vue (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/solutions/pages/foo.vue (100%)
 rename content/{ => en}/2.concepts/5.middleware/.template/solutions/pages/index.vue (100%)
 rename content/{ => en}/2.concepts/5.middleware/index.md (100%)
 rename content/{ => en}/2.concepts/6.layout/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/6.layout/.template/files/layouts/default.vue (100%)
 rename content/{ => en}/2.concepts/6.layout/.template/files/layouts/no-header.vue (100%)
 rename content/{ => en}/2.concepts/6.layout/.template/files/pages/foo.vue (100%)
 rename content/{ => en}/2.concepts/6.layout/.template/files/pages/index.vue (100%)
 rename content/{ => en}/2.concepts/6.layout/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/6.layout/index.md (100%)
 rename content/{ => en}/2.concepts/7.meta/index.md (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/files/pages/foo.vue (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/files/pages/index.vue (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/solutions/app.vue (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue (100%)
 rename content/{ => en}/2.concepts/8.rendering-modes/index.md (100%)
 rename content/{ => en}/2.concepts/9.state-manegement/.template/files/app.vue (100%)
 rename content/{ => en}/2.concepts/9.state-manegement/.template/files/components/CounterA.vue (100%)
 rename content/{ => en}/2.concepts/9.state-manegement/.template/files/components/CounterB.vue (100%)
 rename content/{ => en}/2.concepts/9.state-manegement/.template/index.ts (100%)
 rename content/{ => en}/2.concepts/9.state-manegement/index.md (100%)
 create mode 100644 content/ja/.template/files/app.vue
 create mode 100644 content/ja/.template/index.ts
 create mode 100644 content/ja/.template/solutions/app.vue
 create mode 100644 content/ja/0.index.md
 create mode 100644 content/ja/1.vue/.template/files/app.vue
 create mode 100644 content/ja/1.vue/.template/index.ts
 create mode 100644 content/ja/1.vue/1.index.md
 create mode 100644 content/ja/1.vue/2.reactivity/.template/files/app.vue
 create mode 100644 content/ja/1.vue/2.reactivity/.template/index.ts
 create mode 100644 content/ja/1.vue/2.reactivity/.template/solutions/app.vue
 create mode 100644 content/ja/1.vue/2.reactivity/index.md
 create mode 100644 content/ja/1.vue/3.reactivity-2/.template/files/app.vue
 create mode 100644 content/ja/1.vue/3.reactivity-2/.template/index.ts
 create mode 100644 content/ja/1.vue/3.reactivity-2/.template/solutions/app.vue
 create mode 100644 content/ja/1.vue/3.reactivity-2/index.md
 create mode 100644 content/ja/1.vue/4.composition-api/.template/files/app.vue
 create mode 100644 content/ja/1.vue/4.composition-api/.template/files/composables/useCounter.ts
 create mode 100644 content/ja/1.vue/4.composition-api/.template/index.ts
 create mode 100644 content/ja/1.vue/4.composition-api/.template/solutions/app.vue
 create mode 100644 content/ja/1.vue/4.composition-api/.template/solutions/composables/useCounter.ts
 create mode 100644 content/ja/1.vue/4.composition-api/index.md
 create mode 100644 content/ja/1.vue/5.components/.template/files/Child.vue
 create mode 100644 content/ja/1.vue/5.components/.template/files/app.vue
 create mode 100644 content/ja/1.vue/5.components/.template/index.ts
 create mode 100644 content/ja/1.vue/5.components/.template/solutions/Child.vue
 create mode 100644 content/ja/1.vue/5.components/.template/solutions/app.vue
 create mode 100644 content/ja/1.vue/5.components/index.md
 create mode 100644 content/ja/1.vue/6.summary/.template/index.ts
 create mode 100644 content/ja/1.vue/6.summary/index.md
 create mode 100644 content/ja/2.concepts/1.index.md
 create mode 100644 content/ja/2.concepts/2.app-vue/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/2.app-vue/.template/index.ts
 create mode 100644 content/ja/2.concepts/2.app-vue/index.md
 create mode 100644 content/ja/2.concepts/3.routing/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/3.routing/.template/files/pages/foo.vue
 create mode 100644 content/ja/2.concepts/3.routing/.template/files/pages/index.vue
 create mode 100644 content/ja/2.concepts/3.routing/.template/files/pages/posts/[id].vue
 create mode 100644 content/ja/2.concepts/3.routing/.template/index.ts
 create mode 100644 content/ja/2.concepts/3.routing/.template/solutions/app.vue
 create mode 100644 content/ja/2.concepts/3.routing/.template/solutions/pages/foo.vue
 create mode 100644 content/ja/2.concepts/3.routing/.template/solutions/pages/index.vue
 create mode 100644 content/ja/2.concepts/3.routing/.template/solutions/pages/posts/[id].vue
 create mode 100644 content/ja/2.concepts/3.routing/index.md
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/files/components/Counter.vue
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/files/composables/counter.ts
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/files/utils/double.ts
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/index.ts
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/solutions/app.vue
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts
 create mode 100644 content/ja/2.concepts/4.auto-imports/.template/solutions/utils/double.ts
 create mode 100644 content/ja/2.concepts/4.auto-imports/index.md
 create mode 100644 content/ja/2.concepts/5.middleware/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
 create mode 100644 content/ja/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts
 create mode 100644 content/ja/2.concepts/5.middleware/.template/files/pages/foo.vue
 create mode 100644 content/ja/2.concepts/5.middleware/.template/files/pages/index.vue
 create mode 100644 content/ja/2.concepts/5.middleware/.template/index.ts
 create mode 100644 content/ja/2.concepts/5.middleware/.template/solutions/app.vue
 create mode 100644 content/ja/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
 create mode 100644 content/ja/2.concepts/5.middleware/.template/solutions/pages/foo.vue
 create mode 100644 content/ja/2.concepts/5.middleware/.template/solutions/pages/index.vue
 create mode 100644 content/ja/2.concepts/5.middleware/index.md
 create mode 100644 content/ja/2.concepts/6.layout/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/6.layout/.template/files/layouts/default.vue
 create mode 100644 content/ja/2.concepts/6.layout/.template/files/layouts/no-header.vue
 create mode 100644 content/ja/2.concepts/6.layout/.template/files/pages/foo.vue
 create mode 100644 content/ja/2.concepts/6.layout/.template/files/pages/index.vue
 create mode 100644 content/ja/2.concepts/6.layout/.template/index.ts
 create mode 100644 content/ja/2.concepts/6.layout/index.md
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/files/pages/foo.vue
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/files/pages/index.vue
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/index.ts
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/solutions/app.vue
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/solutions/nuxt.config.ts
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/foo.vue
 create mode 100644 content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/index.vue
 create mode 100644 content/ja/2.concepts/7.rendering-modes/index.md
 create mode 100644 content/ja/2.concepts/8.state-manegement/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/8.state-manegement/.template/files/components/CounterA.vue
 create mode 100644 content/ja/2.concepts/8.state-manegement/.template/files/components/CounterB.vue
 create mode 100644 content/ja/2.concepts/8.state-manegement/.template/index.ts
 create mode 100644 content/ja/2.concepts/8.state-manegement/index.md
 create mode 100644 content/ja/2.concepts/9.data-fetching/.template/files/app.vue
 create mode 100644 content/ja/2.concepts/9.data-fetching/.template/files/server/api/todos/index.ts
 create mode 100644 content/ja/2.concepts/9.data-fetching/.template/index.ts
 create mode 100644 content/ja/2.concepts/9.data-fetching/.template/solutions/app.vue
 create mode 100644 content/ja/2.concepts/9.data-fetching/.template/solutions/server/api/todos/index.ts
 create mode 100644 content/ja/2.concepts/9.data-fetching/index.md
 create mode 100644 i18n.config.ts
 create mode 100644 middleware/index.global.ts

diff --git a/components/TheNav.vue b/components/TheNav.vue
index aea33bc9..58b3a070 100644
--- a/components/TheNav.vue
+++ b/components/TheNav.vue
@@ -21,6 +21,8 @@ function downloadCurrentGuide() {
   downloadZip(play.webcontainer, guide.ignoredFiles)
 }
 
+const i18n = useI18n()
+
 addCommands(
   {
     id: 'download-zip',
@@ -65,6 +67,28 @@ addCommands(
       flex="~ gap-1 items-center"
       :class="guide.embeddedDocs ? 'z-embedded-docs-raised' : ''"
     >
+      <VDropdown :distance="6">
+        <button
+          rounded p2
+          hover="bg-active"
+          title="Languages"
+        >
+          <div i-ph-translate-duotone text-2xl />
+        </button>
+        <template #popper>
+          <div flex="~ col gap-y-1" p2>
+            <button
+              v-for="locale of i18n.locales.value" :key="locale.code"
+              rounded px2 py1
+              hover="bg-active"
+              :class="locale.code === i18n.locale.value ? 'text-primary' : ''"
+              @click="i18n.setLocale(locale.code)"
+            >
+              {{ locale.name }}
+            </button>
+          </div>
+        </template>
+      </VDropdown>
       <button
         rounded p2
         hover="bg-active"
diff --git a/content/.template/files/app.vue b/content/en/.template/files/app.vue
similarity index 100%
rename from content/.template/files/app.vue
rename to content/en/.template/files/app.vue
diff --git a/content/.template/index.ts b/content/en/.template/index.ts
similarity index 100%
rename from content/.template/index.ts
rename to content/en/.template/index.ts
diff --git a/content/.template/solutions/app.vue b/content/en/.template/solutions/app.vue
similarity index 100%
rename from content/.template/solutions/app.vue
rename to content/en/.template/solutions/app.vue
diff --git a/content/0.index.md b/content/en/0.index.md
similarity index 100%
rename from content/0.index.md
rename to content/en/0.index.md
diff --git a/content/1.vue/.template/files/app.vue b/content/en/1.vue/.template/files/app.vue
similarity index 100%
rename from content/1.vue/.template/files/app.vue
rename to content/en/1.vue/.template/files/app.vue
diff --git a/content/1.vue/.template/index.ts b/content/en/1.vue/.template/index.ts
similarity index 100%
rename from content/1.vue/.template/index.ts
rename to content/en/1.vue/.template/index.ts
diff --git a/content/1.vue/1.index.md b/content/en/1.vue/1.index.md
similarity index 100%
rename from content/1.vue/1.index.md
rename to content/en/1.vue/1.index.md
diff --git a/content/1.vue/2.reactivity/.template/files/app.vue b/content/en/1.vue/2.reactivity/.template/files/app.vue
similarity index 100%
rename from content/1.vue/2.reactivity/.template/files/app.vue
rename to content/en/1.vue/2.reactivity/.template/files/app.vue
diff --git a/content/1.vue/2.reactivity/.template/index.ts b/content/en/1.vue/2.reactivity/.template/index.ts
similarity index 100%
rename from content/1.vue/2.reactivity/.template/index.ts
rename to content/en/1.vue/2.reactivity/.template/index.ts
diff --git a/content/1.vue/2.reactivity/.template/solutions/app.vue b/content/en/1.vue/2.reactivity/.template/solutions/app.vue
similarity index 100%
rename from content/1.vue/2.reactivity/.template/solutions/app.vue
rename to content/en/1.vue/2.reactivity/.template/solutions/app.vue
diff --git a/content/1.vue/2.reactivity/index.md b/content/en/1.vue/2.reactivity/index.md
similarity index 100%
rename from content/1.vue/2.reactivity/index.md
rename to content/en/1.vue/2.reactivity/index.md
diff --git a/content/1.vue/3.reactivity-2/.template/files/app.vue b/content/en/1.vue/3.reactivity-2/.template/files/app.vue
similarity index 100%
rename from content/1.vue/3.reactivity-2/.template/files/app.vue
rename to content/en/1.vue/3.reactivity-2/.template/files/app.vue
diff --git a/content/1.vue/3.reactivity-2/.template/index.ts b/content/en/1.vue/3.reactivity-2/.template/index.ts
similarity index 100%
rename from content/1.vue/3.reactivity-2/.template/index.ts
rename to content/en/1.vue/3.reactivity-2/.template/index.ts
diff --git a/content/1.vue/3.reactivity-2/.template/solutions/app.vue b/content/en/1.vue/3.reactivity-2/.template/solutions/app.vue
similarity index 100%
rename from content/1.vue/3.reactivity-2/.template/solutions/app.vue
rename to content/en/1.vue/3.reactivity-2/.template/solutions/app.vue
diff --git a/content/1.vue/3.reactivity-2/index.md b/content/en/1.vue/3.reactivity-2/index.md
similarity index 100%
rename from content/1.vue/3.reactivity-2/index.md
rename to content/en/1.vue/3.reactivity-2/index.md
diff --git a/content/1.vue/4.composition-api/.template/index.ts b/content/en/1.vue/4.composition-api/.template/index.ts
similarity index 100%
rename from content/1.vue/4.composition-api/.template/index.ts
rename to content/en/1.vue/4.composition-api/.template/index.ts
diff --git a/content/1.vue/4.composition-api/index.md b/content/en/1.vue/4.composition-api/index.md
similarity index 100%
rename from content/1.vue/4.composition-api/index.md
rename to content/en/1.vue/4.composition-api/index.md
diff --git a/content/1.vue/5.components/.template/index.ts b/content/en/1.vue/5.components/.template/index.ts
similarity index 100%
rename from content/1.vue/5.components/.template/index.ts
rename to content/en/1.vue/5.components/.template/index.ts
diff --git a/content/1.vue/5.components/index.md b/content/en/1.vue/5.components/index.md
similarity index 100%
rename from content/1.vue/5.components/index.md
rename to content/en/1.vue/5.components/index.md
diff --git a/content/1.vue/5.summary/.template/index.ts b/content/en/1.vue/5.summary/.template/index.ts
similarity index 100%
rename from content/1.vue/5.summary/.template/index.ts
rename to content/en/1.vue/5.summary/.template/index.ts
diff --git a/content/1.vue/5.summary/index.md b/content/en/1.vue/5.summary/index.md
similarity index 100%
rename from content/1.vue/5.summary/index.md
rename to content/en/1.vue/5.summary/index.md
diff --git a/content/2.concepts/1.index.md b/content/en/2.concepts/1.index.md
similarity index 100%
rename from content/2.concepts/1.index.md
rename to content/en/2.concepts/1.index.md
diff --git a/content/2.concepts/10.data-fetching/.template/files/app.vue b/content/en/2.concepts/10.data-fetching/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/10.data-fetching/.template/files/app.vue
rename to content/en/2.concepts/10.data-fetching/.template/files/app.vue
diff --git a/content/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts b/content/en/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts
similarity index 100%
rename from content/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts
rename to content/en/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts
diff --git a/content/2.concepts/10.data-fetching/.template/index.ts b/content/en/2.concepts/10.data-fetching/.template/index.ts
similarity index 100%
rename from content/2.concepts/10.data-fetching/.template/index.ts
rename to content/en/2.concepts/10.data-fetching/.template/index.ts
diff --git a/content/2.concepts/10.data-fetching/.template/solutions/app.vue b/content/en/2.concepts/10.data-fetching/.template/solutions/app.vue
similarity index 100%
rename from content/2.concepts/10.data-fetching/.template/solutions/app.vue
rename to content/en/2.concepts/10.data-fetching/.template/solutions/app.vue
diff --git a/content/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts b/content/en/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts
similarity index 100%
rename from content/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts
rename to content/en/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts
diff --git a/content/2.concepts/10.data-fetching/index.md b/content/en/2.concepts/10.data-fetching/index.md
similarity index 100%
rename from content/2.concepts/10.data-fetching/index.md
rename to content/en/2.concepts/10.data-fetching/index.md
diff --git a/content/2.concepts/2.app-vue/.template/files/app.vue b/content/en/2.concepts/2.app-vue/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/2.app-vue/.template/files/app.vue
rename to content/en/2.concepts/2.app-vue/.template/files/app.vue
diff --git a/content/2.concepts/2.app-vue/.template/index.ts b/content/en/2.concepts/2.app-vue/.template/index.ts
similarity index 100%
rename from content/2.concepts/2.app-vue/.template/index.ts
rename to content/en/2.concepts/2.app-vue/.template/index.ts
diff --git a/content/2.concepts/2.app-vue/index.md b/content/en/2.concepts/2.app-vue/index.md
similarity index 100%
rename from content/2.concepts/2.app-vue/index.md
rename to content/en/2.concepts/2.app-vue/index.md
diff --git a/content/2.concepts/3.routing/.template/files/app.vue b/content/en/2.concepts/3.routing/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/3.routing/.template/files/app.vue
rename to content/en/2.concepts/3.routing/.template/files/app.vue
diff --git a/content/2.concepts/3.routing/.template/files/pages/foo.vue b/content/en/2.concepts/3.routing/.template/files/pages/foo.vue
similarity index 100%
rename from content/2.concepts/3.routing/.template/files/pages/foo.vue
rename to content/en/2.concepts/3.routing/.template/files/pages/foo.vue
diff --git a/content/2.concepts/3.routing/.template/files/pages/index.vue b/content/en/2.concepts/3.routing/.template/files/pages/index.vue
similarity index 100%
rename from content/2.concepts/3.routing/.template/files/pages/index.vue
rename to content/en/2.concepts/3.routing/.template/files/pages/index.vue
diff --git a/content/2.concepts/3.routing/.template/files/pages/posts/[id].vue b/content/en/2.concepts/3.routing/.template/files/pages/posts/[id].vue
similarity index 100%
rename from content/2.concepts/3.routing/.template/files/pages/posts/[id].vue
rename to content/en/2.concepts/3.routing/.template/files/pages/posts/[id].vue
diff --git a/content/2.concepts/3.routing/.template/index.ts b/content/en/2.concepts/3.routing/.template/index.ts
similarity index 100%
rename from content/2.concepts/3.routing/.template/index.ts
rename to content/en/2.concepts/3.routing/.template/index.ts
diff --git a/content/2.concepts/3.routing/index.md b/content/en/2.concepts/3.routing/index.md
similarity index 100%
rename from content/2.concepts/3.routing/index.md
rename to content/en/2.concepts/3.routing/index.md
diff --git a/content/2.concepts/4.auto-imports/.template/files/app.vue b/content/en/2.concepts/4.auto-imports/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/files/app.vue
rename to content/en/2.concepts/4.auto-imports/.template/files/app.vue
diff --git a/content/2.concepts/4.auto-imports/.template/files/components/Counter.vue b/content/en/2.concepts/4.auto-imports/.template/files/components/Counter.vue
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/files/components/Counter.vue
rename to content/en/2.concepts/4.auto-imports/.template/files/components/Counter.vue
diff --git a/content/2.concepts/4.auto-imports/.template/files/composables/counter.ts b/content/en/2.concepts/4.auto-imports/.template/files/composables/counter.ts
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/files/composables/counter.ts
rename to content/en/2.concepts/4.auto-imports/.template/files/composables/counter.ts
diff --git a/content/2.concepts/4.auto-imports/.template/files/utils/double.ts b/content/en/2.concepts/4.auto-imports/.template/files/utils/double.ts
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/files/utils/double.ts
rename to content/en/2.concepts/4.auto-imports/.template/files/utils/double.ts
diff --git a/content/2.concepts/4.auto-imports/.template/index.ts b/content/en/2.concepts/4.auto-imports/.template/index.ts
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/index.ts
rename to content/en/2.concepts/4.auto-imports/.template/index.ts
diff --git a/content/2.concepts/4.auto-imports/.template/solutions/app.vue b/content/en/2.concepts/4.auto-imports/.template/solutions/app.vue
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/solutions/app.vue
rename to content/en/2.concepts/4.auto-imports/.template/solutions/app.vue
diff --git a/content/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue b/content/en/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue
rename to content/en/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue
diff --git a/content/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts b/content/en/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts
rename to content/en/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts
diff --git a/content/2.concepts/4.auto-imports/.template/solutions/utils/double.ts b/content/en/2.concepts/4.auto-imports/.template/solutions/utils/double.ts
similarity index 100%
rename from content/2.concepts/4.auto-imports/.template/solutions/utils/double.ts
rename to content/en/2.concepts/4.auto-imports/.template/solutions/utils/double.ts
diff --git a/content/2.concepts/4.auto-imports/index.md b/content/en/2.concepts/4.auto-imports/index.md
similarity index 100%
rename from content/2.concepts/4.auto-imports/index.md
rename to content/en/2.concepts/4.auto-imports/index.md
diff --git a/content/2.concepts/5.middleware/.template/files/app.vue b/content/en/2.concepts/5.middleware/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/5.middleware/.template/files/app.vue
rename to content/en/2.concepts/5.middleware/.template/files/app.vue
diff --git a/content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts b/content/en/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
similarity index 100%
rename from content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
rename to content/en/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
diff --git a/content/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts b/content/en/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts
similarity index 100%
rename from content/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts
rename to content/en/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts
diff --git a/content/2.concepts/5.middleware/.template/files/pages/foo.vue b/content/en/2.concepts/5.middleware/.template/files/pages/foo.vue
similarity index 100%
rename from content/2.concepts/5.middleware/.template/files/pages/foo.vue
rename to content/en/2.concepts/5.middleware/.template/files/pages/foo.vue
diff --git a/content/2.concepts/5.middleware/.template/files/pages/index.vue b/content/en/2.concepts/5.middleware/.template/files/pages/index.vue
similarity index 100%
rename from content/2.concepts/5.middleware/.template/files/pages/index.vue
rename to content/en/2.concepts/5.middleware/.template/files/pages/index.vue
diff --git a/content/2.concepts/5.middleware/.template/index.ts b/content/en/2.concepts/5.middleware/.template/index.ts
similarity index 100%
rename from content/2.concepts/5.middleware/.template/index.ts
rename to content/en/2.concepts/5.middleware/.template/index.ts
diff --git a/content/2.concepts/5.middleware/.template/solutions/app.vue b/content/en/2.concepts/5.middleware/.template/solutions/app.vue
similarity index 100%
rename from content/2.concepts/5.middleware/.template/solutions/app.vue
rename to content/en/2.concepts/5.middleware/.template/solutions/app.vue
diff --git a/content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts b/content/en/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
similarity index 100%
rename from content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
rename to content/en/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
diff --git a/content/2.concepts/5.middleware/.template/solutions/pages/foo.vue b/content/en/2.concepts/5.middleware/.template/solutions/pages/foo.vue
similarity index 100%
rename from content/2.concepts/5.middleware/.template/solutions/pages/foo.vue
rename to content/en/2.concepts/5.middleware/.template/solutions/pages/foo.vue
diff --git a/content/2.concepts/5.middleware/.template/solutions/pages/index.vue b/content/en/2.concepts/5.middleware/.template/solutions/pages/index.vue
similarity index 100%
rename from content/2.concepts/5.middleware/.template/solutions/pages/index.vue
rename to content/en/2.concepts/5.middleware/.template/solutions/pages/index.vue
diff --git a/content/2.concepts/5.middleware/index.md b/content/en/2.concepts/5.middleware/index.md
similarity index 100%
rename from content/2.concepts/5.middleware/index.md
rename to content/en/2.concepts/5.middleware/index.md
diff --git a/content/2.concepts/6.layout/.template/files/app.vue b/content/en/2.concepts/6.layout/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/6.layout/.template/files/app.vue
rename to content/en/2.concepts/6.layout/.template/files/app.vue
diff --git a/content/2.concepts/6.layout/.template/files/layouts/default.vue b/content/en/2.concepts/6.layout/.template/files/layouts/default.vue
similarity index 100%
rename from content/2.concepts/6.layout/.template/files/layouts/default.vue
rename to content/en/2.concepts/6.layout/.template/files/layouts/default.vue
diff --git a/content/2.concepts/6.layout/.template/files/layouts/no-header.vue b/content/en/2.concepts/6.layout/.template/files/layouts/no-header.vue
similarity index 100%
rename from content/2.concepts/6.layout/.template/files/layouts/no-header.vue
rename to content/en/2.concepts/6.layout/.template/files/layouts/no-header.vue
diff --git a/content/2.concepts/6.layout/.template/files/pages/foo.vue b/content/en/2.concepts/6.layout/.template/files/pages/foo.vue
similarity index 100%
rename from content/2.concepts/6.layout/.template/files/pages/foo.vue
rename to content/en/2.concepts/6.layout/.template/files/pages/foo.vue
diff --git a/content/2.concepts/6.layout/.template/files/pages/index.vue b/content/en/2.concepts/6.layout/.template/files/pages/index.vue
similarity index 100%
rename from content/2.concepts/6.layout/.template/files/pages/index.vue
rename to content/en/2.concepts/6.layout/.template/files/pages/index.vue
diff --git a/content/2.concepts/6.layout/.template/index.ts b/content/en/2.concepts/6.layout/.template/index.ts
similarity index 100%
rename from content/2.concepts/6.layout/.template/index.ts
rename to content/en/2.concepts/6.layout/.template/index.ts
diff --git a/content/2.concepts/6.layout/index.md b/content/en/2.concepts/6.layout/index.md
similarity index 100%
rename from content/2.concepts/6.layout/index.md
rename to content/en/2.concepts/6.layout/index.md
diff --git a/content/2.concepts/7.meta/index.md b/content/en/2.concepts/7.meta/index.md
similarity index 100%
rename from content/2.concepts/7.meta/index.md
rename to content/en/2.concepts/7.meta/index.md
diff --git a/content/2.concepts/8.rendering-modes/.template/files/app.vue b/content/en/2.concepts/8.rendering-modes/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/files/app.vue
rename to content/en/2.concepts/8.rendering-modes/.template/files/app.vue
diff --git a/content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue b/content/en/2.concepts/8.rendering-modes/.template/files/pages/foo.vue
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue
rename to content/en/2.concepts/8.rendering-modes/.template/files/pages/foo.vue
diff --git a/content/2.concepts/8.rendering-modes/.template/files/pages/index.vue b/content/en/2.concepts/8.rendering-modes/.template/files/pages/index.vue
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/files/pages/index.vue
rename to content/en/2.concepts/8.rendering-modes/.template/files/pages/index.vue
diff --git a/content/2.concepts/8.rendering-modes/.template/index.ts b/content/en/2.concepts/8.rendering-modes/.template/index.ts
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/index.ts
rename to content/en/2.concepts/8.rendering-modes/.template/index.ts
diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/app.vue b/content/en/2.concepts/8.rendering-modes/.template/solutions/app.vue
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/solutions/app.vue
rename to content/en/2.concepts/8.rendering-modes/.template/solutions/app.vue
diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts b/content/en/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts
rename to content/en/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts
diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue b/content/en/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue
rename to content/en/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue
diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue b/content/en/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue
similarity index 100%
rename from content/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue
rename to content/en/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue
diff --git a/content/2.concepts/8.rendering-modes/index.md b/content/en/2.concepts/8.rendering-modes/index.md
similarity index 100%
rename from content/2.concepts/8.rendering-modes/index.md
rename to content/en/2.concepts/8.rendering-modes/index.md
diff --git a/content/2.concepts/9.state-manegement/.template/files/app.vue b/content/en/2.concepts/9.state-manegement/.template/files/app.vue
similarity index 100%
rename from content/2.concepts/9.state-manegement/.template/files/app.vue
rename to content/en/2.concepts/9.state-manegement/.template/files/app.vue
diff --git a/content/2.concepts/9.state-manegement/.template/files/components/CounterA.vue b/content/en/2.concepts/9.state-manegement/.template/files/components/CounterA.vue
similarity index 100%
rename from content/2.concepts/9.state-manegement/.template/files/components/CounterA.vue
rename to content/en/2.concepts/9.state-manegement/.template/files/components/CounterA.vue
diff --git a/content/2.concepts/9.state-manegement/.template/files/components/CounterB.vue b/content/en/2.concepts/9.state-manegement/.template/files/components/CounterB.vue
similarity index 100%
rename from content/2.concepts/9.state-manegement/.template/files/components/CounterB.vue
rename to content/en/2.concepts/9.state-manegement/.template/files/components/CounterB.vue
diff --git a/content/2.concepts/9.state-manegement/.template/index.ts b/content/en/2.concepts/9.state-manegement/.template/index.ts
similarity index 100%
rename from content/2.concepts/9.state-manegement/.template/index.ts
rename to content/en/2.concepts/9.state-manegement/.template/index.ts
diff --git a/content/2.concepts/9.state-manegement/index.md b/content/en/2.concepts/9.state-manegement/index.md
similarity index 100%
rename from content/2.concepts/9.state-manegement/index.md
rename to content/en/2.concepts/9.state-manegement/index.md
diff --git a/content/ja/.template/files/app.vue b/content/ja/.template/files/app.vue
new file mode 100644
index 00000000..ec252288
--- /dev/null
+++ b/content/ja/.template/files/app.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const msg = 'Welcome to Nuxt Tutorial!'
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+</template>
diff --git a/content/ja/.template/index.ts b/content/ja/.template/index.ts
new file mode 100644
index 00000000..ef7e2068
--- /dev/null
+++ b/content/ja/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: false,
+    navigation: false,
+  },
+}
diff --git a/content/ja/.template/solutions/app.vue b/content/ja/.template/solutions/app.vue
new file mode 100644
index 00000000..b5f7aa8b
--- /dev/null
+++ b/content/ja/.template/solutions/app.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// TODO: remove this solution later
+const msg = 'This is the solution!'
+</script>
+
+<template>
+  <div>{{ msg.toUpperCase() }}</div>
+</template>
diff --git a/content/ja/0.index.md b/content/ja/0.index.md
new file mode 100644
index 00000000..36bb4e08
--- /dev/null
+++ b/content/ja/0.index.md
@@ -0,0 +1,49 @@
+---
+ogImage:
+  props:
+    title: Nuxt Tutorial
+    excerpt: Hello
+    colorMode: dark
+    description: An interactive tutorial for learning Nuxt
+---
+
+# Nuxt チュートリアルへようこそ！
+
+これは、ガイドとチャレンジで構成されたインタラクティブなチュートリアルで、[Nuxt](https://nuxt.com/) とその概念をステップバイステップで学ぶのに役立ちます。
+
+このチュートリアルの目的は、**ブラウザだけ**で Nuxt と Vue を使って開発する感覚をすばやく体験してもらうことです。包括的に理解することは目指しておらず、次に進む前にすべてを理解する必要はありません。全てのプレイグラウンドは、フル機能のエディタと開発環境で編集可能なので、コードを操作してすぐに結果を見ることができ、実際に作りながら学ぶことができます。
+
+## Nuxt とは?
+
+Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォーマンスが高く本番環境に適したフルスタックの Web アプリケーションやウェブサイトを作成するための直感的で拡張可能な方法を提供する、無料で [オープンソースのフレームワーク](https://github.com/nuxt/nuxt) です。Nuxt はベンダーロックインがなく、アプリケーションを [**どこでも、エッジ上でも**](https://nuxt.com/blog/nuxt-on-the-edge) デプロイすることができます。
+
+## はじめに
+
+このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は [Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。
+
+以下のトピックをクリックして学習を始めてください：
+
+::div{.flex.flex-wrap.gap-2}
+:content-card{to="/ja/vue" title="Vue の基本" description="Vue に馴染みがない場合は、まず Vue の基本を学んでください。" icon="i-logos-vue"}
+:content-card{to="/ja/concepts" title="Nuxt の概念" description="Nuxt のコアコンセプトについて学びます。" icon="i-logos-nuxt-icon"}
+::
+
+## ケーススタディ
+
+Vue と Nuxt の概念に既に精通している人向けに、実際のアプリケーションで Nuxt をどのように使用するかを理解するためのケーススタディを提供しています：
+
+::div{.flex.flex-wrap.gap-2}
+:content-card{to="/ja" wip title="GitHub プロフィール" description="GitHub のカスタムユーザープロフィールを生成するウェブサイトを作成します" icon="i-ph-user-circle-duotone"}
+:content-card{to="/ja" wip title="E コマース" description="商品表示、カート、ログイン機能を持つ基本的な E コマースサイトを作成します" icon="i-ph-shopping-cart-duotone"}
+::
+
+## このプレイグラウンドについて
+
+このプレイグラウンド自体も Nuxt で構築されており、以下のツールを使用しています：
+
+- [WebContainers](https://webcontainers.io/)：ブラウザ内で完全に機能する Node.js 環境を作成し、Nuxt の開発サーバーを実行します。
+- [Nuxt Content](https://content.nuxt.com/)：プレイグラウンドのコンテンツ管理機能です。
+- [Monaco Editor](https://microsoft.github.io/monaco-editor/)：シンタックスハイライトとコード補完を提供するエディタです。
+- [Volar](https://github.com/volarjs/volar.js)：Monaco Editor の Vue と TypeScript の言語サポートを提供します。
+
+このプレイグラウンドの構築方法については、[GitHub のソースコード](https://github.com/nuxt/learn.nuxt.com)を参照してください。
diff --git a/content/ja/1.vue/.template/files/app.vue b/content/ja/1.vue/.template/files/app.vue
new file mode 100644
index 00000000..fd517244
--- /dev/null
+++ b/content/ja/1.vue/.template/files/app.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// ref is auto imported by Nuxt
+const count = ref(0)
+</script>
+
+<template>
+  <button type="button" @click="count++">
+    Count is: {{ count }}
+  </button>
+</template>
+
+<style scoped>
+button {
+  font-weight: bold;
+}
+</style>
diff --git a/content/ja/1.vue/.template/index.ts b/content/ja/1.vue/.template/index.ts
new file mode 100644
index 00000000..ef7e2068
--- /dev/null
+++ b/content/ja/1.vue/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: false,
+    navigation: false,
+  },
+}
diff --git a/content/ja/1.vue/1.index.md b/content/ja/1.vue/1.index.md
new file mode 100644
index 00000000..3699c8bc
--- /dev/null
+++ b/content/ja/1.vue/1.index.md
@@ -0,0 +1,22 @@
+---
+ogImage: true
+---
+
+# Vueの基本
+
+Nuxt は、[Vue.js](https://ja.vuejs.org/) というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。\
+エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc)（SFC）です。
+
+SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://ja.vuejs.org/guide/scaling-up/sfc) で詳細を読むことができます。
+
+Nuxt では Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports) することです。そのため、`ref`、`computed` などの Vue API を直接インポートせずに使用することができます。
+
+::note
+**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には [Composition API](https://ja.vuejs.org/guide/introduction) を使用した [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
+::
+
+今後、以下のトピックについて説明します：
+
+- [Reactivity](/vue/reactivity)
+- [Composition API](/vue/composition-api)
+- [Vue Components](/vue/components)
diff --git a/content/ja/1.vue/2.reactivity/.template/files/app.vue b/content/ja/1.vue/2.reactivity/.template/files/app.vue
new file mode 100644
index 00000000..ee6e0296
--- /dev/null
+++ b/content/ja/1.vue/2.reactivity/.template/files/app.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const count = ref(1)
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>doubled is {{ doubled }}</p>
+    <button type="button" @click="increment">
+      +1
+    </button>
+  </div>
+</template>
diff --git a/content/ja/1.vue/2.reactivity/.template/index.ts b/content/ja/1.vue/2.reactivity/.template/index.ts
new file mode 100644
index 00000000..ef7e2068
--- /dev/null
+++ b/content/ja/1.vue/2.reactivity/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: false,
+    navigation: false,
+  },
+}
diff --git a/content/ja/1.vue/2.reactivity/.template/solutions/app.vue b/content/ja/1.vue/2.reactivity/.template/solutions/app.vue
new file mode 100644
index 00000000..cf0457db
--- /dev/null
+++ b/content/ja/1.vue/2.reactivity/.template/solutions/app.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const count = ref(1)
+const multiplier = ref(2)
+const result = computed(() => count.value * multiplier.value)
+
+function increment() {
+  count.value++
+}
+
+function multiply() {
+  multiplier.value++
+}
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>result is {{ result }}</p>
+    <button type="button" @click="increment">
+      +1
+    </button>
+    <button type="button" @click="multiply">
+      x{{ multiplier }}
+    </button>
+  </div>
+</template>
diff --git a/content/ja/1.vue/2.reactivity/index.md b/content/ja/1.vue/2.reactivity/index.md
new file mode 100644
index 00000000..7869af3d
--- /dev/null
+++ b/content/ja/1.vue/2.reactivity/index.md
@@ -0,0 +1,40 @@
+---
+ogImage: true
+---
+
+# リアクティビティー パート１
+
+Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする [優れたリアクティビティシステム](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals) を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref`、`computed`、`watch` があります。
+
+- [`ref()`](https://ja.vuejs.org/api/reactivity-core#ref) は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。
+
+- [`computed()`](https://ja.vuejs.org/api/reactivity-core#computed) は getter 関数を受け取り、getter からの返り値を反映した `ref` オブジェクトを返します。
+
+ここのプレイグラウンドでは、数字を保持するための `count` という名前の ref オブジェクトと、`count` の倍の値を計算する `doubled` という名前の computed オブジェクトを作成します。Vue は `doubled` が `count` に依存していることを知っているため、`count` が変更された際に `doubled` は自動で再計算されます。
+
+ボタンをクリックして `count` の値が増やしてみてください。`doubled` の値も変更が反映されることを確認することができます。
+
+::note
+**注意**: `<template>` 内で参照された場合、refs は Vue によって自動的にアンラップされます。`.value` は、`<script>` 内や Vue コンポーネント外の JavaScript でアクセスする時にのみ必要になります。
+::
+
+## チャレンジ
+
+では、実際にやってみましょう！
+現在 `2` 倍にハードコードされている乗数をリアクティブに更新可能にするコードに変更してみましょう。
+
+そのためには:
+
+1. `ref()` を使って `multiplier` という名前の変数を作成し、`2` をセットします
+2. `<script>` と `<template>` の両方で、`doubled` を `result` にリネームします
+3. `result` の実装を `count.value * multiplier.value`{lang=js} を返すように変更します
+4. `multiplier` の値を増加させるための別のボタンを追加します
+
+以上です！
+multiplier ボタンを押下すると、新しい乗数による変更結果を確認することができます。
+
+もし行き詰まったら、以下のボタンかエディタの右上にあるボタンをクリックして回答を見ることができます。
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
+
+アイデアを自由に試してみてください。終わったら、次のセクションに進んで、リアクティビティシステムについてさらに学びましょう。
diff --git a/content/ja/1.vue/3.reactivity-2/.template/files/app.vue b/content/ja/1.vue/3.reactivity-2/.template/files/app.vue
new file mode 100644
index 00000000..9c5973f5
--- /dev/null
+++ b/content/ja/1.vue/3.reactivity-2/.template/files/app.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const id = ref(1)
+
+const loading = ref(false)
+
+const data = ref<{
+  userId: number
+  id: number
+  title: string
+  completed: boolean
+} | null>(null)
+
+function increment() {
+  id.value++
+}
+
+async function fetchTodo() {
+  loading.value = true
+  try {
+    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id.value}`)
+    data.value = await res.json()
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+watch(id, fetchTodo, { immediate: true })
+</script>
+
+<template>
+  <div>
+    <p>ID: {{ id }}</p>
+    <button type="button" :disabled="loading" @click="increment">
+      次の TODO アイテムを取得
+    </button>
+    <p v-if="loading">
+      Loading...
+    </p>
+    <pre v-else>{{ data }}</pre>
+  </div>
+</template>
diff --git a/content/ja/1.vue/3.reactivity-2/.template/index.ts b/content/ja/1.vue/3.reactivity-2/.template/index.ts
new file mode 100644
index 00000000..ef7e2068
--- /dev/null
+++ b/content/ja/1.vue/3.reactivity-2/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: false,
+    navigation: false,
+  },
+}
diff --git a/content/ja/1.vue/3.reactivity-2/.template/solutions/app.vue b/content/ja/1.vue/3.reactivity-2/.template/solutions/app.vue
new file mode 100644
index 00000000..0a1aff07
--- /dev/null
+++ b/content/ja/1.vue/3.reactivity-2/.template/solutions/app.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const state = ref<{
+  id: number
+  loading: boolean
+  data: { userId: number, id: number, title: string, completed: boolean } | null
+}>({
+  id: 1,
+  loading: false,
+  data: null,
+})
+
+function increment() {
+  state.value.id++
+}
+
+async function fetchTodo() {
+  state.value.loading = true
+  try {
+    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${state.value.id}`)
+    state.value.data = await res.json()
+  }
+  finally {
+    state.value.loading = false
+  }
+}
+
+watch(() => state.value.id, fetchTodo, { immediate: true })
+</script>
+
+<template>
+  <div>
+    <p>ID: {{ state.id }}</p>
+    <button type="button" :disabled="state.loading" @click="increment">
+      次の TODO アイテムを取得
+    </button>
+    <p v-if="state.loading">
+      Loading...
+    </p>
+    <pre v-else>{{ state.data }}</pre>
+  </div>
+</template>
diff --git a/content/ja/1.vue/3.reactivity-2/index.md b/content/ja/1.vue/3.reactivity-2/index.md
new file mode 100644
index 00000000..a8d9e487
--- /dev/null
+++ b/content/ja/1.vue/3.reactivity-2/index.md
@@ -0,0 +1,37 @@
+---
+ogImage: true
+---
+
+# リアクティビティー パート２
+
+前章で `ref` と `computed` を使った基本的なデータバインディングを学びました。本章では、`watch` について学びましょう。この章で基本的なリアクティビティシステムをマスターできます！
+
+[`watch()`](https://ja.vuejs.org/api/reactivity-core#watch) はリアクティブなデータの変化を監視し、変化があったときに特定の処理を実行することができます。\
+`watch` は `computed` と同様にリアクティブ値の変化に応じて作用しますが、主に `console.log` や `fetch` のような副作用をリアクティブに実行するときに使います。
+
+```ts
+const count = ref(0)
+
+watch(count, (newValue, oldValue) => {
+  console.log(`count changed from ${oldValue} to ${newValue}`)
+})
+```
+
+プレイグラウンドでは、サーバーで管理している TODO アイテムを表示していますが、表示する ID が変化したときに新しいアイテムを取得するために `watch` による監視をしています。
+
+`watch` に関する詳しい説明は [ウォッチャーガイド](https://ja.vuejs.org/guide/essentials/watchers) を参照してください。
+
+## チャレンジ
+
+今のプレイグラウンドは、TODO アイテムに関するデータを `id` と `data` の 2 つのリアクティブ値として管理しています。これらを 1 つの `state` という ref オブジェクトにまとめてみましょう。
+
+1. `state` という変数を作成し、`id` と `data` と `loading` を `state` にまとめましょう。
+2. エラー箇所にしたがって、`id`, `loading`, `data` と書いてある箇所はそれぞれ `state.value.id`, `state.value.loading`, `state.value.data` に書き換えましょう。
+   - template 内では `.value` を書く必要はありません
+3. `watch` の第一引数をゲッター関数に変えましょう。
+   - `state.value.id` のままだと数値を渡していることになるため、`watch` が変化を補足できません。
+
+もし手詰まりになったら、解決策を確認するためのボタンをクリックして、ヒントを得ることができます。
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
+
+ここまでで Vue のリアクティビティシステムの基礎について学びました。次のステップで、Vue の強力な機能の 1 つとなっている「Composition API」について学びましょう！
diff --git a/content/ja/1.vue/4.composition-api/.template/files/app.vue b/content/ja/1.vue/4.composition-api/.template/files/app.vue
new file mode 100644
index 00000000..ee6e0296
--- /dev/null
+++ b/content/ja/1.vue/4.composition-api/.template/files/app.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const count = ref(1)
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>doubled is {{ doubled }}</p>
+    <button type="button" @click="increment">
+      +1
+    </button>
+  </div>
+</template>
diff --git a/content/ja/1.vue/4.composition-api/.template/files/composables/useCounter.ts b/content/ja/1.vue/4.composition-api/.template/files/composables/useCounter.ts
new file mode 100644
index 00000000..0705fd42
--- /dev/null
+++ b/content/ja/1.vue/4.composition-api/.template/files/composables/useCounter.ts
@@ -0,0 +1 @@
+// Challenge
diff --git a/content/ja/1.vue/4.composition-api/.template/index.ts b/content/ja/1.vue/4.composition-api/.template/index.ts
new file mode 100644
index 00000000..7affa296
--- /dev/null
+++ b/content/ja/1.vue/4.composition-api/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: true,
+    navigation: false,
+  },
+}
diff --git a/content/ja/1.vue/4.composition-api/.template/solutions/app.vue b/content/ja/1.vue/4.composition-api/.template/solutions/app.vue
new file mode 100644
index 00000000..97759505
--- /dev/null
+++ b/content/ja/1.vue/4.composition-api/.template/solutions/app.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { count, doubled, increment } = useCounter()
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>doubled is {{ doubled }}</p>
+    <button type="button" @click="increment">
+      +1
+    </button>
+  </div>
+</template>
diff --git a/content/ja/1.vue/4.composition-api/.template/solutions/composables/useCounter.ts b/content/ja/1.vue/4.composition-api/.template/solutions/composables/useCounter.ts
new file mode 100644
index 00000000..530570b7
--- /dev/null
+++ b/content/ja/1.vue/4.composition-api/.template/solutions/composables/useCounter.ts
@@ -0,0 +1,10 @@
+export function useCounter() {
+  const count = ref(1)
+  const doubled = computed(() => count.value * 2)
+
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubled, increment }
+}
diff --git a/content/ja/1.vue/4.composition-api/index.md b/content/ja/1.vue/4.composition-api/index.md
new file mode 100644
index 00000000..2c6ef4b3
--- /dev/null
+++ b/content/ja/1.vue/4.composition-api/index.md
@@ -0,0 +1,26 @@
+# コンポーザブルとは何か ?
+
+[コンポーザブル](https://ja.vuejs.org/guide/reusability/composables.html) とは、Vue の Composition API を活用して再利用可能な状態やロジックを定義するための機能です。Options API で主流な [mixins](https://ja.vuejs.org/api/options-composition.html#mixins) と類似したコンセプトですが、より柔軟で再利用性の高い機能を提供します。Composition API の詳しい説明は [こちら](https://ja.vuejs.org/guide/extras/composition-api-faq.html) をご参照ください。
+
+コンポーザブルの主な特徴は以下の通りです。
+
+- **再利用可能なロジック**: コンポーザブルを使用すると、コンポーネント間で共有したいロジックや状態をモジュールとして定義し、それを簡単にインポートして使用できます。
+- **関数として定義**: コンポーザブルは通常、関数として定義され、必要な状態やメソッドを返します。この関数は Vue の Composition API を使用して内部で状態管理や副作用を処理します。
+- **明示的な依存関係**: コンポーザブルを使うことで、依存関係が明示的になり、どのロジックや状態がどのコンポーネントで使用されているかが明確になります。
+
+Nuxt では、`composables/` ディレクトリにコンポーザブルなロジックを格納することが多く、[自動インポート](https://nuxt.com/docs/examples/features/auto-imports) の対象になります。
+
+## チャレンジ
+
+それでは、これらの特徴を踏まえて以下のステップでロジックをコンポーザブルとして切り出し、再利用してみましょう。
+
+1. 既存の vue ファイル（`app.vue`）の確認してください。
+2. カウンターロジックを `composables/useCounter.ts` に切り出してください。
+3. `app.vue` に 2 で切り出したロジックを適用してください。
+
+## ヒント
+
+- Composable は関数として定義され、必要な状態やメソッドを返します。
+- `composables/` ディレクトリに作成したロジックは自動インポートが適用されます。
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
diff --git a/content/ja/1.vue/5.components/.template/files/Child.vue b/content/ja/1.vue/5.components/.template/files/Child.vue
new file mode 100644
index 00000000..a9d66eb9
--- /dev/null
+++ b/content/ja/1.vue/5.components/.template/files/Child.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  message: string
+  name: string
+}>()
+
+const emit = defineEmits<{
+  'update:name': [string]
+}>()
+</script>
+
+<template>
+  <div class="child-component">
+    <h2>Child Component</h2>
+    <p>{{ message }}</p>
+    <input
+      type="text"
+      :value="name"
+      @input="emit('update:name', $event.target.value)"
+    >
+  </div>
+</template>
+
+<style scoped>
+.child-component {
+  border: solid red;
+  padding: 1rem;
+}
+</style>
diff --git a/content/ja/1.vue/5.components/.template/files/app.vue b/content/ja/1.vue/5.components/.template/files/app.vue
new file mode 100644
index 00000000..d5fc2fec
--- /dev/null
+++ b/content/ja/1.vue/5.components/.template/files/app.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Child from './Child.vue'
+
+const name = ref('John Doe')
+
+function updateName(value: string) {
+  name.value = value
+}
+</script>
+
+<template>
+  <div>
+    <h1>Parent Component</h1>
+    <p>Hi, {{ name }} 👋</p>
+    <Child
+      message="Hello from Parent!"
+      :name
+      @update:name="updateName"
+    />
+  </div>
+</template>
diff --git a/content/ja/1.vue/5.components/.template/index.ts b/content/ja/1.vue/5.components/.template/index.ts
new file mode 100644
index 00000000..7affa296
--- /dev/null
+++ b/content/ja/1.vue/5.components/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: true,
+    navigation: false,
+  },
+}
diff --git a/content/ja/1.vue/5.components/.template/solutions/Child.vue b/content/ja/1.vue/5.components/.template/solutions/Child.vue
new file mode 100644
index 00000000..97956b95
--- /dev/null
+++ b/content/ja/1.vue/5.components/.template/solutions/Child.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  message: string
+  name: string
+}>()
+
+const emit = defineEmits<{
+  'update:name': [name: string]
+}>()
+
+defineSlots<{
+  paragraph: () => any
+}>()
+</script>
+
+<template>
+  <div class="child-component">
+    <h2>Child Component</h2>
+    <p><slot name="paragraph" /></p>
+    <input
+      type="text"
+      :value="name"
+      @input="emit('update:name', $event.target.value)"
+    >
+  </div>
+</template>
+
+<style scoped>
+.child-component {
+  border: solid red;
+  padding: 1rem;
+}
+</style>
diff --git a/content/ja/1.vue/5.components/.template/solutions/app.vue b/content/ja/1.vue/5.components/.template/solutions/app.vue
new file mode 100644
index 00000000..5781e55f
--- /dev/null
+++ b/content/ja/1.vue/5.components/.template/solutions/app.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Child from './Child.vue'
+
+const name = ref('John Doe')
+
+function updateName(value: string) {
+  name.value = value
+}
+</script>
+
+<template>
+  <div>
+    <h1>Parent Component</h1>
+    <p>Hi, {{ name }} 👋</p>
+    <Child
+      :name
+      @update:name="updateName"
+    >
+      <template #paragraph>
+        Hello from <span class="red--text">Parent!</span>
+      </template>
+    </Child>
+  </div>
+</template>
+
+<style scoped>
+.red--text {
+  color: red;
+}
+</style>
diff --git a/content/ja/1.vue/5.components/index.md b/content/ja/1.vue/5.components/index.md
new file mode 100644
index 00000000..6f8c6500
--- /dev/null
+++ b/content/ja/1.vue/5.components/index.md
@@ -0,0 +1,195 @@
+---
+ogImage: true
+---
+
+# コンポーネント
+
+Vue.js のコンポーネントは、UI を小さな再利用可能な部分に分割するための基本的な単位です。\
+特に Single File Components (SFC) を使うことで、HTML、CSS、および JavaScript を 1 つの `.vue` ファイルにまとめることができます。
+
+## 基本的な SFC の構造
+
+SFC は基本的に以下のような `<script setup>`, `<template>`, `<style>` の 3 つのセクションで構成されます。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const message = ref('Hello, Vue!')
+
+function sendMessage() {
+  console.log(message.value)
+}
+</script>
+
+<template>
+  <p>{{ message }}</p>
+  <button type="button" @click="sendMessage">
+    Click me
+  </button>
+</template>
+
+<style scoped>
+p {
+  color: red;
+}
+</style>
+```
+
+この例では、`<script setup>`, `<template>`, `<style>` の 3 つのセクションが使われています。
+
+- `<script setup>`: コンポーネントのロジック部分を定義します。`<script setup>` を使用することで、Composition API を簡潔に書くことができます。
+- `<template>`: コンポーネントのビュー部分を定義します。
+- `<style scoped>`: コンポーネント固有のスタイルを定義します。`scoped` 属性を追加することで、このコンポーネントのスタイルが他のコンポーネントに影響を与えないようにします。
+
+## コンポーネントの再利用
+
+`.vue` ファイルで定義した SFC は、以下のように `<script setup>` でインポートすることでテンプレート内で再利用することができます。
+
+```vue
+<script setup lang="ts">
+import Child from './Child.vue'
+</script>
+
+<template>
+  <Child />
+</template>
+```
+
+## コンポーネント間のデータの受け渡し
+
+Vue コンポーネント間でデータをやり取りする基本的な方法として、`props` と `emit` を使用します。
+
+### Props
+
+親コンポーネントから子コンポーネントにデータを渡すための方法です。
+
+まずは子コンポーネント側で `defineProps` マクロを使用し、受け取りたいデータを定義します。
+
+```vue
+<!-- Child.vue -->
+<script setup lang="ts">
+defineProps<{ message: string }>()
+</script>
+```
+
+次に親コンポーネント側で、子コンポーネントにデータを渡すために `v-bind` ディレクティブを使用します。\
+`:props名="データ"` という形式で、子コンポーネントにデータを渡すことができます。
+
+```vue
+<!-- Parent.vue -->
+<template>
+  <Child :message="message" />
+</template>
+```
+
+また、props 名とデータの変数名が同名の場合は省略記法を使うことができます。
+
+```vue
+<!-- Parent.vue -->
+<template>
+  <Child :message />
+</template>
+```
+
+### Emit
+
+子コンポーネントから親コンポーネントにイベントを発火するための方法です。
+
+まずは子コンポーネント側で `defineEmits` マクロを使用し、発火したいイベントを定義します。
+emit 関数を用いて、イベントを発火することができます。
+
+```vue
+<!-- Child.vue -->
+<script setup lang="ts">
+const emit = defineEmits<{ sendMessage: [] }>()
+</script>
+
+<template>
+  <button type="button" @click="emit('sendMessage')">
+    Click me
+  </button>
+</template>
+```
+
+発火されたイベントは親コンポーネント側で `v-on` ディレクティブを使用して受け取ることができます。
+
+```vue
+<!-- Parent.vue -->
+<script setup lang="ts">
+function handleSendMessage() {
+  console.log('Message sent!')
+}
+</script>
+
+<template>
+  <Child @send-message="handleSendMessage" />
+</template>
+```
+
+以下のように、イベント発火時に子コンポーネントからデータを受け渡すこともできます。
+
+```vue
+<!-- Child.vue -->
+<script setup lang="ts">
+const emit = defineEmits<{ sendMessage: [string] }>()
+</script>
+
+<template>
+  <button type="button" @click="emit('sendMessage', 'Hello, Vue!')">
+    Click me
+  </button>
+</template>
+```
+
+```vue
+<!-- Parent.vue -->
+<script setup lang="ts">
+function handleSendMessage(message: string) {
+  console.log(message)
+}
+</script>
+
+<template>
+  <Child @send-message="handleSendMessage" />
+</template>
+```
+
+それぞれの詳しい [API ドキュメント](https://ja.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)から確認することができます。
+
+## チャレンジ
+
+右のプレイグラウンドでは、props と emit を使ってコンポーネント間のデータの受け渡しを行っています。\
+Vue.js では [スロット](https://ja.vuejs.org/guide/components/slots.html) という機能を利用することで、親コンポーネントからコンポーネントにテンプレートを挿入することができます。\
+右のプレイグラウンドを編集して、スロットを使ったテンプレートの挿入を行ってみましょう。
+
+1. 子コンポーネント (`Child.vue`) でスロットの定義を行う\
+    [defineSlot マクロ](https://ja.vuejs.org/api/sfc-script-setup.html#defineslots) を使うことにより、型安全なスロットを定義することができます。\
+   定義ができたら、template 内で `slot` タグを配置することで渡されたテンプレートの挿入を行うことができます。
+
+   ```vue
+   <script setup lang="ts">
+   defineSlots<{ paragraph: () => any }>()
+   </script>
+
+   <template>
+     <h2>Child Component</h2>
+     <p><slot name="paragraph" /></p>
+   </template>
+   ```
+
+2. 親コンポーネント (`app.vue`) で slot にテンプレートを挿入する\
+    親コンポーネント側で、子コンポーネントにテンプレートを挿入するために `v-slot` ディレクティブを使用します。\
+    (ここでは `v-slot` の省略記法の `#` を使用しています)
+
+   ```vue
+   <template>
+     <Child>
+       <template #paragraph>
+         Hello from <span class="red--text">Parent!</span>
+       </template>
+     </Child>
+   </template>
+   ```
+
+   :ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
diff --git a/content/ja/1.vue/6.summary/.template/index.ts b/content/ja/1.vue/6.summary/.template/index.ts
new file mode 100644
index 00000000..ef7e2068
--- /dev/null
+++ b/content/ja/1.vue/6.summary/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: false,
+    navigation: false,
+  },
+}
diff --git a/content/ja/1.vue/6.summary/index.md b/content/ja/1.vue/6.summary/index.md
new file mode 100644
index 00000000..1e2e7bb1
--- /dev/null
+++ b/content/ja/1.vue/6.summary/index.md
@@ -0,0 +1,5 @@
+# Vueの基本のまとめ
+
+おめでとうございます！これで Vue の基本を学び終わりました。さらに Vue について学びたい場合は、[公式のVueドキュメント](https://vuejs.org/)をご覧ください。より詳しいガイドやチュートリアルが用意されています。
+
+次は、Nuxt がどのようにあなたの開発体験をさらに向上させるかを見ていきましょう。
diff --git a/content/ja/2.concepts/1.index.md b/content/ja/2.concepts/1.index.md
new file mode 100644
index 00000000..ebfbb4aa
--- /dev/null
+++ b/content/ja/2.concepts/1.index.md
@@ -0,0 +1,29 @@
+---
+ogImage: true
+---
+
+# Nuxt のコンセプト
+
+この章では、Nuxt のコアコンセプトについて説明します。
+
+Nuxt は、直感的で拡張可能な方法で、タイプセーフで高性能で本番向けのフルスタック Web アプリケーションやウェブサイトを Vue.js で作成するための無料かつオープンソースのフレームワークです。Vue.js に慣れていない場合は、まず [Vue の基本](/vue)セクションから始め、最初に [公式 Vue ドキュメント](https://vuejs.org/) を読むことをお勧めします。
+
+## 自動化と慣習
+
+Nuxt は慣習と意見のあるディレクトリ構造を使用して、繰り返しのタスクを自動化し、開発者が機能の追加に集中できるようにします。設定ファイルはカスタマイズ可能で、デフォルトの動作を上書きすることができます。
+
+- [**ファイルベースのルーティング**](/concepts/routing): [`pages/` ディレクトリ](https://nuxt.com/docs/guide/directory-structure/pages)の構造に基づいてルートを定義します。これにより、アプリケーションを整理し、手動でルートを構成する必要がなくなります。
+- [**自動インポート**](/concepts/auto-imports): 対応するディレクトリに Vue コンポーザブルやコンポーネントを記述し、ツリーシェイキングと最適化された JS バンドルの利点を活用してインポートすることができます。
+- **コード分割:** Nuxt は自動的にコードを小さなチャンクに分割し、アプリケーションの初期読み込み時間を短縮するのに役立ちます。
+- **サーバーサイドレンダリング:** Nuxt には組み込みの SSR 機能が付属しているため、別個のサーバーを設定する必要はありません。
+- **データ取得ユーティリティ:** Nuxt は、SSR 互換のデータ取得を処理するコンポーザブルや異なる戦略を提供します。
+- **ゼロコンフィグ TypeScript サポート:** 自動生成された型と `tsconfig.json` を使用して、TypeScript を学ぶ必要なく、タイプセーフなコードを記述できます。
+- **構成済みのビルドツール:** 開発時にホットモジュールリプレースメント（HMR）をサポートし、本番用にコードをバンドルするために [Vite](https://vitejs.dev) をデフォルトで使用しています。
+
+Nuxt はこれらを処理し、フロントエンドとバックエンドの機能を提供するため、あなたが重要視すべきことに集中できます: **あなたの Web アプリケーションを作成すること**。
+
+## はじめに
+
+このプレイグラウンドには、Nuxt がインストールされ、設定されているため、アプリケーションの作成を直接開始できます。自分のマシンに Nuxt をローカルにインストールしたい場合は、[インストールガイド](https://nuxt.com/docs/getting-started/installation)に従ってください。
+
+始めるには、[Nuxt アプリケーションのエントリがどのように定義されているか](/concepts/app-vue)について学びましょう。
diff --git a/content/ja/2.concepts/2.app-vue/.template/files/app.vue b/content/ja/2.concepts/2.app-vue/.template/files/app.vue
new file mode 100644
index 00000000..5aee380a
--- /dev/null
+++ b/content/ja/2.concepts/2.app-vue/.template/files/app.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const msg = 'Hello World!'
+</script>
+
+<template>
+  <div>{{ msg.toUpperCase() }}</div>
+</template>
diff --git a/content/ja/2.concepts/2.app-vue/.template/index.ts b/content/ja/2.concepts/2.app-vue/.template/index.ts
new file mode 100644
index 00000000..a13047e9
--- /dev/null
+++ b/content/ja/2.concepts/2.app-vue/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    fileTree: true,
+    navigation: false,
+  },
+  ignoredFiles: ['package.json', 'server'],
+}
diff --git a/content/ja/2.concepts/2.app-vue/index.md b/content/ja/2.concepts/2.app-vue/index.md
new file mode 100644
index 00000000..06dcdbdf
--- /dev/null
+++ b/content/ja/2.concepts/2.app-vue/index.md
@@ -0,0 +1,18 @@
+---
+ogImage: true
+---
+
+# アプリケーションのエントリ
+
+Nuxt では `app.vue` がアプリケーションのエントリーポイントとなっています。\
+アプリケーションを制御するために最小限の `app.vue` を定義して、自分自身のアプリケーションの実装を始めることができます。（任意）\
+この例ではメッセージを画面に出力するだけの単純な実装が行われています。
+
+次のチャプターで説明する `pages/` ディレクトリはオプショナルで、存在しない場合は vue-router の依存関係を含めません。\
+これは、ルーティングが必要ないランディングページやアプリケーションを実装する際に便利です。
+
+また、`nuxt.config.ts` を通じてアプリケーションの設定を行うことができます。(`nuxt.config.js`, `nuxt.config.mjs` も同様にサポートしています)\
+デフォルトでは、ほとんどのユースケースをカバーするように構成されており、必要に応じて設定を上書きすることができます。
+詳細なオプションに関しては [Nuxt 公式ドキュメント](https://nuxt.com/docs/getting-started/configuration) をご覧ください。
+
+Nuxt アプリの機能をさらに拡張するには、[ルーティング](/concepts/routing) セクションに進んで、アプリをマルチページにする方法を学びましょう。
diff --git a/content/ja/2.concepts/3.routing/.template/files/app.vue b/content/ja/2.concepts/3.routing/.template/files/app.vue
new file mode 100644
index 00000000..8f62b8bf
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/files/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/content/ja/2.concepts/3.routing/.template/files/pages/foo.vue b/content/ja/2.concepts/3.routing/.template/files/pages/foo.vue
new file mode 100644
index 00000000..26a51b5a
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/files/pages/foo.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      <NuxtLink to="/">
+        Index
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/content/ja/2.concepts/3.routing/.template/files/pages/index.vue b/content/ja/2.concepts/3.routing/.template/files/pages/index.vue
new file mode 100644
index 00000000..b22f4b94
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/files/pages/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <div>
+      Hello!
+    </div>
+    <div>
+      <NuxtLink to="/foo">
+        Foo
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/content/ja/2.concepts/3.routing/.template/files/pages/posts/[id].vue b/content/ja/2.concepts/3.routing/.template/files/pages/posts/[id].vue
new file mode 100644
index 00000000..d900577c
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/files/pages/posts/[id].vue
@@ -0,0 +1,4 @@
+<!-- Challenge -->
+<template>
+  TODO
+</template>
diff --git a/content/ja/2.concepts/3.routing/.template/index.ts b/content/ja/2.concepts/3.routing/.template/index.ts
new file mode 100644
index 00000000..00ac4180
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/index.ts
@@ -0,0 +1,9 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'pages/index.vue',
+  features: {
+    fileTree: true,
+  },
+  ignoredFiles: ['server'],
+}
diff --git a/content/ja/2.concepts/3.routing/.template/solutions/app.vue b/content/ja/2.concepts/3.routing/.template/solutions/app.vue
new file mode 100644
index 00000000..8f62b8bf
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/solutions/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/content/ja/2.concepts/3.routing/.template/solutions/pages/foo.vue b/content/ja/2.concepts/3.routing/.template/solutions/pages/foo.vue
new file mode 100644
index 00000000..53377f9e
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/solutions/pages/foo.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      <NuxtLink to="/">
+        Index
+      </NuxtLink>
+    </div>
+    <div>
+      <NuxtLink to="/posts/1">
+        Posts/1
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/content/ja/2.concepts/3.routing/.template/solutions/pages/index.vue b/content/ja/2.concepts/3.routing/.template/solutions/pages/index.vue
new file mode 100644
index 00000000..7376ddd7
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/solutions/pages/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div>
+      Hello!
+    </div>
+    <div>
+      <NuxtLink to="/foo">
+        Foo
+      </NuxtLink>
+    </div>
+    <div>
+      <NuxtLink to="/posts/1">
+        Posts/1
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/content/ja/2.concepts/3.routing/.template/solutions/pages/posts/[id].vue b/content/ja/2.concepts/3.routing/.template/solutions/pages/posts/[id].vue
new file mode 100644
index 00000000..773305f3
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/.template/solutions/pages/posts/[id].vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const route = useRoute()
+const id = computed(() => route.params.id)
+</script>
+
+<template>
+  <div>
+    <div>
+      Posts/{{ id }}
+    </div>
+    <NuxtLink to="/foo">
+      Foo
+    </NuxtLink>
+    <div>
+      <NuxtLink to="/">
+        Index
+      </NuxtLink>
+    </div>
+    <div />
+  </div>
+</template>
diff --git a/content/ja/2.concepts/3.routing/index.md b/content/ja/2.concepts/3.routing/index.md
new file mode 100644
index 00000000..879865b8
--- /dev/null
+++ b/content/ja/2.concepts/3.routing/index.md
@@ -0,0 +1,58 @@
+---
+ogImage: true
+---
+
+# ルーティング
+
+## ファイルシステムルーター
+
+ファイルシステムルーターは Nuxt の主要機能の 1 つです。\
+`pages/` ディレクトリ内の各 Vue ファイルが、それに対応する URL（ルート）を作成し、そのファイルの内容を表示します。\
+この例では、`pages/index.vue` が `/` に、`pages/foo.vue` が `/foo` に対応しています。\
+このルーティングは [vue-router](https://router.vuejs.org/) をベースに実装されています。
+
+また、Nuxt は各ページに対してコード分割等の最適化により、リクエストされたルートに対して最小限の JavaScript を配信します。
+
+## ナビゲーション
+
+`pages/` にルートを作成したら、`<NuxtLink>` コンポーネントを使うことでナビゲーションを行うことができます。
+
+`<NuxtLink>` コンポーネントでは `to` という props にルートを指定することでリンクを作成することができます。\
+`<NuxtLink>` コンポーネントは自動的に最適化されるため、通常の `<a>` 要素と、`href` 属性を利用したリンクの作成と比べ、高速にナビゲーションを行うことができます。
+
+## ルートパラメータ
+
+`/pages` ディレクトリでは、ファイル名の一部を `[]` で囲うことで動的なルーティングを定義することができます。(例: `pages/posts/[id].vue`)
+
+この `[]` で囲われたルートパラメータは `useRoute()` を通じてアクセスすることができます。
+
+```vue
+<!-- pages/posts/[id].vue -->
+<script setup lang="ts">
+const route = useRoute()
+
+// /posts/1 にアクセスした際、route.params.id は 1 になる
+console.log(route.params.id)
+</script>
+```
+
+## チャレンジ
+
+`/posts/[id]` というルートに対して、 `/`, `/foo` からナビゲーション出来るように実装してみましょう。
+`/posts/[id]` では、ルートパラメータから `id` を読み取り、その値を画面に表示してみましょう。
+
+そのためには:
+
+1. `pages/posts/[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。
+2. `pages/index.vue` と `pages/foo.vue` に `<NuxtLink>` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\
+   ここでは例として、`/posts/1` にナビゲーションするリンクを作成してみましょう。\
+   (実際には値は任意のもので構いません)
+
+もし行き詰まったら、以下のボタンかエディタの右上にあるボタンをクリックして回答を見ることができます。
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
+
+---
+
+ここで登場した、`useRoute` 関数や `<NuxtLink>` コンポーネント、Nuxt のコアコンセプトの 1 つとなっている Auto Imports によって自動的に import されるため、import 文を記載することなく利用することができます。\
+[Auto Imports](/concepts/auto-imports) について次のセクションでより詳しく学びましょう。
diff --git a/content/ja/2.concepts/4.auto-imports/.template/files/app.vue b/content/ja/2.concepts/4.auto-imports/.template/files/app.vue
new file mode 100644
index 00000000..c3f2a272
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/4.auto-imports/.template/files/components/Counter.vue b/content/ja/2.concepts/4.auto-imports/.template/files/components/Counter.vue
new file mode 100644
index 00000000..488c6303
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/4.auto-imports/.template/files/composables/counter.ts b/content/ja/2.concepts/4.auto-imports/.template/files/composables/counter.ts
new file mode 100644
index 00000000..b8893d9b
--- /dev/null
+++ b/content/ja/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 }
+}
diff --git a/content/ja/2.concepts/4.auto-imports/.template/files/utils/double.ts b/content/ja/2.concepts/4.auto-imports/.template/files/utils/double.ts
new file mode 100644
index 00000000..0705fd42
--- /dev/null
+++ b/content/ja/2.concepts/4.auto-imports/.template/files/utils/double.ts
@@ -0,0 +1 @@
+// Challenge
diff --git a/content/ja/2.concepts/4.auto-imports/.template/index.ts b/content/ja/2.concepts/4.auto-imports/.template/index.ts
new file mode 100644
index 00000000..201753ab
--- /dev/null
+++ b/content/ja/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,
+  },
+}
diff --git a/content/ja/2.concepts/4.auto-imports/.template/solutions/app.vue b/content/ja/2.concepts/4.auto-imports/.template/solutions/app.vue
new file mode 100644
index 00000000..6a3edcef
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue b/content/ja/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue
new file mode 100644
index 00000000..488c6303
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts b/content/ja/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts
new file mode 100644
index 00000000..b8893d9b
--- /dev/null
+++ b/content/ja/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 }
+}
diff --git a/content/ja/2.concepts/4.auto-imports/.template/solutions/utils/double.ts b/content/ja/2.concepts/4.auto-imports/.template/solutions/utils/double.ts
new file mode 100644
index 00000000..689661c3
--- /dev/null
+++ b/content/ja/2.concepts/4.auto-imports/.template/solutions/utils/double.ts
@@ -0,0 +1,3 @@
+export function double(n: number): number {
+  return n * 2
+}
diff --git a/content/ja/2.concepts/4.auto-imports/index.md b/content/ja/2.concepts/4.auto-imports/index.md
new file mode 100644
index 00000000..33b88fac
--- /dev/null
+++ b/content/ja/2.concepts/4.auto-imports/index.md
@@ -0,0 +1,51 @@
+---
+ogImage: true
+---
+
+# 自動インポート
+
+自動インポートも Nuxt のコアコンセプトの 1 つです。
+
+https://nuxt.com/docs/guide/concepts/auto-imports
+
+自動インポートは明示的にインポートすることなく、コンポーネント、コンポーザブル、および [Vue.js の API](https://vuejs.org/api/) をアプリケーション全体で使用できるように自動的にインポートする機能です。\
+従来のグローバル宣言とは異なり、Nuxt は型情報や IDE の補完、ヒントを保持し、本番コードで使用されているもののみを含めます。
+
+Nuxt のディレクトリ構造の規約おかげで、 `components/`、`composables/`、および `utils/` を自動的にインポートすることができます。\
+この例では、`components` ディレクトリに定義された Counter.vue コンポーネントと、`composables` ディレクトリに定義された `useCounter.ts` を明示的なインポートなしで使用しています。\
+`app.vue` では Counter コンポーネントを使用し、`Counter.vue` では `useCounter()` を使用しています。
+
+また、Nuxt はいくつかのコンポーネントやコンポーザブル、ユーティリティも提供しています。
+[ルーティング](/concepts/routing) のセクションで登場した `NuxtLink` コンポーネントがその一例です。\
+他にも、データフェッチで利用する `useFetch()` コンポーザブルやランタイムの設定にアクセスする `useRuntimeConfig()` コンポーザブル、ページナビゲーションのための `navigateTo()` ユーティリティ関数などがあります。\
+たくさんあるので、そのほかのものは Nuxt 公式ドキュメントの [Components](https://nuxt.com/docs/api/components)、[Composables](https://nuxt.com/docs/api/composables)、[Utils](https://nuxt.com/docs/api/utils) のセクションを参照してください。
+
+また、Nuxt では明示的なインポートもサポートしており、この場合は `#import` からインポートすることが可能です。
+
+```ts
+import { computed, ref } from '#imports'
+
+const count = ref(1)
+const double = computed(() => count.value * 2)
+```
+
+自動インポート機能は `nuxt.config.ts` でオプトアウトすることも可能です。\
+この場合は上記の明示的なインポートが必要になります。
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  imports: {
+    autoImport: false
+  }
+})
+```
+
+## チャレンジ
+
+実際に utils/double.ts ファイルに対して、自動インポート可能な関数を実装してみましょう。
+
+関数は任意のもので構いませんが、例として「与えられた数値を二倍にして返す `double()` 関数」を実装してみましょう。\
+関数が実装できたら、`app.vue` 内の template で使用して、2 倍された数値を画面に表示してみましょう。
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
diff --git a/content/ja/2.concepts/5.middleware/.template/files/app.vue b/content/ja/2.concepts/5.middleware/.template/files/app.vue
new file mode 100644
index 00000000..8f62b8bf
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/.template/files/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/content/ja/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts b/content/ja/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
new file mode 100644
index 00000000..ab0fba72
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts
@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware(() => {
+  console.log('hello-foo')
+})
diff --git a/content/ja/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts b/content/ja/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts
new file mode 100644
index 00000000..da1b7ff5
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts
@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware(() => {
+  console.log('Hello from global middleware!')
+})
diff --git a/content/ja/2.concepts/5.middleware/.template/files/pages/foo.vue b/content/ja/2.concepts/5.middleware/.template/files/pages/foo.vue
new file mode 100644
index 00000000..8fb73081
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/5.middleware/.template/files/pages/index.vue b/content/ja/2.concepts/5.middleware/.template/files/pages/index.vue
new file mode 100644
index 00000000..ee94c31d
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/.template/files/pages/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <h1>Index</h1>
+  <NuxtLink to="/foo">
+    /Foo
+  </NuxtLink>
+</template>
diff --git a/content/ja/2.concepts/5.middleware/.template/index.ts b/content/ja/2.concepts/5.middleware/.template/index.ts
new file mode 100644
index 00000000..0ca55ab7
--- /dev/null
+++ b/content/ja/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,
+  },
+}
diff --git a/content/ja/2.concepts/5.middleware/.template/solutions/app.vue b/content/ja/2.concepts/5.middleware/.template/solutions/app.vue
new file mode 100644
index 00000000..8f62b8bf
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/.template/solutions/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/content/ja/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts b/content/ja/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
new file mode 100644
index 00000000..ba620880
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts
@@ -0,0 +1,14 @@
+export default defineNuxtRouteMiddleware((to) => {
+  // import.meta を利用した分岐でも OK
+  if (!window?.localStorage)
+    return
+
+  const isSignedIn = JSON.parse(window.localStorage.getItem('isSignedIn') || 'false')
+
+  if (!isSignedIn && to.path !== '/') {
+    return navigateTo('/')
+  }
+  else {
+    return true
+  }
+})
diff --git a/content/ja/2.concepts/5.middleware/.template/solutions/pages/foo.vue b/content/ja/2.concepts/5.middleware/.template/solutions/pages/foo.vue
new file mode 100644
index 00000000..6c82990a
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/.template/solutions/pages/foo.vue
@@ -0,0 +1,6 @@
+<template>
+  <h1>Foo</h1>
+  <NuxtLink to="/">
+    /Index
+  </NuxtLink>
+</template>
diff --git a/content/ja/2.concepts/5.middleware/.template/solutions/pages/index.vue b/content/ja/2.concepts/5.middleware/.template/solutions/pages/index.vue
new file mode 100644
index 00000000..3e9515bd
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/5.middleware/index.md b/content/ja/2.concepts/5.middleware/index.md
new file mode 100644
index 00000000..0fde7a74
--- /dev/null
+++ b/content/ja/2.concepts/5.middleware/index.md
@@ -0,0 +1,82 @@
+---
+ogImage: true
+---
+
+# ミドルウェア
+
+Nuxt では、特定のルートにナビゲートする前にコードを実行する為のミドルウェアを提供しています。\
+この機能は例えば、認証状態によってページへのアクセスを制限する場合などに便利です。
+
+ミドルウェアにはグローバルミドルウェアとページ単位のミドルウェアの 2 つの種類があります。
+どちらも、`middleware` ディレクトリに実装します。
+
+## グローバルミドルウェア
+
+グローバルミドルウェアは以下のように定義することができます。
+
+```
+-| middleware/
+  ---| hello.global.ts
+```
+
+```ts
+// middleware/hello.global.ts
+export default defineNuxtRouteMiddleware(() => {
+  console.log('hello')
+})
+```
+
+## ページ単位のミドルウェア
+
+ページ単位のミドルウェアは以下のように定義することができます。
+
+```
+-| 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>
+```
+
+## ミドルウェアの実行タイミング
+
+これらのミドルウェアは、クライアント上でのナビゲーション時はもちろん、SSR または SSG でのページ生成時にもサーバーサイドで実行されます。\
+ミドルウェアでローカルストレージなどのクライアントサイドの API を使用する場合は、クライアントサイドのみで実行されるようにする必要があります。\
+`import.meta` を使うことで実行している環境を判定することができます。
+サーバーサイドでの実行スキップする場合は `import.meta.server` を利用します。
+
+```ts
+export default defineNuxtRouteMiddleware((to) => {
+  // skip middleware on server (if (import.meta.client) { ... } でも同様)
+  if (import.meta.server)
+    return
+
+  // some processing
+  window.localStorage.setItem('key', 'value')
+})
+```
+
+## チャレンジ
+
+localStorage の情報を読み取って、特定の値がある場合のみ `/foo` にアクセス可能にするミドルウェアを作成してみましょう。\
+今回は例として、`isSignedIn` というキーに `true` が設定されている場合のみ `/foo` にアクセス可能にするミドルウェアを作成します。\
+値のセットは `index.vue` から行えるようにボタンを設置してみましょう。
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
diff --git a/content/ja/2.concepts/6.layout/.template/files/app.vue b/content/ja/2.concepts/6.layout/.template/files/app.vue
new file mode 100644
index 00000000..f8eacfa7
--- /dev/null
+++ b/content/ja/2.concepts/6.layout/.template/files/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
diff --git a/content/ja/2.concepts/6.layout/.template/files/layouts/default.vue b/content/ja/2.concepts/6.layout/.template/files/layouts/default.vue
new file mode 100644
index 00000000..155d1aa2
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/6.layout/.template/files/layouts/no-header.vue b/content/ja/2.concepts/6.layout/.template/files/layouts/no-header.vue
new file mode 100644
index 00000000..d841dfa7
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/6.layout/.template/files/pages/foo.vue b/content/ja/2.concepts/6.layout/.template/files/pages/foo.vue
new file mode 100644
index 00000000..bbd64ecf
--- /dev/null
+++ b/content/ja/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>
diff --git a/content/ja/2.concepts/6.layout/.template/files/pages/index.vue b/content/ja/2.concepts/6.layout/.template/files/pages/index.vue
new file mode 100644
index 00000000..ee94c31d
--- /dev/null
+++ b/content/ja/2.concepts/6.layout/.template/files/pages/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <h1>Index</h1>
+  <NuxtLink to="/foo">
+    /Foo
+  </NuxtLink>
+</template>
diff --git a/content/ja/2.concepts/6.layout/.template/index.ts b/content/ja/2.concepts/6.layout/.template/index.ts
new file mode 100644
index 00000000..0ca55ab7
--- /dev/null
+++ b/content/ja/2.concepts/6.layout/.template/index.ts
@@ -0,0 +1,8 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'pages/index.vue',
+  features: {
+    fileTree: true,
+  },
+}
diff --git a/content/ja/2.concepts/6.layout/index.md b/content/ja/2.concepts/6.layout/index.md
new file mode 100644
index 00000000..38fcc15f
--- /dev/null
+++ b/content/ja/2.concepts/6.layout/index.md
@@ -0,0 +1,43 @@
+---
+ogImage: true
+---
+
+# レイアウト
+
+Nuxt は UI パターンを再利用可能にするための機能を提供しています。\
+layout は `~/layouts` デイレクトリに実装され、`app.vue` で `NuxtLayout` を使用することで適応されます。\
+layout は各ページごとに `definePageMeta` を通して選択することができます。
+
+```
+-| layouts/
+  ---| default.vue
+  ---| custom.vue
+```
+
+```vue
+<!-- layouts/custom.vue -->
+<template>
+  <div>
+    <p>Some default layout content shared across all pages</p>
+    <slot />
+  </div>
+</template>
+```
+
+```vue
+<!-- app.vue -->
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+```vue
+<!-- pages/about.vue -->
+<script setup lang="ts">
+definePageMeta({
+  layout: 'custom'
+})
+</script>
+```
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/files/app.vue b/content/ja/2.concepts/7.rendering-modes/.template/files/app.vue
new file mode 100644
index 00000000..42fa50c0
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/files/app.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const count = ref(0)
+function increment() {
+  count.value++
+}
+
+console.log('count.value:', count.value)
+</script>
+
+<template>
+  <button type="button" @click="increment">
+    count is: {{ count }}
+  </button>
+</template>
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/files/pages/foo.vue b/content/ja/2.concepts/7.rendering-modes/.template/files/pages/foo.vue
new file mode 100644
index 00000000..ef5ccaf8
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/files/pages/foo.vue
@@ -0,0 +1,9 @@
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Foo</p>
+  <p>
+    <NuxtLink to="/">
+      Index
+    </NuxtLink>
+  </p>
+</template>
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/files/pages/index.vue b/content/ja/2.concepts/7.rendering-modes/.template/files/pages/index.vue
new file mode 100644
index 00000000..0cfaf381
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/files/pages/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Index</p>
+  <p>
+    <NuxtLink to="/foo">
+      Foo
+    </NuxtLink>
+  </p>
+</template>
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/index.ts b/content/ja/2.concepts/7.rendering-modes/.template/index.ts
new file mode 100644
index 00000000..8a8cbe23
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/index.ts
@@ -0,0 +1,9 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'pages/index.vue',
+  features: {
+    fileTree: true,
+    terminal: true,
+  },
+}
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/solutions/app.vue b/content/ja/2.concepts/7.rendering-modes/.template/solutions/app.vue
new file mode 100644
index 00000000..8f62b8bf
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/solutions/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/solutions/nuxt.config.ts b/content/ja/2.concepts/7.rendering-modes/.template/solutions/nuxt.config.ts
new file mode 100644
index 00000000..8189c055
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/solutions/nuxt.config.ts
@@ -0,0 +1,5 @@
+export default defineNuxtConfig({
+  routeRules: {
+    '/foo': { ssr: false },
+  },
+})
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/foo.vue b/content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/foo.vue
new file mode 100644
index 00000000..f603b9d3
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/foo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+console.log('pages/foo.vue')
+</script>
+
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Foo</p>
+  <p>
+    <NuxtLink to="/">
+      Index
+    </NuxtLink>
+  </p>
+</template>
diff --git a/content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/index.vue b/content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/index.vue
new file mode 100644
index 00000000..6d22cf5d
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/.template/solutions/pages/index.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+console.log('pages/index.vue')
+</script>
+
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Index</p>
+  <p>
+    <NuxtLink to="/foo">
+      Foo
+    </NuxtLink>
+  </p>
+</template>
diff --git a/content/ja/2.concepts/7.rendering-modes/index.md b/content/ja/2.concepts/7.rendering-modes/index.md
new file mode 100644
index 00000000..0733c391
--- /dev/null
+++ b/content/ja/2.concepts/7.rendering-modes/index.md
@@ -0,0 +1,130 @@
+---
+ogImage: true
+---
+
+# レンダリングモード
+
+Nuxt は様々なレンダリングモードをサポートしています。\
+具体的には、ユニバーサルレンダリング、クライアントサイドレンダリング、ハイブリッドレンダリングがあります。
+
+デフォルトでは、ユニバーサルレンダリングが選択されています。\
+また、これらは `nuxt.config` で簡単に切り替えることができます。
+
+## ユニバーサルレンダリング
+
+ユニバーサルレンダリングでは、サーバーが完全にレンダリングされた HTML を返します。\
+これにより、ユーザーはアプリケーションのコンテンツをすぐに取得することができます。
+
+また、ブラウザ上で HTML を読み込んだ後、インタラクションを必要とする動的な UI を構築するためにブラウザ上で JavaScript コードを読み込みます。\
+このことを「ハイドレーション」と呼びます。
+
+この例では `app.vue` で `count` と言うステートをコンソールに出力しています。\
+このページにアクセスした際にターミナル(サーバー)とブラウザのコンソールの両方でこの出力を確認することができます。
+
+これはつまり、Nuxt が HTML をサーバー上で生成するために Vue.js のコードをサーバー上で実行し、その後ブラウザでも同じコードが実行されていることを意味します。\
+これゆえに「ユニバーサルレンダリング」と呼ばれています。
+
+ユニバーサルレンダリングの利点と欠点は主に以下の通りです。
+
+### 利点
+
+- パフォーマンス\
+  サーバーサイドで HTML を生成し、それをブラウザが読み込むため、ブラウザ上で JavaScript によってコンテンツを生成するよりも高速です。
+- 検索エンジン最適化 (SEO)\
+  Web クローラはページのコンテンツを直接インデックスできるため、SEO に有利です。
+
+### 欠点
+
+- 開発の制約\
+  サーバーサイドとクライアントサイドでシームレスに動作するコードを書くためにいくつかの制約があります。
+- コスト\
+  サーバーを必要とするため、サーバーの稼働コストがかかります。
+
+より詳細な説明については [公式ドキュメント](https://nuxt.com/docs/guide/concepts/rendering#universal-rendering) を参照してください。
+
+## クライアントサイドレンダリング
+
+`nuxt.config` で `ssr: false` を設定することで、クライアントサイドレンダリングを有効にすることができます。
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  ssr: false
+})
+```
+
+クライアントサイドレンダリングでは、アプリケーションをブラウザ上でレンダリングします。\
+ブラウザが現在のインターフェイスを作成するための命令を含むすべての JavaScript コードをダウンロードして解析した後、HTML 要素を生成します。
+
+クライアントサイドレンダリングの利点と欠点は主に以下の通りです。
+
+### 利点
+
+- 開発スピード\
+  サーバーサイドとのシームレスな動作を要求しないため、ブラウザで動作することだけを考慮して開発することができます。
+- 安価\
+  サーバーを必要としないため、インフラストラクチャのコストがかかりません。
+- オフライン\
+  コードはすべてブラウザで実行されるため、インターネットが利用できない状態でもうまく動作し続けることができます。
+
+### 欠点
+
+- パフォーマンス\
+  ユーザーはブラウザが JavaScript ファイルをダウンロード、解析、実行するのを待たなければなりません。それらに時間がかかり、ユーザーの体験に影響を与える可能性があります。
+- 検索エンジン最適化 (SEO)\
+  クライアントサイドレンダリングで配信されたコンテンツのインデックス化と更新には時間がかかるため、サーバーレンダリングの HTML ドキュメントと比べ SEO に不利です。
+
+## ハイブリッドレンダリング
+
+Nuxt ではルートのルールを設定することにより、ルートごとに異なるキャッシュ ルールとレンダリングモードを選択することができます。
+
+設定は `nuxt.config` の `routeRules` オプションで行います。
+
+詳細は [公式ドキュメント](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering) を参照してください。
+
+```ts
+export default defineNuxtConfig({
+  routeRules: {
+    // Homepage pre-rendered at build time
+    '/': { prerender: true },
+    // Blog posts page generated on demand, revalidates in background, cached on CDN for 1 hour (3600 seconds)
+    '/blog': { isr: 3600 },
+    // Blog post page generated on demand once until next deployment, cached on CDN
+    '/blog/**': { isr: true },
+    // Admin dashboard renders only on client-side
+    '/admin/**': { ssr: false },
+  }
+})
+```
+
+## チャレンジ
+
+クライアントサイドレンダリングを設定し、Vue.js のコードがブラウザ上のみで実行されることを確認してみましょう。
+
+そのためには:
+
+1. `nuxt.config` に `ssr: false` を設定します。
+2. `app.vue` で `count` と言うステートをコンソールに出力します。
+3. ターミナルでコンソールの出力が行われていないことを確認します。
+4. ブラウザの開発者ツールを開き、コンソールの出力を確認します。
+
+次に、ハイブリッドレンダリングを設定し、ルートごとに異なるキャッシュ ルールとレンダリングモードを選択することができることを確認してみましょう。
+
+そのためには:
+
+1. `app.vue` で `NuxtPage` コンポーネントを使って、ページをレンダリングします。
+2. `/pages/index.vue` と `/pages/foo.vue` で、`script setup` 内コンソールの出力を行います。(内容は任意のもので構いません)
+3. `nuxt.config` に `routeRules` を設定し、`/` と `/foo` に対して異なるキャッシュ ルールとレンダリングモードを設定します。\
+   今回は、`/foo` に `ssr: false` を設定してみましょう。
+4. `/` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。
+5. `/foo` にアクセスし、コンソールの出力がブラウザのみで行われていることを確認します。
+
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
+
+:::note
+レンダリングモードの動作の確認は、実際には console の出力場所だけではなく、開発者ツールのネットワークタブなどを使って、
+リクエストの挙動を確認することも重要です。
+
+ユニバーサルレンダリングの場合はサーバーが HTML を生成するため、ネットワークタブを確認してみるとコンテンツ内容 (主に `<div id="__nuxt">` 内)が完全なものになっているのに対し、クライアントサイドレンダリングの場合は、HTML が空の状態で JavaScript によってコンテンツが生成されていることが確認できます。\
+(ダウンロードした JavaScript も別のリクエストとして観測することができます)
+:::
diff --git a/content/ja/2.concepts/8.state-manegement/.template/files/app.vue b/content/ja/2.concepts/8.state-manegement/.template/files/app.vue
new file mode 100644
index 00000000..4d436277
--- /dev/null
+++ b/content/ja/2.concepts/8.state-manegement/.template/files/app.vue
@@ -0,0 +1,4 @@
+<template>
+  <CounterA />
+  <CounterB />
+</template>
diff --git a/content/ja/2.concepts/8.state-manegement/.template/files/components/CounterA.vue b/content/ja/2.concepts/8.state-manegement/.template/files/components/CounterA.vue
new file mode 100644
index 00000000..529dcce6
--- /dev/null
+++ b/content/ja/2.concepts/8.state-manegement/.template/files/components/CounterA.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const count = useState('count', () => 0)
+</script>
+
+<template>
+  <div>
+    <h2>Counter A</h2>
+    <p>Count: {{ count }}</p>
+    <button type="button" @click="count++">
+      Increment
+    </button>
+  </div>
+</template>
diff --git a/content/ja/2.concepts/8.state-manegement/.template/files/components/CounterB.vue b/content/ja/2.concepts/8.state-manegement/.template/files/components/CounterB.vue
new file mode 100644
index 00000000..8d5dc5dc
--- /dev/null
+++ b/content/ja/2.concepts/8.state-manegement/.template/files/components/CounterB.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const count = useState('count', () => 0)
+</script>
+
+<template>
+  <div>
+    <h2>Counter B</h2>
+    <p>Count: {{ count }}</p>
+    <button type="button" @click="count++">
+      Increment
+    </button>
+  </div>
+</template>
diff --git a/content/ja/2.concepts/8.state-manegement/.template/index.ts b/content/ja/2.concepts/8.state-manegement/.template/index.ts
new file mode 100644
index 00000000..201753ab
--- /dev/null
+++ b/content/ja/2.concepts/8.state-manegement/.template/index.ts
@@ -0,0 +1,8 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    fileTree: true,
+  },
+}
diff --git a/content/ja/2.concepts/8.state-manegement/index.md b/content/ja/2.concepts/8.state-manegement/index.md
new file mode 100644
index 00000000..e17ddd57
--- /dev/null
+++ b/content/ja/2.concepts/8.state-manegement/index.md
@@ -0,0 +1,32 @@
+---
+ogImage: true
+---
+
+# 状態管理
+
+Vue.js での状態管理 (State Management) とは、アプリケーションでリアクティブな状態 (ステート) を管理することを言います。\
+[Vue.js 公式ドキュメント 状態管理](https://ja.vuejs.org/guide/scaling-up/state-management)
+
+複数のコンポーネント間で状態を共有する際、Vue.js ではリアクティビティー API を用いたシンプルな状態管理を行うことができます。\
+[Vue.js 公式ドキュメント リアクティビティー API によるシンプルな状態の管理](https://ja.vuejs.org/guide/scaling-up/state-management#simple-state-management-with-reactivity-api)
+
+しかし、[SSR の考慮](https://ja.vuejs.org/guide/scaling-up/state-management#ssr-considerations) にも書かれているように、Nuxt で SSR を行っている場合には [いくつかの問題](https://ja.vuejs.org/guide/scaling-up/ssr#cross-request-state-pollution) が起こる可能性があります。
+
+Vue.js の公式ドキュメントでは [Pinia](https://pinia.vuejs.org/) と言う状態管理ライブラリを使う方法が紹介されていますが、Nuxt が提供する `useState()` コンポーザブルもその解決策の 1 つです。\
+(もちろん、[Nuxt で Pinia を使用する](https://nuxt.com/docs/getting-started/state-management#usage-with-pinia) ことも可能です)
+
+## useState()
+
+[useState() コンポーザブル](https://nuxt.com/docs/api/composables/use-state) は SSR フレンドリーな状態管理と、コンポーネント間で状態を共有するためのシンプルな方法を提供します。\
+`useState()` は共有状態を定義するための SSR フレンドリーな `ref()` です。\
+前述の通り、Vue.js のリアクティビティー API (e.g. `ref()`) を用いてコンポーネントを跨いだ状態管理を SSR で行う場合、いくつかの問題が発生する可能性があります。\
+そのため、Nuxt では `<script setup>` や `setup()` 関数の **外** では、`ref()` での状態を定義せず、代わりに `useState()` を使用することがベストプラクティスとされています。
+
+このプレイグラウンドの例では、`"count"` をキーに `CounterA` コンポーネントと `CounterB` コンポーネントで状態を共有しています。\
+`CounterA` によってレンダリングされたボタンをクリックしたときに、`CounterB` のステートも更新されることに注目してみてください。
+
+より詳細な説明は、[Nuxt 公式ドキュメント 状態管理](https://nuxt.com/docs/getting-started/state-management) を参照してください。
+
+:::note
+`useState()` のデータは JSON にシリアライズされるため、クラス、関数、シンボルなど、シリアライズできないものを含まないことに注意が必要です。
+:::
diff --git a/content/ja/2.concepts/9.data-fetching/.template/files/app.vue b/content/ja/2.concepts/9.data-fetching/.template/files/app.vue
new file mode 100644
index 00000000..aa204e5d
--- /dev/null
+++ b/content/ja/2.concepts/9.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>
diff --git a/content/ja/2.concepts/9.data-fetching/.template/files/server/api/todos/index.ts b/content/ja/2.concepts/9.data-fetching/.template/files/server/api/todos/index.ts
new file mode 100644
index 00000000..a188fe4f
--- /dev/null
+++ b/content/ja/2.concepts/9.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' },
+  ]
+})
diff --git a/content/ja/2.concepts/9.data-fetching/.template/index.ts b/content/ja/2.concepts/9.data-fetching/.template/index.ts
new file mode 100644
index 00000000..201753ab
--- /dev/null
+++ b/content/ja/2.concepts/9.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,
+  },
+}
diff --git a/content/ja/2.concepts/9.data-fetching/.template/solutions/app.vue b/content/ja/2.concepts/9.data-fetching/.template/solutions/app.vue
new file mode 100644
index 00000000..2862369d
--- /dev/null
+++ b/content/ja/2.concepts/9.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>
diff --git a/content/ja/2.concepts/9.data-fetching/.template/solutions/server/api/todos/index.ts b/content/ja/2.concepts/9.data-fetching/.template/solutions/server/api/todos/index.ts
new file mode 100644
index 00000000..296c53b0
--- /dev/null
+++ b/content/ja/2.concepts/9.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 },
+  ]
+})
diff --git a/content/ja/2.concepts/9.data-fetching/index.md b/content/ja/2.concepts/9.data-fetching/index.md
new file mode 100644
index 00000000..55266153
--- /dev/null
+++ b/content/ja/2.concepts/9.data-fetching/index.md
@@ -0,0 +1,54 @@
+---
+ogImage: true
+---
+
+# データフェッチ
+
+実用的なアプリケーションを作る上で、データフェッチは欠かせない機能です。
+データフェッチとは API やデータベースからデータを取得してくることを指します。
+
+Nuxt では、このデータフェッチを便利に扱うために `useFetch`、 `useAsyncData`、`$fetch` といった関数を提供しています。
+
+一言で言えば、
+
+- `useFetch` は、コンポーネントのセットアップ関数でデータのフェッチを処理する最も簡単な方法です。
+- `$fetch` は、ユーザーのインタラクションに基づいてネットワークリクエストを行うのに最適です。
+- `useAsyncData` は、`$fetch` と組み合わせることで、よりきめ細かい制御を提供します。
+
+https://nuxt.com/docs/getting-started/data-fetching
+
+中でも、useFetch は最も簡単な方法で、実際には `useAsyncData` と `$fetch` の便利なラッパーです。
+
+使い方は以下の通りで、
+
+```vue
+<script setup lang="ts">
+const { data, pending, error, refresh, clear } = await useFetch('/api/modules')
+</script>
+```
+
+具体的には以下のような機能があります。
+
+- サーバーとクライアントの両方で動作する\
+  useFetch はサーバーとクライアントの両方で動作することができるので、ユニバーサルレンダリング時でも簡単にデータフェッチを行うことができます。
+- データキャッシュ\
+  サーバー上で API が呼ばれた時、そのデータをクライアントに転送することで、クライアント側で再度データフェッチが行われることを防ぎます。
+- リクエスト URL とレスポンスの型付け\
+  server ディレクトリに API を実装することで、リクエスト URL とレスポンスの型付けが自動的に行われます。
+
+より詳細な使い方については、[公式ドキュメント](https://nuxt.com/docs/api/composables/use-fetch) を参照してください。
+
+また、より細かい制御を行いたい場合は `useAsyncData` や `$fetch` を利用することで、より高度なデータフェッチを行うことができます。
+
+https://nuxt.com/docs/api/composables/use-async-data
+
+https://nuxt.com/docs/api/utils/dollarfetch
+
+## チャレンジ
+
+1. API の動作を確かめてみる\
+   server/api/todos/index.ts に 4 つめの Todo を追加した後、リフレッシュボタンを押してデータが更新されることを確認してみましょう。
+2. 型付の自動化を確認してみる\
+   server/api/todos/index.ts の Todo に `completed` プロパティを追加し、useFetch の型が更新されていることを確認してみましょう。
+
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
diff --git a/i18n.config.ts b/i18n.config.ts
new file mode 100644
index 00000000..ab9162a0
--- /dev/null
+++ b/i18n.config.ts
@@ -0,0 +1,11 @@
+export default defineI18nConfig(() => ({
+  locale: 'en',
+  messages: {
+    en: {
+      welcome: 'Welcome',
+    },
+    ja: {
+      welcome: 'ようこそ',
+    },
+  },
+}))
diff --git a/middleware/index.global.ts b/middleware/index.global.ts
new file mode 100644
index 00000000..c38762fb
--- /dev/null
+++ b/middleware/index.global.ts
@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.path === '/') {
+    return navigateTo('/en')
+  }
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8c1c6bf3..8b07ff7a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     'floating-vue/nuxt',
     '@nuxt/eslint',
-
+    '@nuxtjs/i18n',
     // local
     '~/modules/template-loader',
     '~/modules/nuxt-link',
@@ -127,6 +127,27 @@ export default defineNuxtConfig({
       },
     },
   },
+
+  i18n: {
+    locales: [
+      {
+        name: 'English',
+        code: 'en',
+      },
+      {
+        name: '日本語',
+        code: 'ja',
+      },
+    ],
+    strategy: 'prefix',
+    defaultLocale: 'en',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root',
+    },
+  },
+
   ogImage: {
     defaults: {
       component: 'OgImageDocs',
diff --git a/package.json b/package.json
index 0cdce13d..c7611a6f 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@nuxt/image": "catalog:nuxt",
     "@nuxt/kit": "catalog:nuxt",
     "@nuxtjs/color-mode": "catalog:nuxt",
+    "@nuxtjs/i18n": "catalog:",
     "@nuxtjs/seo": "catalog:nuxt",
     "@pinia/nuxt": "catalog:nuxt",
     "@unocss/eslint-plugin": "catalog:dev",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ded49ca..8c331822 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -263,6 +263,9 @@ importers:
       '@nuxtjs/color-mode':
         specifier: catalog:nuxt
         version: 3.5.2(magicast@0.3.5)
+      '@nuxtjs/i18n':
+        specifier: 9.4.0
+        version: 9.4.0(@vue/compiler-dom@3.5.13)(eslint@9.23.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.37.0)(vue@3.5.13(typescript@5.8.2))
       '@nuxtjs/seo':
         specifier: catalog:nuxt
         version: 3.0.1(@unhead/vue@2.0.0(vue@3.5.13(typescript@5.8.2)))(h3@1.15.1)(magicast@0.3.5)(rollup@4.37.0)(unstorage@1.15.0(db0@0.3.1(better-sqlite3@11.9.1))(ioredis@5.6.0))(vite@6.2.2(@types/node@22.13.11)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
@@ -820,6 +823,81 @@ packages:
     peerDependencies:
       vue: '>=3'
 
+  '@intlify/bundle-utils@10.0.1':
+    resolution: {integrity: sha512-WkaXfSevtpgtUR4t8K2M6lbR7g03mtOxFeh+vXp5KExvPqS12ppaRj1QxzwRuRI5VUto54A22BjKoBMLyHILWQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/core-base@10.0.6':
+    resolution: {integrity: sha512-/NINGvy7t8qSCyyuqMIPmHS6CBQjqPIPVOps0Rb7xWrwwkwHJKtahiFnW1HC4iQVhzoYwEW6Js0923zTScLDiA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/core@10.0.6':
+    resolution: {integrity: sha512-C325rIyg5+wM6FUPbTMTaDPQ3Yu9lwC9JRIaWZKVy+My3kXi0j0u76ifQ351CjqFoJDg7GLR/UpUPQlF25qhKQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/h3@0.6.1':
+    resolution: {integrity: sha512-hFMcqWXCoFNZkraa+JF7wzByGdE0vGi8rUs7CTFrE4hE3X2u9QcelH8VRO8mPgJDH+TgatzvrVp6iZsWVluk2A==}
+    engines: {node: '>= 18'}
+
+  '@intlify/message-compiler@10.0.6':
+    resolution: {integrity: sha512-QcUYprK+e4X2lU6eJDxLuf/mUtCuVPj2RFBoFRlJJxK3wskBejzlRvh1Q0lQCi9tDOnD4iUK1ftcGylE3X3idA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@11.1.2':
+    resolution: {integrity: sha512-T/xbNDzi+Yv0Qn2Dfz2CWCAJiwNgU5d95EhhAEf4YmOgjCKktpfpiUSmLcBvK1CtLpPQ85AMMQk/2NCcXnNj1g==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@10.0.6':
+    resolution: {integrity: sha512-2xqwm05YPpo7TM//+v0bzS0FWiTzsjpSMnWdt7ZXs5/ZfQIedSuBXIrskd8HZ7c/cZzo1G9ALHTksnv/74vk/Q==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.1.2':
+    resolution: {integrity: sha512-dF2iMMy8P9uKVHV/20LA1ulFLL+MKSbfMiixSmn6fpwqzvix38OIc7ebgnFbBqElvghZCW9ACtzKTGKsTGTWGA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/unplugin-vue-i18n@6.0.5':
+    resolution: {integrity: sha512-0MKaYhLvM46Mtm+OArkK75ztmqaFfhIvnm5mg8XKqCPAKVAK98o+8tB6gUQFkKrF5PMYsNXvyMJCi40cRCDJbA==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue: ^3.2.25
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/utils@0.13.0':
+    resolution: {integrity: sha512-8i3uRdAxCGzuHwfmHcVjeLQBtysQB2aXl/ojoagDut5/gY5lvWCQ2+cnl2TiqE/fXj/D8EhWG/SLKA7qz4a3QA==}
+    engines: {node: '>= 18'}
+
+  '@intlify/vue-i18n-extensions@8.0.0':
+    resolution: {integrity: sha512-w0+70CvTmuqbskWfzeYhn0IXxllr6mU+IeM2MU0M+j9OW64jkrvqY+pYFWrUnIIC9bEdij3NICruicwd5EgUuQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      '@intlify/shared': ^9.0.0 || ^10.0.0 || ^11.0.0
+      '@vue/compiler-dom': ^3.0.0
+      vue: ^3.0.0
+      vue-i18n: ^9.0.0 || ^10.0.0 || ^11.0.0
+    peerDependenciesMeta:
+      '@intlify/shared':
+        optional: true
+      '@vue/compiler-dom':
+        optional: true
+      vue:
+        optional: true
+      vue-i18n:
+        optional: true
+
   '@ioredis/commands@1.2.0':
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
 
@@ -869,6 +947,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@miyaneee/rollup-plugin-json5@1.2.0':
+    resolution: {integrity: sha512-JjTIaXZp9WzhUHpElrqPnl1AzBi/rvRs065F71+aTmlqvTMVkdbjZ8vfFl4nRlgJy+TPBw69ZK4pwFdmOAt4aA==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+
   '@napi-rs/wasm-runtime@0.2.7':
     resolution: {integrity: sha512-5yximcFK5FNompXfJFoWanu5l8v1hNGqNHh9du1xETp9HWk/B/PzvchX55WYOPaIeNglG8++68AAiauBAtbnzw==}
 
@@ -996,6 +1079,10 @@ packages:
   '@nuxtjs/color-mode@3.5.2':
     resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
 
+  '@nuxtjs/i18n@9.4.0':
+    resolution: {integrity: sha512-WREUig3PIdlcd3WbfRtmPx9HoLTUB7vUnbUvPS48O/qebntvAtlJKWjxaaBKpFof1RfbGmvPwtmEt+sYdJ6N3w==}
+    engines: {node: '>=18.12.0'}
+
   '@nuxtjs/mdc@0.16.1':
     resolution: {integrity: sha512-di9Ox9QY5pO2eIkQPyKFe9O8L3RvIrGbmjI3rJQRj1xGYRFj2S9RvBPCFbvfaqQGOTjOfxHLg8KtQIGj1Iw/lg==}
 
@@ -1015,59 +1102,118 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-arm64@0.61.2':
+    resolution: {integrity: sha512-xpDuwawMDCHg3plbSjpMbrhNTzO1AlvvHqsUOTE3WDmv5K7fFD72f3Pl+SxPJ4D/IhMdskec1B5ZfZHM1iAFmQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-x64@0.56.5':
     resolution: {integrity: sha512-Rr7aMkqcxGIM6fgkpaj9SJj0u1O1g+AT7mJwmdi5PLSQRPR4CkDKfztEnAj5k+d2blWvh9nPZH8G0OCwxIHk1Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-x64@0.61.2':
+    resolution: {integrity: sha512-1zjghOALDDhg5mPJgQfoud/bLOxD3M9n8l2LxXK4NngxGh3xXq1K7vAs2dzDnwZI6FaStrrBMDJSocT2hggiLg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.56.5':
     resolution: {integrity: sha512-jcFCThrWUt5k1GM43tdmI1m2dEnWUPPHHTWKBJbZBXzXLrJJzkqv5OU87Spf1004rYj9swwpa13kIldFwMzglA==}
     engines: {node: '>=14.0.0'}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.61.2':
+    resolution: {integrity: sha512-OppSdOE7BAHfx/hNbsS4tf+CPCEWEXeEB/4tJKcv6qysZKsTD6XXWUzn2F7KR7TFNSzA0hPjnZyezjFgo+xvcQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm64-gnu@0.56.5':
     resolution: {integrity: sha512-zo/9RDgWvugKxCpHHcAC5EW0AqoEvODJ4Iv4aT1Xonv6kcydbyPSXJBQhhZUvTXTAFIlQKl6INHl+Xki9Qs3fw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.61.2':
+    resolution: {integrity: sha512-CqhKWDvVr4rZpi8Evh/K7FKwn9UnPhF0F0ivF+CsFCMOaS5egalmFRRybQk1QuwGq1XjTA3D8puqvlF0p82+ew==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm64-musl@0.56.5':
     resolution: {integrity: sha512-SCIqrL5apVbrtMoqOpKX/Ez+c46WmW0Tyhtu+Xby281biH+wYu70m+fux9ZsGmbHc2ojd4FxUcaUdCZtb5uTOQ==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm64-musl@0.61.2':
+    resolution: {integrity: sha512-wLtzWy6EyMf7F83pcJhanolaQ7xnwnVAj2wjdJ52qgX4oQjqZZUo6Rk/LE2iY8Aq/R2Bx2yREFeIC4R1kjtB0A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-x64-gnu@0.56.5':
     resolution: {integrity: sha512-I2mpX35NWo83hay4wrnzFLk3VuGK1BBwHaqvEdqsCode8iG8slYJRJPICVbCEWlkR3rotlTQ+608JcRU0VqZ5Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-x64-gnu@0.61.2':
+    resolution: {integrity: sha512-aJ+g/pDcOeqfB2bVZkUjHlCBL8H7lsgkuYVGKKLYxN/oLjrt2Jf/BVu6fL3NxmSSaFmtHKowDgoRAjiKwxQWEQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-x64-musl@0.56.5':
     resolution: {integrity: sha512-xfzUHGYOh3PGWZdBuY5r1czvE8EGWPAmhTWHqkw3/uAfUVWN/qrrLjMojiaiWyUgl/9XIFg05m5CJH9dnngh5Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-x64-musl@0.61.2':
+    resolution: {integrity: sha512-PosnNyxTqCiMTgva5w695p3ooCcFU8tU+c+JnGgkBgD8pKTbV6fwn8dc4GlcgyyLaM1rD+zi/s+4ooTVML8iIA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-parser/binding-wasm32-wasi@0.56.5':
     resolution: {integrity: sha512-+z3Ofmc1v5kcu8fXgG5vn7T1f52P47ceTTmTXsm5HPY7rq5EMYRUaBnxH6cesXwY1OVVCwYlIZbCiy8Pm1w8zQ==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-parser/binding-wasm32-wasi@0.61.2':
+    resolution: {integrity: sha512-zOxdLDItMXeB1GdVCtOOW+aC+Ra6C4E1ivT4rbhaaVe70RsCRa2fGmNC0divvgfQsL2eGBkCuB4d4N9DjfhK4Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@oxc-parser/binding-win32-arm64-msvc@0.56.5':
     resolution: {integrity: sha512-pRg8QrbMh8PgnXBreiONoJBR306u+JN19BXQC7oKIaG4Zxt9Mn8XIyuhUv3ytqjLudSiG2ERWQUoCGLs+yfW0A==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.61.2':
+    resolution: {integrity: sha512-E7VMrb4XF748hyzIax2KV7TEfi27SfXoi/BH5guiBicSef/31qwHRdKCh708lmIYmbeEJ9D0wO/25K6dvTl8QQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-x64-msvc@0.56.5':
     resolution: {integrity: sha512-VALZNcuyw/6rwsxOACQ2YS6rey2d/ym4cNfXqJrHB/MZduAPj4xvij72gHGu3Ywm31KVGLVWk/mrMRiM9CINcA==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-x64-msvc@0.61.2':
+    resolution: {integrity: sha512-GtRVVz4DGF94MzlJ7xCIpITu6WKYdTqWc2cqMaJEzYDC8EsHjNkfbGhmawhyodFFuTfWqPAjJecIvvAnfMLpxw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-parser/wasm@0.60.0':
     resolution: {integrity: sha512-Dkf9/D87WGBCW3L0+1DtpAfL4SrNsgeRvxwjpKCtbH7Kf6K+pxrT0IridaJfmWKu1Ml+fDvj+7HEyBcfUC/TXQ==}
 
@@ -1077,6 +1223,9 @@ packages:
   '@oxc-project/types@0.60.0':
     resolution: {integrity: sha512-prhfNnb3ATFHOCv7mzKFfwLij5RzoUz6Y1n525ZhCEqfq5wreCXL+DyVoq3ShukPo7q45ZjYIdjFUgjj+WKzng==}
 
+  '@oxc-project/types@0.61.2':
+    resolution: {integrity: sha512-rfuwJwvwn9MRthHNXlSo9Eka/u7gC0MhnWAoX3BhE1+rwPOl22nq0K0Y997Hof0tHCOuD7H3/Z8HTfCVhB4c5Q==}
+
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -1345,6 +1494,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-yaml@4.1.2':
+    resolution: {integrity: sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/pluginutils@5.1.4':
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
     engines: {node: '>=14.0.0'}
@@ -2813,6 +2971,11 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
   eslint-compat-utils@0.5.1:
     resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
     engines: {node: '>=12'}
@@ -3005,6 +3168,11 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   esquery@1.6.0:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
@@ -3520,6 +3688,9 @@ packages:
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
+  is-https@4.0.0:
+    resolution: {integrity: sha512-FeMLiqf8E5g6SdiVJsPcNZX8k4h2fBs1wp5Bb6uaNxn58ufK1axBqQZdmAQsqh0t9BuwFObybrdVJh6MKyPlyg==}
+
   is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
     engines: {node: '>=14.16'}
@@ -4240,6 +4411,10 @@ packages:
     resolution: {integrity: sha512-MNT32sqiTFeSbQZP2WZIRQ/mlIpNNq4sua+/4hBG4qT5aef2iQe+1/BjezZURPlvucZeSfN1Y6b60l7OgBdyUA==}
     engines: {node: '>=14.0.0'}
 
+  oxc-parser@0.61.2:
+    resolution: {integrity: sha512-ZJnAP7VLQhqqnfku7+gssTwmbQyfbZ552Vly4O2BMHkvDwfwLlPtAIYjMq57Lcj5HLmopI0oZlk7xTSML/YsZA==}
+    engines: {node: '>=14.0.0'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -5180,6 +5355,10 @@ packages:
     resolution: {integrity: sha512-khrZo4buq4qVmsGzS5yQjKe/WsFvV8fGfOjDQN0q4iy9FjRfPWRgTFrU8u1R2iu/SfWLhY9WnCi4Jhdrcbtg+g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  tosource@2.0.0-alpha.3:
+    resolution: {integrity: sha512-KAB2lrSS48y91MzFPFuDg4hLbvDiyTjOVgaK7Erw+5AmZXNq4sFRVn8r6yxSLuNs15PaokrDRpS61ERY9uZOug==}
+    engines: {node: '>=10'}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -5652,6 +5831,12 @@ packages:
     peerDependencies:
       vue: ^3.4.37
 
+  vue-i18n@10.0.6:
+    resolution: {integrity: sha512-pQPspK5H4srzlu+47+HEY2tmiY3GyYIvSPgSBdQaYVWv7t1zj1t9p1FvHlxBXyJ17t9stG/Vxj+pykrvPWBLeQ==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue-resize@2.0.0-alpha.1:
     resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
     peerDependencies:
@@ -6385,6 +6570,87 @@ snapshots:
       '@iconify/types': 2.0.0
       vue: 3.5.13(typescript@5.8.2)
 
+  '@intlify/bundle-utils@10.0.1(vue-i18n@10.0.6(vue@3.5.13(typescript@5.8.2)))':
+    dependencies:
+      '@intlify/message-compiler': 11.1.2
+      '@intlify/shared': 11.1.2
+      acorn: 8.14.1
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.0
+      mlly: 1.7.4
+      source-map-js: 1.2.1
+      yaml-eslint-parser: 1.3.0
+    optionalDependencies:
+      vue-i18n: 10.0.6(vue@3.5.13(typescript@5.8.2))
+
+  '@intlify/core-base@10.0.6':
+    dependencies:
+      '@intlify/message-compiler': 10.0.6
+      '@intlify/shared': 10.0.6
+
+  '@intlify/core@10.0.6':
+    dependencies:
+      '@intlify/core-base': 10.0.6
+      '@intlify/shared': 10.0.6
+
+  '@intlify/h3@0.6.1':
+    dependencies:
+      '@intlify/core': 10.0.6
+      '@intlify/utils': 0.13.0
+
+  '@intlify/message-compiler@10.0.6':
+    dependencies:
+      '@intlify/shared': 10.0.6
+      source-map-js: 1.2.1
+
+  '@intlify/message-compiler@11.1.2':
+    dependencies:
+      '@intlify/shared': 11.1.2
+      source-map-js: 1.2.1
+
+  '@intlify/shared@10.0.6': {}
+
+  '@intlify/shared@11.1.2': {}
+
+  '@intlify/unplugin-vue-i18n@6.0.5(@vue/compiler-dom@3.5.13)(eslint@9.23.0(jiti@2.4.2))(rollup@4.37.0)(typescript@5.8.2)(vue-i18n@10.0.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0(jiti@2.4.2))
+      '@intlify/bundle-utils': 10.0.1(vue-i18n@10.0.6(vue@3.5.13(typescript@5.8.2)))
+      '@intlify/shared': 11.1.2
+      '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.1.2)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      '@rollup/pluginutils': 5.1.4(rollup@4.37.0)
+      '@typescript-eslint/scope-manager': 8.27.0
+      '@typescript-eslint/typescript-estree': 8.27.0(typescript@5.8.2)
+      debug: 4.4.0(supports-color@9.4.0)
+      fast-glob: 3.3.3
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+      unplugin: 1.16.1
+      vue: 3.5.13(typescript@5.8.2)
+    optionalDependencies:
+      vue-i18n: 10.0.6(vue@3.5.13(typescript@5.8.2))
+    transitivePeerDependencies:
+      - '@vue/compiler-dom'
+      - eslint
+      - rollup
+      - supports-color
+      - typescript
+
+  '@intlify/utils@0.13.0': {}
+
+  '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.1.2)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@babel/parser': 7.26.10
+    optionalDependencies:
+      '@intlify/shared': 11.1.2
+      '@vue/compiler-dom': 3.5.13
+      vue: 3.5.13(typescript@5.8.2)
+      vue-i18n: 10.0.6(vue@3.5.13(typescript@5.8.2))
+
   '@ioredis/commands@1.2.0': {}
 
   '@isaacs/cliui@8.0.2':
@@ -6447,6 +6713,12 @@ snapshots:
       - encoding
       - supports-color
 
+  '@miyaneee/rollup-plugin-json5@1.2.0(rollup@4.37.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.4(rollup@4.37.0)
+      json5: 2.2.3
+      rollup: 4.37.0
+
   '@napi-rs/wasm-runtime@0.2.7':
     dependencies:
       '@emnapi/core': 1.3.1
@@ -6874,6 +7146,42 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxtjs/i18n@9.4.0(@vue/compiler-dom@3.5.13)(eslint@9.23.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.37.0)(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@intlify/h3': 0.6.1
+      '@intlify/shared': 10.0.6
+      '@intlify/unplugin-vue-i18n': 6.0.5(@vue/compiler-dom@3.5.13)(eslint@9.23.0(jiti@2.4.2))(rollup@4.37.0)(typescript@5.8.2)(vue-i18n@10.0.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      '@intlify/utils': 0.13.0
+      '@miyaneee/rollup-plugin-json5': 1.2.0(rollup@4.37.0)
+      '@nuxt/kit': 3.16.1(magicast@0.3.5)
+      '@oxc-parser/wasm': 0.60.0
+      '@rollup/plugin-yaml': 4.1.2(rollup@4.37.0)
+      '@vue/compiler-sfc': 3.5.13
+      debug: 4.4.0(supports-color@9.4.0)
+      defu: 6.1.4
+      esbuild: 0.25.1
+      estree-walker: 3.0.3
+      is-https: 4.0.0
+      knitwork: 1.2.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      oxc-parser: 0.61.2
+      pathe: 2.0.3
+      typescript: 5.8.2
+      ufo: 1.5.4
+      unplugin: 2.2.2
+      unplugin-vue-router: 0.12.0(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      vue-i18n: 10.0.6(vue@3.5.13(typescript@5.8.2))
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.8.2))
+    transitivePeerDependencies:
+      - '@vue/compiler-dom'
+      - eslint
+      - magicast
+      - petite-vue-i18n
+      - rollup
+      - supports-color
+      - vue
+
   '@nuxtjs/mdc@0.16.1(magicast@0.3.5)':
     dependencies:
       '@nuxt/kit': 3.16.1(magicast@0.3.5)
@@ -6979,35 +7287,67 @@ snapshots:
   '@oxc-parser/binding-darwin-arm64@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-darwin-arm64@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-darwin-x64@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-darwin-x64@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-gnu@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-musl@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-musl@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-gnu@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-gnu@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-musl@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-musl@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-wasm32-wasi@0.56.5':
     dependencies:
       '@napi-rs/wasm-runtime': 0.2.7
     optional: true
 
+  '@oxc-parser/binding-wasm32-wasi@0.61.2':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.7
+    optional: true
+
   '@oxc-parser/binding-win32-arm64-msvc@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.61.2':
+    optional: true
+
   '@oxc-parser/binding-win32-x64-msvc@0.56.5':
     optional: true
 
+  '@oxc-parser/binding-win32-x64-msvc@0.61.2':
+    optional: true
+
   '@oxc-parser/wasm@0.60.0':
     dependencies:
       '@oxc-project/types': 0.60.0
@@ -7016,6 +7356,8 @@ snapshots:
 
   '@oxc-project/types@0.60.0': {}
 
+  '@oxc-project/types@0.61.2': {}
+
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -7238,6 +7580,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.37.0
 
+  '@rollup/plugin-yaml@4.1.2(rollup@4.37.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.4(rollup@4.37.0)
+      js-yaml: 4.1.0
+      tosource: 2.0.0-alpha.3
+    optionalDependencies:
+      rollup: 4.37.0
+
   '@rollup/pluginutils@5.1.4(rollup@4.37.0)':
     dependencies:
       '@types/estree': 1.0.6
@@ -8902,6 +9252,14 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
   eslint-compat-utils@0.5.1(eslint@9.23.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.23.0(jiti@2.4.2)
@@ -9205,6 +9563,8 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.14.1)
       eslint-visitor-keys: 3.4.3
 
+  esprima@4.0.1: {}
+
   esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
@@ -9823,6 +10183,8 @@ snapshots:
 
   is-hexadecimal@2.0.1: {}
 
+  is-https@4.0.0: {}
+
   is-inside-container@1.0.0:
     dependencies:
       is-docker: 3.0.0
@@ -10988,6 +11350,21 @@ snapshots:
       '@oxc-parser/binding-win32-arm64-msvc': 0.56.5
       '@oxc-parser/binding-win32-x64-msvc': 0.56.5
 
+  oxc-parser@0.61.2:
+    dependencies:
+      '@oxc-project/types': 0.61.2
+    optionalDependencies:
+      '@oxc-parser/binding-darwin-arm64': 0.61.2
+      '@oxc-parser/binding-darwin-x64': 0.61.2
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.61.2
+      '@oxc-parser/binding-linux-arm64-gnu': 0.61.2
+      '@oxc-parser/binding-linux-arm64-musl': 0.61.2
+      '@oxc-parser/binding-linux-x64-gnu': 0.61.2
+      '@oxc-parser/binding-linux-x64-musl': 0.61.2
+      '@oxc-parser/binding-wasm32-wasi': 0.61.2
+      '@oxc-parser/binding-win32-arm64-msvc': 0.61.2
+      '@oxc-parser/binding-win32-x64-msvc': 0.61.2
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -12068,6 +12445,8 @@ snapshots:
     dependencies:
       eslint-visitor-keys: 3.4.3
 
+  tosource@2.0.0-alpha.3: {}
+
   totalist@3.0.1: {}
 
   tr46@0.0.3: {}
@@ -12575,6 +12954,13 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.8.2)
 
+  vue-i18n@10.0.6(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      '@intlify/core-base': 10.0.6
+      '@intlify/shared': 10.0.6
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.8.2)
+
   vue-resize@2.0.0-alpha.1(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       vue: 3.5.13(typescript@5.8.2)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6b05a490..746cb6a6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -54,8 +54,24 @@ catalogs:
     '@vueuse/nuxt': ^13.0.0
     nuxi: ^3.23.1
     nuxt: ^3.16.1
+  conflicts_nuxt_:
+    '@nuxt/content': ''
+  conflicts_nuxt_h:
+    '@nuxt/content': ^
+  conflicts_nuxt_h3:
+    '@nuxt/content': ^3
+  conflicts_nuxt_h3_:
+    '@nuxt/content': ^3.
+  conflicts_nuxt_h3_0:
+    '@nuxt/content': ^3.0
+  conflicts_nuxt_h3_0_:
+    '@nuxt/content': ^3.0.
+  conflicts_nuxt_h3_0_0:
+    '@nuxt/content': ^3.0.0
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - better-sqlite3
   - esbuild
   - sharp
+catalog:
+  '@nuxtjs/i18n': 9.4.0

From 8981e3ef1ddc9098fc452789411be78e09c7771f Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Tue, 1 Apr 2025 21:34:10 +0900
Subject: [PATCH 2/6] feat: translate some ui

---
 .vscode/settings.json                     | 10 +++++++++-
 components/ColorSchemeToggle.vue          |  4 ++--
 components/PanelDocs.vue                  |  4 ++--
 components/PanelTerminal.vue              |  6 +++---
 components/TheNav.vue                     | 12 ++++++------
 components/content/ButtonShowSolution.vue |  2 +-
 components/content/ContentCard.vue        |  2 +-
 i18n.config.ts                            | 11 -----------
 i18n/locales/en.yaml                      | 16 ++++++++++++++++
 i18n/locales/ja.yaml                      | 16 ++++++++++++++++
 nuxt.config.ts                            |  6 ++++++
 11 files changed, 62 insertions(+), 27 deletions(-)
 delete mode 100644 i18n.config.ts
 create mode 100644 i18n/locales/en.yaml
 create mode 100644 i18n/locales/ja.yaml

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0a477dc4..e025abb4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -34,5 +34,13 @@
     "json",
     "jsonc",
     "yaml"
-  ]
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "vue"
+  ],
+  "i18n-ally.localesPaths": [
+    "i18n/locales"
+  ],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "en"
 }
diff --git a/components/ColorSchemeToggle.vue b/components/ColorSchemeToggle.vue
index 13e0e679..61137150 100644
--- a/components/ColorSchemeToggle.vue
+++ b/components/ColorSchemeToggle.vue
@@ -9,8 +9,8 @@ addCommands(
   {
     id: 'toggle-color-mode',
     title: colorMode.value === 'light'
-      ? 'Switch to dark mode'
-      : 'Switch to light mode',
+      ? $t('color-mode.to-dark')
+      : $t('color-mode.to-light'),
     handler: toggleMode,
     icon: colorMode.value === 'light'
       ? 'i-ph-moon-stars-duotone'
diff --git a/components/PanelDocs.vue b/components/PanelDocs.vue
index 0b48c666..491d6fbe 100644
--- a/components/PanelDocs.vue
+++ b/components/PanelDocs.vue
@@ -55,7 +55,7 @@ const breadcrumbs = computed(() => {
 
   if (!breadcrumbs.find(i => i.path === '/')) {
     breadcrumbs.unshift({
-      title: 'Guide',
+      title: $t('guide'),
       path: '/',
     })
   }
@@ -134,7 +134,7 @@ router.beforeEach(() => {
             hover="text-primary op100"
           >
             <div i-ph-note-pencil-duotone />
-            Edit this page
+            {{ $t('edit-this-page') }}
           </NuxtLink>
         </div>
       </article>
diff --git a/components/PanelTerminal.vue b/components/PanelTerminal.vue
index c43bd297..0904bacb 100644
--- a/components/PanelTerminal.vue
+++ b/components/PanelTerminal.vue
@@ -11,19 +11,19 @@ const play = usePlaygroundStore()
       bg-faded p2 pl4
     >
       <div i-ph-terminal-window-duotone />
-      <span text-sm>Terminal</span>
+      <span text-sm>{{ $t('terminal.name') }}</span>
       <div flex-auto />
       <button
         v-if="play.status !== 'init' && play.status !== 'mount'"
         hover="bg-active" rounded p1
-        title="Restart terminal"
+        :title="$t('terminal.restart')"
         @click="play.restartServer()"
       >
         <div i-ph-arrow-clockwise-duotone />
       </button>
       <button
         hover="bg-active" rounded p1
-        title="Hide terminal"
+        :title="$t('terminal.hide')"
         @click="ui.toggleTerminal()"
       >
         <div i-ph-x-bold />
diff --git a/components/TheNav.vue b/components/TheNav.vue
index 58b3a070..d8f21097 100644
--- a/components/TheNav.vue
+++ b/components/TheNav.vue
@@ -26,7 +26,7 @@ const i18n = useI18n()
 addCommands(
   {
     id: 'download-zip',
-    title: 'Download playground as ZIP',
+    title: $t('download-zip'),
     visible: () => {
       return play.status === 'ready' && guide.features.download !== false
     },
@@ -37,7 +37,7 @@ addCommands(
   },
   {
     id: 'toggle-terminal',
-    title: 'Toggle terminal',
+    title: $t('terminal.toggle'),
     handler: () => {
       ui.toggleTerminal()
     },
@@ -58,7 +58,7 @@ addCommands(
       target="_blank"
     >
       <div block translate-y--2 rounded bg-orange:10 px2 py1 text-xs text-orange>
-        Work in Progress
+        {{ $t('work-in-progress') }}
       </div>
     </NuxtLink>
 
@@ -92,7 +92,7 @@ addCommands(
       <button
         rounded p2
         hover="bg-active"
-        title="Search"
+        :title="$t('search')"
         @click="commands.isShown = true"
       >
         <div i-ph-magnifying-glass-duotone text-2xl />
@@ -101,7 +101,7 @@ addCommands(
         v-if="play.status === 'ready' && !!guide.features.download"
         rounded p2
         hover="bg-active"
-        title="Download as ZIP"
+        :title="$t('download-zip')"
         @click="downloadCurrentGuide()"
       >
         <div i-ph-download-duotone text-2xl />
@@ -127,7 +127,7 @@ addCommands(
       </VDropdown>
       <button
         rounded p2
-        title="Toggle terminal"
+        :title="$t('terminal.toggle')"
         hover="bg-active"
         :class="ui.showTerminal ? '' : 'op50'"
         @click="ui.toggleTerminal()"
diff --git a/components/content/ButtonShowSolution.vue b/components/content/ButtonShowSolution.vue
index 67e4a56a..23ea602c 100644
--- a/components/content/ButtonShowSolution.vue
+++ b/components/content/ButtonShowSolution.vue
@@ -10,6 +10,6 @@ const guide = useGuideStore()
   >
     <div v-if="!guide.showingSolution " i-ph-lightbulb-filament-duotone />
     <div v-else i-ph-arrow-counter-clockwise-duotone />
-    {{ guide.showingSolution ? 'Reset challenge' : 'Show solution' }}
+    {{ guide.showingSolution ? $t('reset-challenge') : $t('show-solution') }}
   </button>
 </template>
diff --git a/components/content/ContentCard.vue b/components/content/ContentCard.vue
index 65188f2e..d3766592 100644
--- a/components/content/ContentCard.vue
+++ b/components/content/ContentCard.vue
@@ -19,7 +19,7 @@ defineProps<{
     <div class="my-0 text-lg font-semibold">
       {{ title }}
       <sup v-if="wip" rounded bg-primary:10 px1 text-sm text-primary font-normal>
-        Coming Soon
+        {{ $t('coming-soon') }}
       </sup>
     </div>
     <div class="mb-0 mt-1 text-[15px] op50">
diff --git a/i18n.config.ts b/i18n.config.ts
deleted file mode 100644
index ab9162a0..00000000
--- a/i18n.config.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default defineI18nConfig(() => ({
-  locale: 'en',
-  messages: {
-    en: {
-      welcome: 'Welcome',
-    },
-    ja: {
-      welcome: 'ようこそ',
-    },
-  },
-}))
diff --git a/i18n/locales/en.yaml b/i18n/locales/en.yaml
new file mode 100644
index 00000000..8755e138
--- /dev/null
+++ b/i18n/locales/en.yaml
@@ -0,0 +1,16 @@
+guide: Guide
+edit-this-page: Edit this page
+terminal:
+  name: Terminal
+  restart: Restart terminal
+  hide: Hide terminal
+  toggle: Toggle terminal
+download-zip: Download playground as ZIP
+work-in-progress: Work in Progress
+search: Search
+color-mode:
+  to-dark: Switch to dark mode
+  to-light: Switch to light mode
+coming-soon: Coming Soon
+reset-challenge: Reset challenge
+show-solution: Show solution
diff --git a/i18n/locales/ja.yaml b/i18n/locales/ja.yaml
new file mode 100644
index 00000000..107e79b9
--- /dev/null
+++ b/i18n/locales/ja.yaml
@@ -0,0 +1,16 @@
+guide: ガイド
+edit-this-page: このページを編集
+terminal:
+  name: ターミナル
+  restart: ターミナルを再起動
+  hide: ターミナルを非表示
+  toggle: ターミナルを切り替える
+download-zip: プレイグラウンドをZIPとしてダウンロード
+work-in-progress: 作業中
+search: 検索
+color-mode:
+  to-dark: ダークモードに切り替える
+  to-light: ライトモードに切り替える
+coming-soon: 作業中
+reset-challenge: 挑戦をリセット
+show-solution: 解答を表示
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8b07ff7a..d8112f41 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -133,12 +133,15 @@ export default defineNuxtConfig({
       {
         name: 'English',
         code: 'en',
+        file: 'en.yaml',
       },
       {
         name: '日本語',
         code: 'ja',
+        file: 'ja.yaml',
       },
     ],
+    lazy: true,
     strategy: 'prefix',
     defaultLocale: 'en',
     detectBrowserLanguage: {
@@ -146,6 +149,9 @@ export default defineNuxtConfig({
       cookieKey: 'i18n_redirected',
       redirectOn: 'root',
     },
+    experimental: {
+      autoImportTranslationFunctions: true,
+    },
   },
 
   ogImage: {

From 84fd4e96be655786f251991d7a7173853f8c3899 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Tue, 1 Apr 2025 22:00:57 +0900
Subject: [PATCH 3/6] chore: update lock

---
 package.json        |  2 +-
 pnpm-lock.yaml      |  5 ++++-
 pnpm-workspace.yaml | 17 +----------------
 3 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index c7611a6f..67aa17ac 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@nuxt/image": "catalog:nuxt",
     "@nuxt/kit": "catalog:nuxt",
     "@nuxtjs/color-mode": "catalog:nuxt",
-    "@nuxtjs/i18n": "catalog:",
+    "@nuxtjs/i18n": "catalog:nuxt",
     "@nuxtjs/seo": "catalog:nuxt",
     "@pinia/nuxt": "catalog:nuxt",
     "@unocss/eslint-plugin": "catalog:dev",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c331822..7ff0d87a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,6 +132,9 @@ catalogs:
     '@nuxtjs/color-mode':
       specifier: ^3.5.2
       version: 3.5.2
+    '@nuxtjs/i18n':
+      specifier: ^9.4.0
+      version: 9.4.0
     '@nuxtjs/seo':
       specifier: ^3.0.1
       version: 3.0.1
@@ -264,7 +267,7 @@ importers:
         specifier: catalog:nuxt
         version: 3.5.2(magicast@0.3.5)
       '@nuxtjs/i18n':
-        specifier: 9.4.0
+        specifier: catalog:nuxt
         version: 9.4.0(@vue/compiler-dom@3.5.13)(eslint@9.23.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.37.0)(vue@3.5.13(typescript@5.8.2))
       '@nuxtjs/seo':
         specifier: catalog:nuxt
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 746cb6a6..7d15857c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -47,6 +47,7 @@ catalogs:
     '@nuxt/image': ^1.10.0
     '@nuxt/kit': ^3.16.1
     '@nuxtjs/color-mode': ^3.5.2
+    '@nuxtjs/i18n': ^9.4.0
     '@nuxtjs/seo': ^3.0.1
     '@pinia/nuxt': ^0.10.1
     '@unocss/extractor-mdc': ^65.5.0
@@ -54,24 +55,8 @@ catalogs:
     '@vueuse/nuxt': ^13.0.0
     nuxi: ^3.23.1
     nuxt: ^3.16.1
-  conflicts_nuxt_:
-    '@nuxt/content': ''
-  conflicts_nuxt_h:
-    '@nuxt/content': ^
-  conflicts_nuxt_h3:
-    '@nuxt/content': ^3
-  conflicts_nuxt_h3_:
-    '@nuxt/content': ^3.
-  conflicts_nuxt_h3_0:
-    '@nuxt/content': ^3.0
-  conflicts_nuxt_h3_0_:
-    '@nuxt/content': ^3.0.
-  conflicts_nuxt_h3_0_0:
-    '@nuxt/content': ^3.0.0
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - better-sqlite3
   - esbuild
   - sharp
-catalog:
-  '@nuxtjs/i18n': 9.4.0

From c543a9ea094121d4befecbf9506f8ae739cd100f Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Wed, 2 Apr 2025 13:15:32 +0900
Subject: [PATCH 4/6] feat: separate collection

---
 components/ColorSchemeToggle.vue   |  2 +-
 components/CommandPalette.vue      | 14 ++++++++++----
 components/PanelDocs.vue           | 18 ++++++++++++------
 components/PanelPreviewLoading.vue | 14 +++++++-------
 components/TheNav.vue              | 26 ++++++++++++++++++++++++--
 content.config.ts                  | 11 +++++++++--
 i18n/locales/en.yaml               | 11 ++++++++++-
 i18n/locales/ja.yaml               |  9 +++++++++
 stores/commands.ts                 |  7 +++++--
 9 files changed, 87 insertions(+), 25 deletions(-)

diff --git a/components/ColorSchemeToggle.vue b/components/ColorSchemeToggle.vue
index 61137150..cf12a88d 100644
--- a/components/ColorSchemeToggle.vue
+++ b/components/ColorSchemeToggle.vue
@@ -8,7 +8,7 @@ function toggleMode() {
 addCommands(
   {
     id: 'toggle-color-mode',
-    title: colorMode.value === 'light'
+    title: () => colorMode.value === 'light'
       ? $t('color-mode.to-dark')
       : $t('color-mode.to-light'),
     handler: toggleMode,
diff --git a/components/CommandPalette.vue b/components/CommandPalette.vue
index a933b558..f5d5af7c 100644
--- a/components/CommandPalette.vue
+++ b/components/CommandPalette.vue
@@ -32,6 +32,12 @@ function scrollIntoView(elOrComponent?: any) {
   })
 }
 
+function getTitle(command: Command) {
+  if (typeof command.title === 'function')
+    return command.title()
+  return command.title
+}
+
 // Reset selected when search changes
 watch(
   () => commands.search,
@@ -102,15 +108,15 @@ useEventListener('keydown', (e) => {
           ref="input"
           v-model="commands.search"
           h-full w-full rounded border-none p4 pl0 outline-none bg-base
-          placeholder="Search..."
+          :placeholder="$t('search-dots')"
         >
       </div>
 
       <div border="t base" flex="~ col" of-y-auto py2>
         <component
           :is="c.to ? NuxtLink : 'button'"
-          v-for="c, idx in commands.commandsResult"
-          :key="c.id || c.title"
+          v-for="c, idx of commands.commandsResult"
+          :key="c.id || getTitle(c)"
           :ref="(el: Element) => selected === idx && scrollIntoView(el)"
           :to="c.to" flex="~ gap-2 items-center" mx1 rounded p2
           px3
@@ -118,7 +124,7 @@ useEventListener('keydown', (e) => {
           @click="runCommand(c)"
         >
           <div :class="c.icon || 'i-ph-dot-duotone'" />
-          {{ c.title }}
+          {{ getTitle(c) }}
         </component>
       </div>
     </div>
diff --git a/components/PanelDocs.vue b/components/PanelDocs.vue
index 491d6fbe..56753d2a 100644
--- a/components/PanelDocs.vue
+++ b/components/PanelDocs.vue
@@ -3,14 +3,20 @@ import type { ContentNavigationItem } from '@nuxt/content'
 
 const runtime = useRuntimeConfig()
 const route = useRoute()
-const { data: page } = useAsyncData(route.path, () => {
-  return queryCollection('tutorials').path(route.path).first()
+const { locale } = useI18n()
+
+const collection = computed(() => locale.value === 'ja' ? 'ja' : 'en')
+
+const { data: page } = useAsyncData(`${locale.value}-${route.path}`, () => {
+  return queryCollection(collection.value)
+    .path(route.path)
+    .first()
 })
-const { data: navigation } = useAsyncData(`navigation`, () => {
-  return queryCollectionNavigation('tutorials')
+const { data: navigation } = useAsyncData(`${locale.value}-navigation`, () => {
+  return queryCollectionNavigation(collection.value)
 })
-const { data: surroundings } = useAsyncData(`${route.path}-surroundings`, () => {
-  return queryCollectionItemSurroundings('tutorials', route.path, {
+const { data: surroundings } = useAsyncData(`${locale.value}-${route.path}-surroundings`, () => {
+  return queryCollectionItemSurroundings(collection.value, route.path, {
     fields: ['title', 'description'],
   })
 })
diff --git a/components/PanelPreviewLoading.vue b/components/PanelPreviewLoading.vue
index 677d8503..42abe62c 100644
--- a/components/PanelPreviewLoading.vue
+++ b/components/PanelPreviewLoading.vue
@@ -51,7 +51,7 @@ function getTextClass(status: PlaygroundStatus) {
     <template v-if="play.status === 'interactive'">
       <div flex="~ gap-2 items-center" text-lg>
         <div i-ph-terminal-window-duotone text-2xl />
-        Interactive terminal mode
+        {{ $t('interactive-terminal-mode') }}
       </div>
       <button
         title="Restart terminal"
@@ -61,20 +61,20 @@ function getTextClass(status: PlaygroundStatus) {
         @click="play.restartServer()"
       >
         <div i-ph-arrow-clockwise-duotone text-lg />
-        Restart the server
+        {{ $t('restart-server') }}
       </button>
     </template>
     <div v-else grid="~ cols-[max-content_1fr] gap-2 items-center justify-center">
       <div :class="getStatusIcon('init')" />
-      <span :class="getTextClass('init')">Initializing WebContainer</span>
+      <span :class="getTextClass('init')">{{ $t('steps.initializing-webcontainer') }}</span>
       <div :class="getStatusIcon('mount')" />
-      <span :class="getTextClass('mount')">Mounting files</span>
+      <span :class="getTextClass('mount')">{{ $t('steps.mounting-files') }}</span>
       <div :class="getStatusIcon('install')" />
-      <span :class="getTextClass('install')">Installing dependencies</span>
+      <span :class="getTextClass('install')">{{ $t('steps.installing-dependencies') }}</span>
       <div :class="getStatusIcon('start')" />
-      <span :class="getTextClass('start')">Starting Nuxt server</span>
+      <span :class="getTextClass('start')">{{ $t('steps.starting-nuxt-server') }}</span>
       <div :class="getStatusIcon('polling')" />
-      <span :class="getTextClass('polling')">Waiting for Nuxt to ready</span>
+      <span :class="getTextClass('polling')">{{ $t('steps.waiting-for-nuxt-to-ready') }}</span>
     </div>
   </div>
 </template>
diff --git a/components/TheNav.vue b/components/TheNav.vue
index d8f21097..d0a7e99f 100644
--- a/components/TheNav.vue
+++ b/components/TheNav.vue
@@ -26,7 +26,7 @@ const i18n = useI18n()
 addCommands(
   {
     id: 'download-zip',
-    title: $t('download-zip'),
+    title: () => $t('download-zip'),
     visible: () => {
       return play.status === 'ready' && guide.features.download !== false
     },
@@ -37,12 +37,34 @@ addCommands(
   },
   {
     id: 'toggle-terminal',
-    title: $t('terminal.toggle'),
+    title: () => $t('terminal.toggle'),
     handler: () => {
       ui.toggleTerminal()
     },
     icon: 'i-ph-terminal-window-duotone',
   },
+  {
+    id: 'language-en',
+    title: 'Change to English',
+    handler: () => {
+      i18n.setLocale('en')
+    },
+    icon: 'i-ph-globe-duotone',
+    visible: () => {
+      return i18n.locale.value !== 'en'
+    },
+  },
+  {
+    id: 'language-ja',
+    title: '日本語に切り替える',
+    handler: () => {
+      i18n.setLocale('ja')
+    },
+    icon: 'i-ph-globe-duotone',
+    visible: () => {
+      return i18n.locale.value !== 'ja'
+    },
+  },
 )
 </script>
 
diff --git a/content.config.ts b/content.config.ts
index 6e444ac5..823cb947 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -2,10 +2,17 @@ import { defineCollection, defineContentConfig } from '@nuxt/content'
 
 export default defineContentConfig({
   collections: {
-    tutorials: defineCollection({
+    en: defineCollection({
       type: 'page',
       source: {
-        include: '**',
+        include: 'en/**',
+        exclude: ['**/.template/**'],
+      },
+    }),
+    ja: defineCollection({
+      type: 'page',
+      source: {
+        include: 'ja/**',
         exclude: ['**/.template/**'],
       },
     }),
diff --git a/i18n/locales/en.yaml b/i18n/locales/en.yaml
index 8755e138..a907aa2a 100644
--- a/i18n/locales/en.yaml
+++ b/i18n/locales/en.yaml
@@ -5,7 +5,7 @@ terminal:
   restart: Restart terminal
   hide: Hide terminal
   toggle: Toggle terminal
-download-zip: Download playground as ZIP
+download-zip: Download playground as zip
 work-in-progress: Work in Progress
 search: Search
 color-mode:
@@ -14,3 +14,12 @@ color-mode:
 coming-soon: Coming Soon
 reset-challenge: Reset challenge
 show-solution: Show solution
+search-dots: Search...
+steps:
+  initializing-webcontainer: Initializing WebContainer
+  mounting-files: Mounting files
+  installing-dependencies: Installing dependencies
+  starting-nuxt-server: Starting Nuxt server
+  waiting-for-nuxt-to-ready: Waiting for Nuxt to ready
+restart-server: Restart the server
+interactive-terminal-mode: Interactive terminal mode
diff --git a/i18n/locales/ja.yaml b/i18n/locales/ja.yaml
index 107e79b9..6d734ad8 100644
--- a/i18n/locales/ja.yaml
+++ b/i18n/locales/ja.yaml
@@ -14,3 +14,12 @@ color-mode:
 coming-soon: 作業中
 reset-challenge: 挑戦をリセット
 show-solution: 解答を表示
+search-dots: 検索...
+steps:
+  initializing-webcontainer: WebContainerを初期化中
+  mounting-files: ファイルをマウント中
+  installing-dependencies: 依存関係をインストール中
+  starting-nuxt-server: Nuxtサーバーを起動中
+  waiting-for-nuxt-to-ready: Nuxtが準備完了を待機中
+restart-server: サーバーを再起動
+interactive-terminal-mode: インタラクティブターミナルモード
diff --git a/stores/commands.ts b/stores/commands.ts
index b2f208c0..14f3549d 100644
--- a/stores/commands.ts
+++ b/stores/commands.ts
@@ -2,7 +2,7 @@ import Fuse from 'fuse.js'
 
 export interface Command {
   id?: string
-  title: string
+  title: string | (() => string)
   to?: string
   description?: string
   visible?: () => boolean
@@ -21,8 +21,11 @@ export const useCommandsStore = defineStore('commands', () => {
     threshold: 0.3,
   }))
 
+  const { locale } = useI18n()
+  const collection = computed(() => locale.value === 'ja' ? 'ja' : 'en')
+
   const { data: sections } = useAsyncData('search-sections', () => {
-    return queryCollectionSearchSections('tutorials', {
+    return queryCollectionSearchSections(collection.value, {
       ignoredTags: ['hidden'],
     })
   })

From cb2058b24c36b58a0b065710dbf65f8386262dc7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Wed, 2 Apr 2025 13:25:12 +0900
Subject: [PATCH 5/6] docs: note about translations

---
 content/FOR_TRANSLATORS.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 content/FOR_TRANSLATORS.md

diff --git a/content/FOR_TRANSLATORS.md b/content/FOR_TRANSLATORS.md
new file mode 100644
index 00000000..4e8cab76
--- /dev/null
+++ b/content/FOR_TRANSLATORS.md
@@ -0,0 +1,12 @@
+Hey! Thanks for being interested in helping translate the Nuxt Tutorial.
+
+However, please note that currently we are focusing only on the English version and Japanese version.
+
+We are NOT accepting translations for other languages at this moment due to the limited resources.
+
+Feel free to fork the repository and deploy your own version of the website. 
+But please do not send translation PRs for now.
+
+After we finishing writing the content, we might start considering supporting other languages.
+
+Thank you for your understanding.

From 31a7c1c034086b8a67e2ec11738aa9f24e26e630 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 2 Apr 2025 04:26:07 +0000
Subject: [PATCH 6/6] [autofix.ci] apply automated fixes

---
 content/FOR_TRANSLATORS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/FOR_TRANSLATORS.md b/content/FOR_TRANSLATORS.md
index 4e8cab76..5890b963 100644
--- a/content/FOR_TRANSLATORS.md
+++ b/content/FOR_TRANSLATORS.md
@@ -4,7 +4,7 @@ However, please note that currently we are focusing only on the English version
 
 We are NOT accepting translations for other languages at this moment due to the limited resources.
 
-Feel free to fork the repository and deploy your own version of the website. 
+Feel free to fork the repository and deploy your own version of the website.
 But please do not send translation PRs for now.
 
 After we finishing writing the content, we might start considering supporting other languages.