From 12a119cd753ff107b9fbcfa5ae99c097d4c5cb19 Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Mon, 6 Mar 2023 23:17:20 +0900
Subject: [PATCH] chore: use clean URL for internal links (#1231)

* chore: use clean URL for internal links

* chore: more internal clean URL fixes

* internal clean URLs
---
 README.md                                     |  2 +-
 src/about/faq.md                              |  8 ++--
 src/api/application.md                        | 34 +++++++-------
 src/api/built-in-components.md                | 16 +++----
 src/api/built-in-directives.md                | 46 +++++++++----------
 src/api/built-in-special-attributes.md        | 18 ++++----
 src/api/built-in-special-elements.md          | 16 +++----
 src/api/component-instance.md                 | 44 +++++++++---------
 .../composition-api-dependency-injection.md   |  8 ++--
 src/api/composition-api-lifecycle.md          | 22 ++++-----
 src/api/composition-api-setup.md              | 14 +++---
 src/api/general.md                            | 10 ++--
 src/api/options-composition.md                | 10 ++--
 src/api/options-lifecycle.md                  | 22 ++++-----
 src/api/options-misc.md                       | 10 ++--
 src/api/options-rendering.md                  | 10 ++--
 src/api/options-state.md                      | 32 ++++++-------
 src/api/reactivity-advanced.md                | 12 ++---
 src/api/reactivity-core.md                    | 40 ++++++++--------
 src/api/reactivity-utilities.md               |  8 ++--
 src/api/render-function.md                    | 12 ++---
 src/api/sfc-script-setup.md                   |  4 +-
 src/api/sfc-spec.md                           |  6 +--
 src/api/ssr.md                                |  4 +-
 src/api/utility-types.md                      | 16 +++----
 src/guide/best-practices/performance.md       | 18 ++++----
 .../best-practices/production-deployment.md   |  4 +-
 src/guide/best-practices/security.md          |  4 +-
 src/guide/built-ins/keep-alive.md             | 12 ++---
 src/guide/built-ins/suspense.md               |  4 +-
 src/guide/built-ins/teleport.md               |  4 +-
 src/guide/built-ins/transition-group.md       |  6 +--
 src/guide/built-ins/transition.md             |  8 ++--
 src/guide/components/async.md                 |  8 ++--
 src/guide/components/attrs.md                 |  4 +-
 src/guide/components/events.md                | 14 +++---
 src/guide/components/props.md                 | 18 ++++----
 src/guide/components/provide-inject.md        | 18 ++++----
 src/guide/components/registration.md          |  4 +-
 src/guide/components/slots.md                 |  6 +--
 src/guide/components/v-model.md               |  2 +-
 src/guide/essentials/class-and-style.md       |  2 +-
 src/guide/essentials/component-basics.md      | 26 +++++------
 src/guide/essentials/computed.md              |  4 +-
 src/guide/essentials/conditional.md           |  2 +-
 src/guide/essentials/event-handling.md        |  4 +-
 src/guide/essentials/forms.md                 |  2 +-
 src/guide/essentials/lifecycle.md             |  4 +-
 src/guide/essentials/list.md                  |  6 +--
 .../essentials/reactivity-fundamentals.md     | 18 ++++----
 src/guide/essentials/template-refs.md         |  4 +-
 src/guide/essentials/template-syntax.md       | 16 +++----
 src/guide/essentials/watchers.md              |  8 ++--
 src/guide/extras/animation.md                 |  2 +-
 src/guide/extras/composition-api-faq.md       | 14 +++---
 src/guide/extras/reactivity-in-depth.md       | 12 ++---
 src/guide/extras/reactivity-transform.md      | 12 ++---
 src/guide/extras/render-function.md           | 20 ++++----
 src/guide/extras/rendering-mechanism.md       |  2 +-
 src/guide/extras/web-components.md            | 12 ++---
 src/guide/quick-start.md                      | 16 +++----
 src/guide/reusability/composables.md          | 20 ++++----
 src/guide/reusability/custom-directives.md    |  4 +-
 src/guide/reusability/plugins.md              | 10 ++--
 src/guide/scaling-up/routing.md               |  2 +-
 src/guide/scaling-up/sfc.md                   |  4 +-
 src/guide/scaling-up/ssr.md                   |  8 ++--
 src/guide/scaling-up/state-management.md      |  8 ++--
 src/guide/scaling-up/testing.md               |  4 +-
 src/guide/typescript/composition-api.md       |  4 +-
 src/guide/typescript/options-api.md           |  2 +-
 src/guide/typescript/overview.md              |  4 +-
 src/style-guide/rules-essential.md            |  4 +-
 src/style-guide/rules-recommended.md          |  2 +-
 src/style-guide/rules-strongly-recommended.md | 12 ++---
 src/tutorial/src/step-15/description.md       |  4 +-
 76 files changed, 418 insertions(+), 418 deletions(-)

diff --git a/README.md b/README.md
index f6364b997..16a747d52 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ pnpm run dev
 
 ## コンテンツに関する作業
 
-- サポートされている [Markdown 拡張](https://vitepress.vuejs.org/guide/markdown.html)や [Markdown 内で Vue 構文を使用する](https://vitepress.vuejs.org/guide/using-vue.html)機能については、VitePress ドキュメントを参照してください。
+- サポートされている [Markdown 拡張](https://vitepress.vuejs.org/guide/markdown)や [Markdown 内で Vue 構文を使用する](https://vitepress.vuejs.org/guide/using-vue)機能については、VitePress ドキュメントを参照してください。
 
 <!--
 - ドキュメントのルールの執筆と維持するためのルールと推奨事項については [Writing Guide](https://github.com/vuejs/docs/blob/main/.github/contributing/writing-guide.md) を参照してください。
diff --git a/src/about/faq.md b/src/about/faq.md
index fea14c9eb..69f3aa4fc 100644
--- a/src/about/faq.md
+++ b/src/about/faq.md
@@ -48,7 +48,7 @@ Vue 3 は、最もパフォーマンスの高い主流のフロントエンド
 
 上記のような統合的なベンチマークは、専用の最適化による未加工のレンダリングパフォーマンスに焦点を当てており、実際のパフォーマンス結果を完全には表していない可能性があることに注意してください。ページ読み込みのパフォーマンスがさらに気になる場合は、[WebPageTest](https://www.webpagetest.org/lighthouse) や [PageSpeed Insights](https://pagespeed.web.dev/) を使用して、今見ているこの Web サイトを検査してみてください。このウェブサイトは、SSG プリレンダリング、ページ全体のハイドレーション、SPA クライアントサイドナビゲーションなど、Vue そのものを使用しています。低速の 4G ネットワークと 4 倍の CPU スロットリングのエミュレートされた Moto G4 で、100 点のパフォーマンスを記録しています。
 
-[レンダリングの仕組み](/guide/extras/rendering-mechanism.html)のセクションでは Vue が自動的に実行時のパフォーマンスを最適化する方法、[パフォーマンス最適化ガイド](/guide/best-practices/performance.html)では特に要求の厳しいケースで Vue アプリを最適化する方法については詳しく説明されています。
+[レンダリングの仕組み](/guide/extras/rendering-mechanism)のセクションでは Vue が自動的に実行時のパフォーマンスを最適化する方法、[パフォーマンス最適化ガイド](/guide/best-practices/performance)では特に要求の厳しいケースで Vue アプリを最適化する方法については詳しく説明されています。
 
 ## Vue は軽量ですか？ {#is-vue-lightweight}
 
@@ -68,17 +68,17 @@ Svelte のような一部のフレームワークは、単一コンポーネン
 
 - [Composition API](/guide/reusability/composables) は、ファーストクラスの TypeScript 統合を提供し、複雑なロジックを整理、抽出、再利用するためのクリーンなパターンを可能にします。
 
-- [包括的なツールサポート](/guide/scaling-up/tooling.html)により、アプリケーションの成長に伴うスムーズな開発体験を保証します。
+- [包括的なツールサポート](/guide/scaling-up/tooling)により、アプリケーションの成長に伴うスムーズな開発体験を保証します。
 
 - 参入障壁の低さと優れたドキュメントにより、新しい開発者のためのオンボーディングとトレーニングのコストが削減されます。
 
 ## Vue に貢献するにはどうすればよいですか？ {#how-do-i-contribute-to-vue}
 
-ご興味をお持ちいただき、ありがとうございます！　[コミュニティーガイド](/about/community-guide.html)をご覧ください。
+ご興味をお持ちいただき、ありがとうございます！　[コミュニティーガイド](/about/community-guide)をご覧ください。
 
 ## Options API と Composition API のどちらを使うべきですか？ {#should-i-use-options-api-or-composition-api}
 
-Vue を初めて使用する場合は、[こちら](/guide/introduction.html#which-to-choose)で 2 つのスタイルの高いレベルでの比較をご紹介しています。
+Vue を初めて使用する場合は、[こちら](/guide/introduction#which-to-choose)で 2 つのスタイルの高いレベルでの比較をご紹介しています。
 
 Options API を使用したことがあり、現在 Composition API を試している場合は、[この FAQ](/guide/extras/composition-api-faq) をチェックしてください。
 
diff --git a/src/api/application.md b/src/api/application.md
index 6a5d3a844..d367c85d7 100644
--- a/src/api/application.md
+++ b/src/api/application.md
@@ -35,11 +35,11 @@
   const app = createApp(App)
   ```
 
-- **参照:** [ガイド - Vue アプリケーションの作成](/guide/essentials/application.html)
+- **参照:** [ガイド - Vue アプリケーションの作成](/guide/essentials/application)
 
 ## createSSRApp() {#createssrapp}
 
-[SSR hydration (ハイドレーション) ](/guide/scaling-up/ssr.html#client-hydration)モードでアプリケーションインスタンスを作成します。使用法は `createApp()` と全く同じです。
+[SSR hydration (ハイドレーション) ](/guide/scaling-up/ssr#client-hydration)モードでアプリケーションインスタンスを作成します。使用法は `createApp()` と全く同じです。
 
 ## app.mount() {#app-mount}
 
@@ -59,7 +59,7 @@
 
   コンポーネントにテンプレートがあるか、レンダー関数を定義している場合、コンテナ内の既存の DOM ノードを置換します。それ以外の場合は、実行時コンパイラーが使用可能であれば、コンテナの `innerHTML` がテンプレートとして使用されます。
 
-  SSR ハイドレーションモードでは、コンテナ内の既存の DOM ノードをハイドレートします。[ミスマッチ](/guide/scaling-up/ssr.html#hydration-mismatch)があった場合、既存の DOM ノードは期待される結果に合うよう変化されます。
+  SSR ハイドレーションモードでは、コンテナ内の既存の DOM ノードをハイドレートします。[ミスマッチ](/guide/scaling-up/ssr#hydration-mismatch)があった場合、既存の DOM ノードは期待される結果に合うよう変化されます。
 
   アプリケーションのインスタンス毎に、`mount()` は一度だけ呼び出すことができます。
 
@@ -145,8 +145,8 @@
   </div>
 
 - **参照:**
-  - [Provide / Inject](/guide/components/provide-inject.html)
-  - [アプリケーションレベルの Provide](/guide/components/provide-inject.html#app-level-provide)
+  - [Provide / Inject](/guide/components/provide-inject)
+  - [アプリケーションレベルの Provide](/guide/components/provide-inject#app-level-provide)
 
 ## app.component() {#app-component}
 
@@ -177,7 +177,7 @@
   const MyComponent = app.component('my-component')
   ```
 
-- **参照:** [コンポーネントの登録](/guide/components/registration.html)
+- **参照:** [コンポーネントの登録](/guide/components/registration)
 
 ## app.directive() {#app-directive}
 
@@ -215,11 +215,11 @@
   const myDirective = app.directive('my-directive')
   ```
 
-- **参照:** [カスタムディレクティブ](/guide/reusability/custom-directives.html)
+- **参照:** [カスタムディレクティブ](/guide/reusability/custom-directives)
 
 ## app.use() {#app-use}
 
-[プラグイン](/guide/reusability/plugins.html)をインストールします。
+[プラグイン](/guide/reusability/plugins)をインストールします。
 
 - **型**
 
@@ -250,7 +250,7 @@
   app.use(MyPlugin)
   ```
 
-- **参照:** [プラグイン](/guide/reusability/plugins.html)
+- **参照:** [プラグイン](/guide/reusability/plugins)
 
 ## app.mixin() {#app-mixin}
 
@@ -259,7 +259,7 @@
 :::warning 非推奨
 ミックインはエコシステムのライブラリーで幅広く使用されていることから、主に後方互換性のため、Vue 3 でサポートしています。ミックイン (特にグローバルミックスイン) はアプリケーションコードでは避けるべきです。
 
-ロジックを再利用するには、代わりに[コンポーザブル](/guide/reusability/composables.html)を使用してください。
+ロジックを再利用するには、代わりに[コンポーザブル](/guide/reusability/composables)を使用してください。
 :::
 
 - **型**
@@ -272,7 +272,7 @@
 
 ## app.version {#app-version}
 
-アプリケーションを作成した Vue のバージョンを提供します。Vue のバージョンの違いに応じた条件付きロジックが必要となる[プラグイン](/guide/reusability/plugins.html)内で有用となります。
+アプリケーションを作成した Vue のバージョンを提供します。Vue のバージョンの違いに応じた条件付きロジックが必要となる[プラグイン](/guide/reusability/plugins)内で有用となります。
 
 - **型**
 
@@ -297,7 +297,7 @@
   }
   ```
 
-- **参照:** [グローバル API - バージョン](/api/general.html#version)
+- **参照:** [グローバル API - バージョン](/api/general#version)
 
 ## app.config {#app-config}
 
@@ -391,11 +391,11 @@ Vue からの実行時警告に対して、カスタムハンドラーを割り
 
 - **型**: `boolean`
 
-- **参照:** [ガイド - パフォーマンス](/guide/best-practices/performance.html)
+- **参照:** [ガイド - パフォーマンス](/guide/best-practices/performance)
 
 ## app.config.compilerOptions {#app-config-compileroptions}
 
-実行時コンパイラーのオプションを設定します。このオブジェクトに設定される値はブラウザー内のテンプレートコンパイラーに渡され、設定されたアプリケーションのコンポーネントすべてに影響を与えます。[`compilerOptions` オプション](/api/options-rendering.html#compileroptions)を使用することで、コンポーネント毎のオプションを上書きすることも可能となることに注意してください。
+実行時コンパイラーのオプションを設定します。このオブジェクトに設定される値はブラウザー内のテンプレートコンパイラーに渡され、設定されたアプリケーションのコンポーネントすべてに影響を与えます。[`compilerOptions` オプション](/api/options-rendering#compileroptions)を使用することで、コンポーネント毎のオプションを上書きすることも可能となることに注意してください。
 
 ::: warning 重要
 この設定オプションは、フルビルド（つまり、ブラウザー上でテンプレートをコンパイルできるスタンドアロンの `vue.js`）を使っているときだけ反映されます。ビルド設定で、実行時のみビルドを使用している場合は代わりに、ビルドツール設定により、`@vue/compiler-dom` にコンパイラオプションを渡さなければなりません。
@@ -426,7 +426,7 @@ Vue からの実行時警告に対して、カスタムハンドラーを割り
   }
   ```
 
-- **参照:** [Vue および web コンポーネント](/guide/extras/web-components.html)
+- **参照:** [Vue および web コンポーネント](/guide/extras/web-components)
 
 ### app.config.compilerOptions.whitespace {#app-config-compileroptions-whitespace}
 
@@ -523,7 +523,7 @@ Vue からの実行時警告に対して、カスタムハンドラーを割り
   }
   ```
 
-- **参照:** [ガイド - グローバルなプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties) <sup class="vt-badge ts" />
+- **参照:** [ガイド - グローバルなプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties) <sup class="vt-badge ts" />
 
 ## app.config.optionMergeStrategies {#app-config-optionmergestrategies}
 
@@ -574,4 +574,4 @@ Vue からの実行時警告に対して、カスタムハンドラーを割り
   // 'Hello Vue'をログに記録します
   ```
 
-- **参照:** [コンポーネントインスタンス - `$options`](/api/component-instance.html#options)
+- **参照:** [コンポーネントインスタンス - `$options`](/api/component-instance#options)
diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md
index 94d5cb928..90579dd0f 100644
--- a/src/api/built-in-components.md
+++ b/src/api/built-in-components.md
@@ -7,7 +7,7 @@ pageClass: api
 :::info 登録と使用
 組み込みコンポーネントは登録する必要なくテンプレート内で直接使用できます。ツリーシェイクも可能で、使用されたときだけビルドに含まれます。
 
-[レンダー関数](/guide/extras/render-function.html)で使用する場合は明示的にインポートする必要があります。例えば:
+[レンダー関数](/guide/extras/render-function)で使用する場合は明示的にインポートする必要があります。例えば:
 
 ```js
 import { h, Transition } from 'vue'
@@ -118,7 +118,7 @@ h(Transition, {
   </Transition>
   ```
 
-- **参照:** [`<Transition>` ガイド](/guide/built-ins/transition.html)
+- **参照:** [`<Transition>` ガイド](/guide/built-ins/transition)
 
 ## `<TransitionGroup>` {#transitiongroup}
 
@@ -150,7 +150,7 @@ h(Transition, {
 
   デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。
 
-  アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。
+  アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](/guide/essentials/list#maintaining-state-with-key)する必要があることに注意してください。
 
   `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` プロパティで設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。
 
@@ -164,7 +164,7 @@ h(Transition, {
   </TransitionGroup>
   ```
 
-- **参照:** [ガイド - TransitionGroup](/guide/built-ins/transition-group.html)
+- **参照:** [ガイド - TransitionGroup](/guide/built-ins/transition-group)
 
 ## `<KeepAlive>` {#keepalive}
 
@@ -257,7 +257,7 @@ h(Transition, {
   </KeepAlive>
   ```
 
-- **参照:** [ガイド - KeepAlive](/guide/built-ins/keep-alive.html)
+- **参照:** [ガイド - KeepAlive](/guide/built-ins/keep-alive)
 
 ## `<Teleport>` {#teleport}
 
@@ -299,7 +299,7 @@ h(Transition, {
   </teleport>
   ```
 
-- **参照:** [ガイド - Teleport](/guide/built-ins/teleport.html)
+- **参照:** [ガイド - Teleport](/guide/built-ins/teleport)
 
 ## `<Suspense>` <sup class="vt-badge experimental" /> {#suspense}
 
@@ -323,6 +323,6 @@ h(Transition, {
 
   `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。
 
-  デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](/guide/components/async.html)や [`async setup()`](/guide/built-ins/suspense.html#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。
+  デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](/guide/components/async)や [`async setup()`](/guide/built-ins/suspense#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。
 
-- **参照:** [ガイド - Suspense](/guide/built-ins/suspense.html)
+- **参照:** [ガイド - Suspense](/guide/built-ins/suspense)
diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md
index 225a345c6..5de0f8f32 100644
--- a/src/api/built-in-directives.md
+++ b/src/api/built-in-directives.md
@@ -8,7 +8,7 @@
 
 - **詳細**
 
-  `v-text` は要素の [textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent) プロパティをセットする動作なので、要素内の既存のコンテンツはすべて上書きされます。`textContent` の一部を更新する必要がある場合は、代わりに[マスタッシュ展開](/guide/essentials/template-syntax.html#text-interpolation)を使用します。
+  `v-text` は要素の [textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent) プロパティをセットする動作なので、要素内の既存のコンテンツはすべて上書きされます。`textContent` の一部を更新する必要がある場合は、代わりに[マスタッシュ展開](/guide/essentials/template-syntax#text-interpolation)を使用します。
 
 - **例**
 
@@ -18,7 +18,7 @@
   <span>{{msg}}</span>
   ```
 
-- **参照:** [テンプレート構文 - テキスト展開](/guide/essentials/template-syntax.html#text-interpolation)
+- **参照:** [テンプレート構文 - テキスト展開](/guide/essentials/template-syntax#text-interpolation)
 
 ## v-html {#v-html}
 
@@ -34,7 +34,7 @@
   ウェブサイト上で任意の HTML を動的にレンダリングすることは、[XSS 攻撃](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)につながりやすいため、非常に危険です。信頼できるコンテンツにのみ `v-html` を使用し、ユーザーが提供するコンテンツには**絶対に**使用しないでください。
   :::
 
-  [単一ファイルコンポーネント](/guide/scaling-up/sfc)では、`scoped` スタイルは `v-html` 内のコンテンツには適用されません。これは、その HTML が Vue のテンプレートコンパイラーによって処理されないからです。もし `v-html` のコンテンツにスコープ付き CSS を適用したい場合は、代わりに [CSS modules](./sfc-css-features.html#css-modules) を使ったり、BEM などの手動スコープ戦略を持つ追加のグローバル `<style>` 要素を使用可能です。
+  [単一ファイルコンポーネント](/guide/scaling-up/sfc)では、`scoped` スタイルは `v-html` 内のコンテンツには適用されません。これは、その HTML が Vue のテンプレートコンパイラーによって処理されないからです。もし `v-html` のコンテンツにスコープ付き CSS を適用したい場合は、代わりに [CSS modules](./sfc-css-features#css-modules) を使ったり、BEM などの手動スコープ戦略を持つ追加のグローバル `<style>` 要素を使用可能です。
 
 - **例:**
 
@@ -42,7 +42,7 @@
   <div v-html="html"></div>
   ```
 
-- **参照:** [テンプレート構文 - 生の HTML](/guide/essentials/template-syntax.html#raw-html)
+- **参照:** [テンプレート構文 - 生の HTML](/guide/essentials/template-syntax#raw-html)
 
 ## v-show {#v-show}
 
@@ -54,7 +54,7 @@
 
   `v-show` はインラインスタイルで `display` CSS プロパティをセットする動作で、要素が表示されている場合は `display` の初期値を尊重しようとします。また、その状態が変化したときにトランジションを引き起こします。
 
-- **参照:** [条件付きレンダリング - v-show](/guide/essentials/conditional.html#v-show)
+- **参照:** [条件付きレンダリング - v-show](/guide/essentials/conditional#v-show)
 
 ## v-if {#v-if}
 
@@ -70,9 +70,9 @@
 
   このディレクティブは、条件が変化したときにトランジションをトリガーします。
 
-  一緒に使用した場合、 `v-if` は `v-for` よりも高い優先度を持ちます。この 2 つのディレクティブを 1 つの要素で同時に使うことはお勧めしません。詳しくは [リストレンダリングガイド](/guide/essentials/list.html#v-for-with-v-if) を参照してください。
+  一緒に使用した場合、 `v-if` は `v-for` よりも高い優先度を持ちます。この 2 つのディレクティブを 1 つの要素で同時に使うことはお勧めしません。詳しくは [リストレンダリングガイド](/guide/essentials/list#v-for-with-v-if) を参照してください。
 
-- **参照:** [条件付きレンダリング - v-if](/guide/essentials/conditional.html#v-if)
+- **参照:** [条件付きレンダリング - v-if](/guide/essentials/conditional#v-if)
 
 ## v-else {#v-else}
 
@@ -97,7 +97,7 @@
   </div>
   ```
 
-- **参照:** [条件付きレンダリング - v-else](/guide/essentials/conditional.html#v-else)
+- **参照:** [条件付きレンダリング - v-else](/guide/essentials/conditional#v-else)
 
 ## v-else-if {#v-else-if}
 
@@ -128,7 +128,7 @@
   </div>
   ```
 
-- **参照:** [条件付きレンダリング - v-else-if](/guide/essentials/conditional.html#v-else-if)
+- **参照:** [条件付きレンダリング - v-else-if](/guide/essentials/conditional#v-else-if)
 
 ## v-for {#v-for}
 
@@ -165,7 +165,7 @@
   また、`v-for` はネイティブの `Map` や `Set` を含む、[反復処理プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)を実装した値に対しても動作させることができます。
 
 - **参照:**
-  - [リストレンダリング](/guide/essentials/list.html)
+  - [リストレンダリング](/guide/essentials/list)
 
 ## v-on {#v-on}
 
@@ -250,8 +250,8 @@
   ```
 
 - **参照:**
-  - [イベントハンドリング](/guide/essentials/event-handling.html)
-  - [コンポーネント - カスタムイベント](/guide/essentials/component-basics.html#listening-to-events)
+  - [イベントハンドリング](/guide/essentials/event-handling)
+  - [コンポーネント - カスタムイベント](/guide/essentials/component-basics#listening-to-events)
 
 ## v-bind {#v-bind}
 
@@ -273,7 +273,7 @@
 
   `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。
 
-  要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。
+  要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](/guide/extras/web-components#passing-dom-properties)ときに必要になることがあります。
 
   コンポーネントのプロパティをバインドするために使用する場合、そのプロパティは子コンポーネントで適切に宣言されている必要があります。
 
@@ -337,8 +337,8 @@
   文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。
 
 - **参照:**
-  - [クラスとスタイルのバインディング](/guide/essentials/class-and-style.html)
-  - [コンポーネント - プロパティ渡しの詳細](/guide/components/props.html#prop-passing-details)
+  - [クラスとスタイルのバインディング](/guide/essentials/class-and-style)
+  - [コンポーネント - プロパティ渡しの詳細](/guide/components/props#prop-passing-details)
 
 ## v-model {#v-model}
 
@@ -355,14 +355,14 @@
 
 - **修飾子:**
 
-  - [`.lazy`](/guide/essentials/forms.html#lazy) - `input` の代わりに `change` イベントを購読する
-  - [`.number`](/guide/essentials/forms.html#number) - 有効な入力文字列を数値に変換する
-  - [`.trim`](/guide/essentials/forms.html#trim) - 入力をトリムする
+  - [`.lazy`](/guide/essentials/forms#lazy) - `input` の代わりに `change` イベントを購読する
+  - [`.number`](/guide/essentials/forms#number) - 有効な入力文字列を数値に変換する
+  - [`.trim`](/guide/essentials/forms#trim) - 入力をトリムする
 
 - **参照:**
 
-  - [フォーム入力バインディング](/guide/essentials/forms.html)
-  - [コンポーネントのイベント - `v-model` での使用](/guide/components/v-model.html)
+  - [フォーム入力バインディング](/guide/essentials/forms)
+  - [コンポーネントのイベント - `v-model` での使用](/guide/components/v-model)
 
 ## v-slot {#v-slot}
 
@@ -377,7 +377,7 @@
 - **以下に限定:**
 
   - `<template>`
-  - [コンポーネント](/guide/components/slots.html#scoped-slots)（プロパティのある単独のデフォルトスロット用）
+  - [コンポーネント](/guide/components/slots#scoped-slots)（プロパティのある単独のデフォルトスロット用）
 
 - **例:**
 
@@ -413,7 +413,7 @@
   ```
 
 - **参照:**
-  - [コンポーネント - スロット](/guide/components/slots.html)
+  - [コンポーネント - スロット](/guide/components/slots)
 
 ## v-pre {#v-pre}
 
@@ -460,7 +460,7 @@
   3.2 以降では、[`v-memo`](#v-memo) を使って、テンプレートの一部を無効化する条件付きでメモ化できます。
 
 - **参照:**
-  - [データバインディング構文 - 展開](/guide/essentials/template-syntax.html#text-interpolation)
+  - [データバインディング構文 - 展開](/guide/essentials/template-syntax#text-interpolation)
   - [v-memo](#v-memo)
 
 ## v-memo <sup class="vt-badge" data-text="3.2+" /> {#v-memo}
diff --git a/src/api/built-in-special-attributes.md b/src/api/built-in-special-attributes.md
index b4f51a101..851798792 100644
--- a/src/api/built-in-special-attributes.md
+++ b/src/api/built-in-special-attributes.md
@@ -35,11 +35,11 @@
 
   `text` が変更されると、`<span>` はパッチされるのではなく、常に置き換えられるので、トランジションがトリガーされます。
 
-- **参照:** [ガイド - リストレンダリング - `key` による状態管理](/guide/essentials/list.html#maintaining-state-with-key)
+- **参照:** [ガイド - リストレンダリング - `key` による状態管理](/guide/essentials/list#maintaining-state-with-key)
 
 ## ref {#ref}
 
-[テンプレート参照](/guide/essentials/template-refs.html)を表します。
+[テンプレート参照](/guide/essentials/template-refs)を表します。
 
 - **期待する値:** `string | Function`
 
@@ -81,13 +81,13 @@
   `this.$refs` はリアクティブではないので、テンプレート内でデータバインディングのために使わないでください。
 
 - **参照:**
-  - [ガイド - テンプレート参照](/guide/essentials/template-refs.html)
-  - [ガイド - テンプレート参照の型付け](/guide/typescript/composition-api.html#typing-template-refs) <sup class="vt-badge ts" />
-  - [ガイド - コンポーネントのテンプレート参照の型付け](/guide/typescript/composition-api.html#typing-component-template-refs) <sup class="vt-badge ts" />
+  - [ガイド - テンプレート参照](/guide/essentials/template-refs)
+  - [ガイド - テンプレート参照の型付け](/guide/typescript/composition-api#typing-template-refs) <sup class="vt-badge ts" />
+  - [ガイド - コンポーネントのテンプレート参照の型付け](/guide/typescript/composition-api#typing-component-template-refs) <sup class="vt-badge ts" />
 
 ## is {#is}
 
-[動的コンポーネント](/guide/essentials/component-basics.html#dynamic-components)のバインディングに使用します。
+[動的コンポーネント](/guide/essentials/component-basics#dynamic-components)のバインディングに使用します。
 
 - **期待する値:** `string | Component`
 
@@ -95,7 +95,7 @@
 
   ネイティブの HTML 要素で `is` 属性が使われている場合、[Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) として解釈されます。これは、ネイティブの Web プラットフォームの機能です。
 
-  しかし、[DOM テンプレート解析の注意点](/guide/essentials/component-basics.html#dom-template-parsing-caveats)で説明したように、ネイティブ要素を Vue コンポーネントに置き換えるためには Vue が必要になる場合があります。`is` 属性の値の前に `vue:` を付けると、Vue はその要素を Vue コンポーネントとしてレンダリングします:
+  しかし、[DOM テンプレート解析の注意点](/guide/essentials/component-basics#dom-template-parsing-caveats)で説明したように、ネイティブ要素を Vue コンポーネントに置き換えるためには Vue が必要になる場合があります。`is` 属性の値の前に `vue:` を付けると、Vue はその要素を Vue コンポーネントとしてレンダリングします:
 
   ```vue-html
   <table>
@@ -105,5 +105,5 @@
 
 - **参照:**
 
-  - [ビルトインの特別な要素 - `<component>`](/api/built-in-special-elements.html#component)
-  - [動的コンポーネント](/guide/essentials/component-basics.html#dynamic-components)
+  - [ビルトインの特別な要素 - `<component>`](/api/built-in-special-elements#component)
+  - [動的コンポーネント](/guide/essentials/component-basics#dynamic-components)
diff --git a/src/api/built-in-special-elements.md b/src/api/built-in-special-elements.md
index 6442ae212..8f7c4540c 100644
--- a/src/api/built-in-special-elements.md
+++ b/src/api/built-in-special-elements.md
@@ -67,7 +67,7 @@
   <component :is="href ? 'a' : 'span'"></component>
   ```
 
-  [ビルトインのコンポーネント](./built-in-components.html)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:
+  [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:
 
   ```vue
   <script>
@@ -108,7 +108,7 @@
 
   実際のアプリケーションでは、ネイティブのフォームフィールドはコンポーネントでラップされるのが一般的なので、このようなエッジケースはあまりありません。もし、ネイティブ要素を直接使用する必要がある場合は、 `v-model` を属性とイベントに手動で分割できます。
 
-- **参照:** [動的コンポーネント](/guide/essentials/component-basics.html#dynamic-components)
+- **参照:** [動的コンポーネント](/guide/essentials/component-basics#dynamic-components)
 
 ## `<slot>` {#slot}
 
@@ -138,7 +138,7 @@
 
   Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。
 
-- **参照:** [コンポーネント - スロット](/guide/components/slots.html)
+- **参照:** [コンポーネント - スロット](/guide/components/slots)
 
 ## `<template>` {#template}
 
@@ -154,11 +154,11 @@ DOM に要素をレンダリングせずに組み込みディレクティブを
 
   これらのディレクティブが存在しない場合は、代わりに[ネイティブの `<template>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/template)としてレンダリングされます。
 
-  `v-for` を持つ `<template>` は [`key` 属性](/api/built-in-special-attributes.html#key)を持たせることができます。それ以外の属性やディレクティブは、対応する要素がなければ意味をなさないので、すべて破棄されます。
+  `v-for` を持つ `<template>` は [`key` 属性](/api/built-in-special-attributes#key)を持たせることができます。それ以外の属性やディレクティブは、対応する要素がなければ意味をなさないので、すべて破棄されます。
 
-  単一ファイルコンポーネントは、テンプレート全体をラップするために[トップレベルの `<template>` タグ](/api/sfc-spec.html#language-blocks)を使用します。この使い方は、上記で説明した `<template>` の使い方とは別のものです。このトップレベルタグはテンプレート自体の一部ではなく、ディレクティブのようなテンプレートの構文もサポートしていません。 
+  単一ファイルコンポーネントは、テンプレート全体をラップするために[トップレベルの `<template>` タグ](/api/sfc-spec#language-blocks)を使用します。この使い方は、上記で説明した `<template>` の使い方とは別のものです。このトップレベルタグはテンプレート自体の一部ではなく、ディレクティブのようなテンプレートの構文もサポートしていません。 
 
 - **参照:**
-  - [ガイド - `<template>` に `v-if` を適用する](/guide/essentials/conditional.html#v-if-on-template) 
-  - [ガイド - `<template>` に `v-for` を適用する](/guide/essentials/list.html#v-for-on-template) 
-  - [ガイド - 名前付きスロット](/guide/components/slots.html#named-slots) 
+  - [ガイド - `<template>` に `v-if` を適用する](/guide/essentials/conditional#v-if-on-template) 
+  - [ガイド - `<template>` に `v-for` を適用する](/guide/essentials/list#v-for-on-template) 
+  - [ガイド - 名前付きスロット](/guide/components/slots#named-slots) 
diff --git a/src/api/component-instance.md b/src/api/component-instance.md
index 783eb0a52..2a74b60c6 100644
--- a/src/api/component-instance.md
+++ b/src/api/component-instance.md
@@ -8,7 +8,7 @@
 
 ## $data {#data}
 
-コンポーネントによってリアクティブにされた [`data`](./options-state.html#data) オプションから返されるオブジェクトです。コンポーネントインスタンスは、その data オブジェクトのプロパティへのアクセスをプロキシします。
+コンポーネントによってリアクティブにされた [`data`](./options-state#data) オプションから返されるオブジェクトです。コンポーネントインスタンスは、その data オブジェクトのプロパティへのアクセスをプロキシします。
 
 - **型**
 
@@ -32,7 +32,7 @@
 
 - **詳細**
 
-  [`props`](./options-state.html#props) オプションで宣言されたプロパティのみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。
+  [`props`](./options-state#props) オプションで宣言されたプロパティのみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。
 
 ## $el {#el}
 
@@ -55,7 +55,7 @@
   - 複数のルートノードを持つコンポーネントの場合、`$el` は Vue が DOM 内のコンポーネントの位置を追跡するために使用するプレースホルダ DOM ノード（テキストノード、または SSR ハイドレーションモードではコメントノード）になります。
 
   :::tip
-  一貫性を保つため、要素への直接アクセスは `$el` に頼らず、[テンプレート参照](/guide/essentials/template-refs.html)を使用することが推奨されます。
+  一貫性を保つため、要素への直接アクセスは `$el` に頼らず、[テンプレート参照](/guide/essentials/template-refs)を使用することが推奨されます。
   :::
 
 ## $options {#options}
@@ -89,7 +89,7 @@
   })
   ```
 
-- **参照:** [`app.config.optionMergeStrategies`](/api/application.html#app-config-optionmergestrategies)
+- **参照:** [`app.config.optionMergeStrategies`](/api/application#app-config-optionmergestrategies)
 
 ## $parent {#parent}
 
@@ -117,7 +117,7 @@
 
 ## $slots {#slots}
 
-親コンポーネントから渡された[スロット](/guide/components/slots.html)を表すオブジェクト。
+親コンポーネントから渡された[スロット](/guide/components/slots)を表すオブジェクト。
 
 - **型**
 
@@ -131,17 +131,17 @@
 
 - **詳細**
 
-  通常、[レンダー関数](/guide/extras/render-function.html) を手動で作成するときに使用しますが、スロットが存在するかどうかを検出するためにも使用できます。
+  通常、[レンダー関数](/guide/extras/render-function) を手動で作成するときに使用しますが、スロットが存在するかどうかを検出するためにも使用できます。
 
   各スロットは、そのスロットの名前に対応するキーの下にある vnode の配列を返す関数として `this.$slots` で公開されます。デフォルトのスロットは `this.$slots.default` として公開されます。
 
-  スロットが[スコープ付きスロット](/guide/components/slots.html#scoped-slots)の場合、スロット関数に渡された引数はそのスロットのプロパティとして利用可能です。
+  スロットが[スコープ付きスロット](/guide/components/slots#scoped-slots)の場合、スロット関数に渡された引数はそのスロットのプロパティとして利用可能です。
 
-- **参照:** [レンダー関数 - スロットのレンダリング](/guide/extras/render-function.html#rendering-slots)
+- **参照:** [レンダー関数 - スロットのレンダリング](/guide/extras/render-function#rendering-slots)
 
 ## $refs {#refs}
 
-[テンプレート参照](/guide/essentials/template-refs.html)を通じて登録された、DOM 要素およびコンポーネントインスタンスのオブジェクト。
+[テンプレート参照](/guide/essentials/template-refs)を通じて登録された、DOM 要素およびコンポーネントインスタンスのオブジェクト。
 
 - **型**
 
@@ -153,7 +153,7 @@
 
 - **参照:**
 
-  - [テンプレート参照](/guide/essentials/template-refs.html)
+  - [テンプレート参照](/guide/essentials/template-refs)
   - [特別な属性 - ref](./built-in-special-attributes.md#ref)
 
 ## $attrs {#attrs}
@@ -170,13 +170,13 @@
 
 - **詳細**
 
-  [フォールスルー属性](/guide/components/attrs.html)は、親コンポーネントから渡される属性やイベントハンドラーで、prop や子コンポーネントから発行されたイベントとして宣言されていないものです。
+  [フォールスルー属性](/guide/components/attrs)は、親コンポーネントから渡される属性やイベントハンドラーで、prop や子コンポーネントから発行されたイベントとして宣言されていないものです。
 
-  デフォルトでは、ルート要素が 1 つしかない場合は `$attrs` に含まれるすべての要素がコンポーネントのルート要素に自動的に継承されます。コンポーネントに複数のルートノードがある場合、この動作は無効になります。また、[`inheritAttrs`](./options-misc.html#inheritattrs) オプションを使って明示的に無効化できます。
+  デフォルトでは、ルート要素が 1 つしかない場合は `$attrs` に含まれるすべての要素がコンポーネントのルート要素に自動的に継承されます。コンポーネントに複数のルートノードがある場合、この動作は無効になります。また、[`inheritAttrs`](./options-misc#inheritattrs) オプションを使って明示的に無効化できます。
 
 - **参照:**
 
-  - [フォールスルー属性](/guide/components/attrs.html)
+  - [フォールスルー属性](/guide/components/attrs)
 
 ## $watch() {#watch}
 
@@ -217,9 +217,9 @@
   第 2 引数はコールバック関数です。コールバックは監視対象の新しい値と古い値を受け取ります。
 
   - **`immediate`**: ウォッチャー作成時、すぐにコールバックをトリガーします。最初の呼び出しでは、古い値は `undefined` になります。
-  - **`deep`**: ソースがオブジェクトの場合、深い探索を強制し、深部の変更の際にコールバックが発生するようにします。[ディープ・ウォッチャー](/guide/essentials/watchers.html#deep-watchers)を参照してください。
-  - **`flush`**: コールバックの実行タイミングを調整します。[コールバックが実行されるタイミング](/guide/essentials/watchers.html#callback-flush-timing)と [`watchEffect()`](/api/reactivity-core.html#watcheffect) を参照してください。
-  - **`onTrack / onTrigger`**: ウォッチャーの依存関係をデバッグします。[ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth.html#watcher-debugging)を参照してください。
+  - **`deep`**: ソースがオブジェクトの場合、深い探索を強制し、深部の変更の際にコールバックが発生するようにします。[ディープ・ウォッチャー](/guide/essentials/watchers#deep-watchers)を参照してください。
+  - **`flush`**: コールバックの実行タイミングを調整します。[コールバックが実行されるタイミング](/guide/essentials/watchers#callback-flush-timing)と [`watchEffect()`](/api/reactivity-core#watcheffect) を参照してください。
+  - **`onTrack / onTrigger`**: ウォッチャーの依存関係をデバッグします。[ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth#watcher-debugging)を参照してください。
 
 - **例**
 
@@ -258,8 +258,8 @@
   ```
 
 - **参照:**
-  - [オプション - `watch`](/api/options-state.html#watch)
-  - [ガイド - ウォッチャー](/guide/essentials/watchers.html)
+  - [オプション - `watch`](/api/options-state#watch)
+  - [ガイド - ウォッチャー](/guide/essentials/watchers)
 
 ## $emit() {#emit}
 
@@ -288,8 +288,8 @@
 
 - **参照:**
 
-  - [コンポーネント - イベント](/guide/components/events.html)
-  - [`emits` オプション](./options-state.html#emits)
+  - [コンポーネント - イベント](/guide/components/events)
+  - [`emits` オプション](./options-state#emits)
 
 ## $forceUpdate() {#forceupdate}
 
@@ -309,7 +309,7 @@
 
 ## $nextTick() {#nexttick}
 
-グローバルな [`nextTick()`](./general.html#nexttick) の、インスタンスにバインドされたバージョン。
+グローバルな [`nextTick()`](./general#nexttick) の、インスタンスにバインドされたバージョン。
 
 - **型**
 
@@ -323,4 +323,4 @@
 
   グローバルバージョンの `nextTick()` との唯一の違いは、`this.$nextTick()` に渡されるコールバックの `this` コンテキストが現在のコンポーネントインスタンスにバインドされるということです。
 
-- **参照:** [`nextTick()`](./general.html#nexttick)
+- **参照:** [`nextTick()`](./general#nexttick)
diff --git a/src/api/composition-api-dependency-injection.md b/src/api/composition-api-dependency-injection.md
index e4710dd30..e2deb8f2a 100644
--- a/src/api/composition-api-dependency-injection.md
+++ b/src/api/composition-api-dependency-injection.md
@@ -38,8 +38,8 @@
   ```
 
 - **参照**:
-  - [ガイド - Provide / Inject](/guide/components/provide-inject.html)
-  - [ガイド - Provide / Inject の型付け](/guide/typescript/composition-api.html#typing-provide-inject) <sup class="vt-badge ts" />
+  - [ガイド - Provide / Inject](/guide/components/provide-inject)
+  - [ガイド - Provide / Inject の型付け](/guide/typescript/composition-api#typing-provide-inject) <sup class="vt-badge ts" />
 
 ## inject() {#inject}
 
@@ -102,5 +102,5 @@
   ```
 
 - **参照**:
-  - [ガイド - Provide / Inject](/guide/components/provide-inject.html)
-  - [ガイド - Provide / Inject の型付け](/guide/typescript/composition-api.html#typing-provide-inject) <sup class="vt-badge ts" />
+  - [ガイド - Provide / Inject](/guide/components/provide-inject)
+  - [ガイド - Provide / Inject の型付け](/guide/typescript/composition-api#typing-provide-inject) <sup class="vt-badge ts" />
diff --git a/src/api/composition-api-lifecycle.md b/src/api/composition-api-lifecycle.md
index 1dffd5e59..97dc05f55 100644
--- a/src/api/composition-api-lifecycle.md
+++ b/src/api/composition-api-lifecycle.md
@@ -1,7 +1,7 @@
 # Composition API: ライフサイクルフック {#composition-api-lifecycle-hooks}
 
 :::info 使用上の注意
-このページに記載されているすべての API は、コンポーネントの `setup()` フェーズで同期的に呼び出される必要があります。詳細については、[ガイド - ライフサイクルフック](/guide/essentials/lifecycle.html)を参照してください。
+このページに記載されているすべての API は、コンポーネントの `setup()` フェーズで同期的に呼び出される必要があります。詳細については、[ガイド - ライフサイクルフック](/guide/essentials/lifecycle)を参照してください。
 :::
 
 ## onMounted() {#onmounted}
@@ -22,7 +22,7 @@
 
   - そのコンポーネント自身の DOM ツリーが作成され、親コンテナーに挿入された時。アプリケーションのルートコンテナが document 内にある場合のみ、そのコンポーネントの DOM ツリーも document 内にあることを保証することに注意してください。
 
-  このフックは、通常、コンポーネントのレンダリングされた DOM にアクセスする必要がある副作用を実行する場合や、[サーバーレンダリングされるアプリケーション](/guide/scaling-up/ssr.html)において DOM 関連のコードをクライアントに限定する場合に使用されます。
+  このフックは、通常、コンポーネントのレンダリングされた DOM にアクセスする必要がある副作用を実行する場合や、[サーバーレンダリングされるアプリケーション](/guide/scaling-up/ssr)において DOM 関連のコードをクライアントに限定する場合に使用されます。
 
   **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -60,7 +60,7 @@
 
   親コンポーネントの更新フックは、子コンポーネントの更新フックの後に呼び出されます。
 
-  このフックは、様々な状態変更によるコンポーネントの DOM 更新の後に呼び出されます。もし、特定の状態変更の後に更新された DOM へアクセスする必要がある場合は、代わりに [nextTick()](/api/general.html#nexttick) を使用してください。
+  このフックは、様々な状態変更によるコンポーネントの DOM 更新の後に呼び出されます。もし、特定の状態変更の後に更新された DOM へアクセスする必要がある場合は、代わりに [nextTick()](/api/general#nexttick) を使用してください。
 
   **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -212,7 +212,7 @@
 
   **エラー伝搬のルール**
 
-  - アプリケーションレベルの [`app.config.errorHandler`](/api/application.html#app-config-errorhandler) が定義されていれば、デフォルトでそちらにもすべてのエラーが送られるので、これらのエラーを 1 箇所でアナリティクスサービスに報告できます。
+  - アプリケーションレベルの [`app.config.errorHandler`](/api/application#app-config-errorhandler) が定義されていれば、デフォルトでそちらにもすべてのエラーが送られるので、これらのエラーを 1 箇所でアナリティクスサービスに報告できます。
 
   - コンポーネントの継承チェーンや親チェーンに複数の `errorCaptured` フックが存在する場合、同じエラーに対して、下から上への順番ですべてのフックが呼び出されます。これはネイティブ DOM イベントのバブリングの仕組みに似ています。
 
@@ -241,7 +241,7 @@
   }
   ```
 
-- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html)
+- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth)
 
 ## onRenderTriggered() <sup class="vt-badge dev-only" /> {#onrendertriggered}
 
@@ -267,11 +267,11 @@
   }
   ```
 
-- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html)
+- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth)
 
 ## onActivated() {#onactivated}
 
-コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components.html#keepalive) によってキャッシュされたツリーの一部として DOM に挿入された後に呼び出されるコールバックを登録します。
+コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components#keepalive) によってキャッシュされたツリーの一部として DOM に挿入された後に呼び出されるコールバックを登録します。
 
 **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -281,11 +281,11 @@
   function onActivated(callback: () => void): void
   ```
 
-- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance)
+- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive#lifecycle-of-cached-instance)
 
 ## onDeactivated() {#ondeactivated}
 
-コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components.html#keepalive) によってキャッシュされたツリーの一部として DOM から削除された後に呼び出されるコールバックを登録します。
+コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components#keepalive) によってキャッシュされたツリーの一部として DOM から削除された後に呼び出されるコールバックを登録します。
 
 **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -295,7 +295,7 @@
   function onDeactivated(callback: () => void): void
   ```
 
-- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance)
+- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive#lifecycle-of-cached-instance)
 
 ## onServerPrefetch() <sup class="vt-badge" data-text="SSR only" /> {#onserverprefetch}
 
@@ -338,4 +338,4 @@
   </script>
   ```
 
-- **参照:** [サーバーサイドレンダリング](/guide/scaling-up/ssr.html)
+- **参照:** [サーバーサイドレンダリング](/guide/scaling-up/ssr)
diff --git a/src/api/composition-api-setup.md b/src/api/composition-api-setup.md
index 5ac89c964..4d18df410 100644
--- a/src/api/composition-api-setup.md
+++ b/src/api/composition-api-setup.md
@@ -8,10 +8,10 @@
 2. Options API コンポーネント内の Composition API に基づくコードの統合
 
 :::info Note
-単一ファイルコンポーネントで Composition API を使用する場合は、より簡潔で人間工学的な構文のために、[`<script setup>`](/api/sfc-script-setup.html) を強くお勧めします。
+単一ファイルコンポーネントで Composition API を使用する場合は、より簡潔で人間工学的な構文のために、[`<script setup>`](/api/sfc-script-setup) を強くお勧めします。
 :::
 
-[リアクティビティー API](./reactivity-core.html) を使ってリアクティブな状態を宣言したり、`setup()` からオブジェクトを返すことによってそれらを公開することができます。返されたオブジェクトのプロパティは、コンポーネントインスタンス上でも利用することができます (他のオプションが使用されている場合):
+[リアクティビティー API](./reactivity-core) を使ってリアクティブな状態を宣言したり、`setup()` からオブジェクトを返すことによってそれらを公開することができます。返されたオブジェクトのプロパティは、コンポーネントインスタンス上でも利用することができます (他のオプションが使用されている場合):
 
 ```vue
 <script>
@@ -38,11 +38,11 @@ export default {
 </template>
 ```
 
-`setup` から返された [ref](/api/reactivity-core.html#ref) は、テンプレート内でアクセスされたときに[自動的に浅くアンラップされる](/guide/essentials/reactivity-fundamentals.html#deep-reactivity)ため、テンプレート内で `.value` を使用する必要はありません。また、`this` でアクセスしたときも同様にアンラップされます。
+`setup` から返された [ref](/api/reactivity-core#ref) は、テンプレート内でアクセスされたときに[自動的に浅くアンラップされる](/guide/essentials/reactivity-fundamentals#deep-reactivity)ため、テンプレート内で `.value` を使用する必要はありません。また、`this` でアクセスしたときも同様にアンラップされます。
 
 `setup()` 自体はコンポーネントインスタンスにアクセスできません。- `this` は `setup()` 内では `undefined` 値を持ちます。Options API から Composition API で公開された値にアクセスすることができますが、その逆はできません。
 
-`setup()` は**同期的**にオブジェクトを返さなければなりません。`async setup()` が使用できるのは、そのコンポーネントが [Suspense](../guide/built-ins/suspense.html) コンポーネントの子孫であるときだけです。
+`setup()` は**同期的**にオブジェクトを返さなければなりません。`async setup()` が使用できるのは、そのコンポーネントが [Suspense](../guide/built-ins/suspense) コンポーネントの子孫であるときだけです。
 
 ## プロパティへのアクセス {#accessing-props}
 
@@ -61,7 +61,7 @@ export default {
 
 もし、`props` オブジェクトを分割代入する場合は、分割代入された変数はリアクティビティーを失うことに注意してください。 そのため、常に `props.xxx` の形でプロパティにアクセスすることを推奨します。
 
-もし、本当にプロパティを分割代入すること、もしくはリアクティビティーを保持しながら外部の関数に渡すことが必要なら、 ユーティリティー API である [toRefs()](./reactivity-utilities.html#torefs) や [toRef()](/api/reactivity-utilities.html#toref) を使用することで、行うことができます:
+もし、本当にプロパティを分割代入すること、もしくはリアクティビティーを保持しながら外部の関数に渡すことが必要なら、 ユーティリティー API である [toRefs()](./reactivity-utilities#torefs) や [toRef()](/api/reactivity-utilities#toref) を使用することで、行うことができます:
 
 ```js
 import { toRefs, toRef } from 'vue'
@@ -115,7 +115,7 @@ export default {
 
 ### パブリックプロパティの公開 {#exposing-public-properties}
 
-`expose` は、親コンポーネントから[テンプレート参照](/guide/essentials/template-refs.html#ref-on-component)でコンポーネントインスタンスにアクセスする際に、公開するプロパティを明示的に制限するために使用することができる関数です:
+`expose` は、親コンポーネントから[テンプレート参照](/guide/essentials/template-refs#ref-on-component)でコンポーネントインスタンスにアクセスする際に、公開するプロパティを明示的に制限するために使用することができる関数です:
 
 ```js{5,10}
 export default {
@@ -134,7 +134,7 @@ export default {
 
 ## レンダー関数での使用 {#usage-with-render-functions}
 
-`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができる [レンダー関数](/guide/extras/render-function.html)を返すこともできます:
+`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができる [レンダー関数](/guide/extras/render-function)を返すこともできます:
 
 ```js{6}
 import { h, ref } from 'vue'
diff --git a/src/api/general.md b/src/api/general.md
index ef43d195b..3e75c36e2 100644
--- a/src/api/general.md
+++ b/src/api/general.md
@@ -92,7 +92,7 @@ Vue の現在のバージョンを公開します。
 
   </div>
 
-- **参照:** [`this.$nextTick()`](/api/component-instance.html#nexttick)
+- **参照:** [`this.$nextTick()`](/api/component-instance#nexttick)
 
 ## defineComponent() {#definecomponent}
 
@@ -134,7 +134,7 @@ Vue の現在のバージョンを公開します。
 
   これは Vite を使っている場合には必要ないことに注意してください。Rollup（Vite が使用するプロダクションのバンドラー）は賢いので、手動でアノテーションを付けなくても `defineComponent()` が実際には副作用がないことを判断できます。
 
-- **参照:** [ガイド - TypeScript で Vue を使用する](/guide/typescript/overview.html#general-usage-notes)
+- **参照:** [ガイド - TypeScript で Vue を使用する](/guide/typescript/overview#general-usage-notes)
 
 ## defineAsyncComponent() {#defineasynccomponent}
 
@@ -165,7 +165,7 @@ Vue の現在のバージョンを公開します。
   }
   ```
 
-- **参照:** [ガイド - 非同期コンポーネント](/guide/components/async.html)
+- **参照:** [ガイド - 非同期コンポーネント](/guide/components/async)
 
 ## defineCustomElement() {#definecustomelement}
 
@@ -206,6 +206,6 @@ Vue の現在のバージョンを公開します。
 
 - **参照:**
 
-  - [ガイド - Vue によるカスタム要素のビルド](/guide/extras/web-components.html#building-custom-elements-with-vue)
+  - [ガイド - Vue によるカスタム要素のビルド](/guide/extras/web-components#building-custom-elements-with-vue)
 
-  - また、`defineCustomElement()` は単一ファイルコンポーネントで使用する場合、[特別な設定](/guide/extras/web-components.html#sfc-as-custom-element)が必要なので注意してください。
+  - また、`defineCustomElement()` は単一ファイルコンポーネントで使用する場合、[特別な設定](/guide/extras/web-components#sfc-as-custom-element)が必要なので注意してください。
diff --git a/src/api/options-composition.md b/src/api/options-composition.md
index 82a258153..2636b55b7 100644
--- a/src/api/options-composition.md
+++ b/src/api/options-composition.md
@@ -50,9 +50,9 @@
   }
   ```
 
-  上記の例では、提供された `msg` はリアクティブではないことに注意してください。詳しくは[リアクティビティーと共に利用する](/guide/components/provide-inject.html#working-with-reactivity)を参照してください。
+  上記の例では、提供された `msg` はリアクティブではないことに注意してください。詳しくは[リアクティビティーと共に利用する](/guide/components/provide-inject#working-with-reactivity)を参照してください。
 
-- **参照:** [Provide / Inject](/guide/components/provide-inject.html)
+- **参照:** [Provide / Inject](/guide/components/provide-inject)
 
 ## inject {#inject}
 
@@ -88,7 +88,7 @@
 
   一致するプロパティもデフォルト値も提供されなかった場合、注入されたプロパティは `undefined` となります。
 
-  注入されたバインディングは反応的で**ない**ことに注意してください。これは意図的なものです。ただし、注入された値がリアクティブなオブジェクトである場合、そのオブジェクトのプロパティはリアクティブなままです。詳しくは[リアクティビティーと共に利用する](/guide/components/provide-inject.html#working-with-reactivity)を参照してください。
+  注入されたバインディングは反応的で**ない**ことに注意してください。これは意図的なものです。ただし、注入された値がリアクティブなオブジェクトである場合、そのオブジェクトのプロパティはリアクティブなままです。詳しくは[リアクティビティーと共に利用する](/guide/components/provide-inject#working-with-reactivity)を参照してください。
 
 - **例**
 
@@ -167,7 +167,7 @@
   }
   ```
 
-- **参照:** [Provide / Inject](/guide/components/provide-inject.html)
+- **参照:** [Provide / Inject](/guide/components/provide-inject)
 
 ## mixins {#mixins}
 
@@ -188,7 +188,7 @@
   ミックスインフックは提供された順に呼び出され、コンポーネント自身のフックの前に呼び出されます。
 
   :::warning もう推奨されていません
-  Vue 2 では、ミックスインはコンポーネントロジックの再利用可能なチャンクを作成するための主要なメカニズムでした。ミックスインは Vue 3 でも引き続きサポートされていますが、コンポーネント間でのコード再利用には、[Composition API](/guide/reusability/composables.html) が好ましいアプローチとなっています。
+  Vue 2 では、ミックスインはコンポーネントロジックの再利用可能なチャンクを作成するための主要なメカニズムでした。ミックスインは Vue 3 でも引き続きサポートされていますが、コンポーネント間でのコード再利用には、[Composition API](/guide/reusability/composables) が好ましいアプローチとなっています。
   :::
 
 - **例:**
diff --git a/src/api/options-lifecycle.md b/src/api/options-lifecycle.md
index b0f7e5ac4..31213e09a 100644
--- a/src/api/options-lifecycle.md
+++ b/src/api/options-lifecycle.md
@@ -1,7 +1,7 @@
 # オプション: ライフサイクル {#options-lifecycle}
 
 :::info 参照
-ライフサイクルフックの共通の使い方については、[ガイド - ライフサイクルフック](/guide/essentials/lifecycle.html) を参照してください
+ライフサイクルフックの共通の使い方については、[ガイド - ライフサイクルフック](/guide/essentials/lifecycle) を参照してください
 :::
 
 ## beforeCreate {#beforecreate}
@@ -76,7 +76,7 @@
 
   - そのコンポーネント自身の DOM ツリーが作成され、親コンテナーに挿入された時。アプリケーションのルートコンテナが document 内にある場合のみ、そのコンポーネントの DOM ツリーも document 内にあることを保証することに注意してください。
 
-  このフックは、通常、コンポーネントのレンダリングされた DOM にアクセスする必要がある副作用を実行する場合や、[サーバーレンダリングされるアプリケーション](/guide/scaling-up/ssr.html)において DOM 関連のコードをクライアントに限定する場合に使用されます。
+  このフックは、通常、コンポーネントのレンダリングされた DOM にアクセスする必要がある副作用を実行する場合や、[サーバーレンダリングされるアプリケーション](/guide/scaling-up/ssr)において DOM 関連のコードをクライアントに限定する場合に使用されます。
 
   **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -114,7 +114,7 @@
 
   親コンポーネントの更新フックは、子コンポーネントの更新フックの後に呼び出されます。
 
-  このフックは、様々な状態変更によるコンポーネントの DOM 更新の後に呼び出されます。もし、特定の状態変更の後に更新された DOM へアクセスする必要がある場合は、代わりに [nextTick()](/api/general.html#nexttick) を使用してください。
+  このフックは、様々な状態変更によるコンポーネントの DOM 更新の後に呼び出されます。もし、特定の状態変更の後に更新された DOM へアクセスする必要がある場合は、代わりに [nextTick()](/api/general#nexttick) を使用してください。
 
   **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -201,7 +201,7 @@
 
   **エラー伝搬のルール**
 
-  - アプリケーションレベルの [`app.config.errorHandler`](/api/application.html#app-config-errorhandler) が定義されていれば、デフォルトでそちらにもすべてのエラーが送られるので、これらのエラーを 1 箇所でアナリティクスサービスに報告できます。
+  - アプリケーションレベルの [`app.config.errorHandler`](/api/application#app-config-errorhandler) が定義されていれば、デフォルトでそちらにもすべてのエラーが送られるので、これらのエラーを 1 箇所でアナリティクスサービスに報告できます。
 
   - コンポーネントの継承チェーンや親チェーンに複数の `errorCaptured` フックが存在する場合、同じエラーに対して、下から上への順番ですべてのフックが呼び出されます。これはネイティブ DOM イベントのバブリングの仕組みに似ています。
 
@@ -230,7 +230,7 @@
   }
   ```
 
-- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html)
+- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth)
 
 ## renderTriggered <sup class="vt-badge dev-only" /> {#rendertriggered}
 
@@ -256,11 +256,11 @@
   }
   ```
 
-- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html)
+- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth)
 
 ## activated {#activated}
 
-コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components.html#keepalive) によってキャッシュされたツリーの一部として DOM に挿入された後に呼び出されます。
+コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components#keepalive) によってキャッシュされたツリーの一部として DOM に挿入された後に呼び出されます。
 
 **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -272,11 +272,11 @@
   }
   ```
 
-- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance)
+- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive#lifecycle-of-cached-instance)
 
 ## deactivated {#deactivated}
 
-コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components.html#keepalive) によってキャッシュされたツリーの一部として DOM から削除された後に呼び出されます。
+コンポーネントインスタンスが [`<KeepAlive>`](/api/built-in-components#keepalive) によってキャッシュされたツリーの一部として DOM から削除された後に呼び出されます。
 
 **このフックはサーバーサイドレンダリング時には呼び出されません。**
 
@@ -288,7 +288,7 @@
   }
   ```
 
-- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance)
+- **参照:** [ガイド - キャッシュされたインスタンスのライフサイクル](/guide/built-ins/keep-alive#lifecycle-of-cached-instance)
 
 ## serverPrefetch <sup class="vt-badge" data-text="SSR only" /> {#serverprefetch}
 
@@ -333,4 +333,4 @@
   }
   ```
 
-- **参照:** [サーバーサイドレンダリング](/guide/scaling-up/ssr.html)
+- **参照:** [サーバーサイドレンダリング](/guide/scaling-up/ssr)
diff --git a/src/api/options-misc.md b/src/api/options-misc.md
index 855fc1a0b..8f545f195 100644
--- a/src/api/options-misc.md
+++ b/src/api/options-misc.md
@@ -22,11 +22,11 @@
 
   単一ファイルコンポーネントを使用する場合、コンポーネントはすでにファイル名から自身の名前を推測しています。例えば、`MyComponent.vue` という名前のファイルは、推測された表示名 "MyComponent" を持つことになります。
 
-  また、[`app.component`](/api/application.html#app-component) でコンポーネントをグローバル登録すると、グローバル ID が名前として自動的に設定されるケースもあります。
+  また、[`app.component`](/api/application#app-component) でコンポーネントをグローバル登録すると、グローバル ID が名前として自動的に設定されるケースもあります。
 
   `name` オプションは、推測された名前を上書きしたり、名前が推測できないとき（例: ビルドツールを使用していないときや、インラインの非 SFC コンポーネント）に明示的に名前を指定したりできます。
 
-  `name` が明示的に必要となるケースがひとつあります: [`<KeepAlive>`](/guide/built-ins/keep-alive.html) のキャッシュ可能なコンポーネントに対して、`include / exclude` プロパティでマッチングする場合です。
+  `name` が明示的に必要となるケースがひとつあります: [`<KeepAlive>`](/guide/built-ins/keep-alive) のキャッシュ可能なコンポーネントに対して、`include / exclude` プロパティでマッチングする場合です。
 
   :::tip
   バージョン 3.2.34 以降、`<script setup>` を使用した単一ファイルコンポーネントは、ファイル名から `name` オプションを自動的に推測します。これにより、`<KeepAlive>` と共に使用した場合でも、手動で名前を宣言する必要がなくなりました。
@@ -104,7 +104,7 @@
 
   </div>
 
-- **参照:** [フォールスルー属性](/guide/components/attrs.html)
+- **参照:** [フォールスルー属性](/guide/components/attrs)
 
 ## components {#components}
 
@@ -134,7 +134,7 @@
   }
   ```
 
-- **参照:** [コンポーネントの登録](/guide/components/registration.html)
+- **参照:** [コンポーネントの登録](/guide/components/registration)
 
 ## directives {#directives}
 
@@ -169,4 +169,4 @@
 
   コンポーネントインスタンスで使用可能なディレクティブのハッシュ。
 
-- **参照:** [カスタムディレクティブ](/guide/reusability/custom-directives.html)
+- **参照:** [カスタムディレクティブ](/guide/reusability/custom-directives)
diff --git a/src/api/options-rendering.md b/src/api/options-rendering.md
index 8a4c5fb75..7a6fd28b4 100644
--- a/src/api/options-rendering.md
+++ b/src/api/options-rendering.md
@@ -23,7 +23,7 @@
   アプリケーションのルートコンポーネントに `template` や `render` オプションが指定されていない場合、Vue はマウントされた要素の `innerHTML` を代わりにテンプレートとして使用しようとします。
 
   :::warning セキュリティーに関する注意
-  テンプレートのソースは信頼できるものだけを使用してください。ユーザーが提供したコンテンツをテンプレートとして使用しないでください。詳しくは[セキュリティーガイド](/guide/best-practices/security.html#rule-no-1-never-use-non-trusted-templates)を参照してください。
+  テンプレートのソースは信頼できるものだけを使用してください。ユーザーが提供したコンテンツをテンプレートとして使用しないでください。詳しくは[セキュリティーガイド](/guide/best-practices/security#rule-no-1-never-use-non-trusted-templates)を参照してください。
   :::
 
 ## render {#render}
@@ -58,8 +58,8 @@
   単一ファイルコンポーネントのような、あらかじめコンパイルされたテンプレートは、ビルド時に `render` オプションにコンパイルされます。`render` と `template` の両方がコンポーネント内に存在する場合は `render` の方が優先されます。
 
 - **参照:**
-  - [レンダリングの仕組み](/guide/extras/rendering-mechanism.html)
-  - [レンダー関数](/guide/extras/render-function.html)
+  - [レンダリングの仕組み](/guide/extras/rendering-mechanism)
+  - [レンダー関数](/guide/extras/render-function)
 
 ## compilerOptions {#compileroptions}
 
@@ -80,6 +80,6 @@
 
 - **詳細**
 
-  この設定オプションは、フルビルド（つまり、ブラウザー上でテンプレートをコンパイルできるスタンドアロンの `vue.js`）を使っているときだけ反映されます。アプリケーションレベルの [app.config.compilerOptions](/api/application.html#app-config-compileroptions) と同じオプションをサポートし、現在のコンポーネントに対してより高い優先順位が設定されています。
+  この設定オプションは、フルビルド（つまり、ブラウザー上でテンプレートをコンパイルできるスタンドアロンの `vue.js`）を使っているときだけ反映されます。アプリケーションレベルの [app.config.compilerOptions](/api/application#app-config-compileroptions) と同じオプションをサポートし、現在のコンポーネントに対してより高い優先順位が設定されています。
 
-- **参照:** [app.config.compilerOptions](/api/application.html#app-config-compileroptions)
+- **参照:** [app.config.compilerOptions](/api/application#app-config-compileroptions)
diff --git a/src/api/options-state.md b/src/api/options-state.md
index 9f001f39b..8fa3e32de 100644
--- a/src/api/options-state.md
+++ b/src/api/options-state.md
@@ -45,7 +45,7 @@
   data: (vm) => ({ a: vm.myProp })
   ```
 
-- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html)
+- **参照:** [リアクティビティーの探求](/guide/extras/reactivity-in-depth)
 
 ## props {#props}
 
@@ -85,9 +85,9 @@
 
   オブジェクトベースの構文では、各プロパティはさらに以下のオプションを定義できます:
 
-  - **`type`**: 以下のネイティブコンストラクターのいずれかを指定します: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, 任意のカスタムコンストラクタ関数、またはそれらの配列。開発モードでは、Vue はプロパティの値が宣言された型と一致するかどうかをチェックし、一致しない場合は警告を投げます。詳しくは [プロパティのバリデーション](/guide/components/props.html#prop-validation) を参照してください。
+  - **`type`**: 以下のネイティブコンストラクターのいずれかを指定します: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, 任意のカスタムコンストラクタ関数、またはそれらの配列。開発モードでは、Vue はプロパティの値が宣言された型と一致するかどうかをチェックし、一致しない場合は警告を投げます。詳しくは [プロパティのバリデーション](/guide/components/props#prop-validation) を参照してください。
 
-    また、`Boolean` 型のプロパティは、開発とプロダクションの両方で、値のキャスト動作に影響を与えることに注意してください。詳しくは[真偽値の型変換](/guide/components/props.html#boolean-casting)を参照してください。
+    また、`Boolean` 型のプロパティは、開発とプロダクションの両方で、値のキャスト動作に影響を与えることに注意してください。詳しくは[真偽値の型変換](/guide/components/props#boolean-casting)を参照してください。
 
   - **`default`**: が親から渡されなかったり、値が `undefined` の場合のデフォルト値を指定します。オブジェクトや配列のデフォルト値は、ファクトリー関数を用いて返さなければなりません。ファクトリー関数は引数として加工前のプロパティオブジェクトも受け取ります。
 
@@ -126,8 +126,8 @@
   ```
 
 - **参照:**
-  - [ガイド - プロパティ](/guide/components/props.html)
-  - [ガイド - コンポーネントプロパティの型付け](/guide/typescript/options-api.html#typing-component-props) <sup class="vt-badge ts" />
+  - [ガイド - プロパティ](/guide/components/props)
+  - [ガイド - コンポーネントプロパティの型付け](/guide/typescript/options-api#typing-component-props) <sup class="vt-badge ts" />
 
 ## computed {#computed}
 
@@ -208,8 +208,8 @@
   ```
 
 - **参照:**
-  - [ガイド - 算出プロパティ](/guide/essentials/computed.html)
-  - [ガイド - 算出プロパティの型付け](/guide/typescript/options-api.html#typing-computed-properties) <sup class="vt-badge ts" />
+  - [ガイド - 算出プロパティ](/guide/essentials/computed)
+  - [ガイド - 算出プロパティの型付け](/guide/typescript/options-api#typing-computed-properties) <sup class="vt-badge ts" />
 
 ## methods {#methods}
 
@@ -250,7 +250,7 @@
   }
   ```
 
-- **参照:** [イベントハンドリング](/guide/essentials/event-handling.html)
+- **参照:** [イベントハンドリング](/guide/essentials/event-handling)
 
 ## watch {#watch}
 
@@ -289,14 +289,14 @@
 
   `watch` オプションは、キーが監視対象のリアクティブコンポーネントのインスタンスのプロパティ（たとえば `data` や `computed` で宣言されたプロパティ）で、値が対応するコールバックであるオブジェクトを受け付けます。コールバックは、監視対象のソースの新しい値と古い値を受け取ります。
 
-  ルートレベルのプロパティに加えて、キーはシンプルなドット区切りのパス、例えば `a.b.c` も使用できます。この使い方は、複雑な式をサポートして**いない**ことに注意してください - ドット区切りのパスのみがサポートされています。もし、複雑なデータソースを監視する必要がある場合は、代わりに命令型の [`$watch()`](/api/component-instance.html#watch) API を使ってください。
+  ルートレベルのプロパティに加えて、キーはシンプルなドット区切りのパス、例えば `a.b.c` も使用できます。この使い方は、複雑な式をサポートして**いない**ことに注意してください - ドット区切りのパスのみがサポートされています。もし、複雑なデータソースを監視する必要がある場合は、代わりに命令型の [`$watch()`](/api/component-instance#watch) API を使ってください。
 
   値は、（`methods` で宣言した）メソッド名の文字列や、追加のオプションを含むオブジェクトにもできます。オブジェクト構文を使用する場合、コールバックは `handler` フィールドの下で宣言する必要があります。追加のオプションは以下のとおりです:
 
   - **`immediate`**: ウォッチャーが作成されるとすぐにコールバックをトリガーします。最初の呼び出しでは、古い値は `undefined` になります。
-  - **`deep`**: ソースがオブジェクトまたは配列の場合、深い探索を強制し、深部の変更の際にコールバックが発生するようにします。[ディープ・ウォッチャー](/guide/essentials/watchers.html#deep-watchers)を参照してください。
-  - **`flush`**: コールバックの実行タイミングを調整します。[コールバックが実行されるタイミング](/guide/essentials/watchers.html#callback-flush-timing)と [`watchEffect()`](/api/reactivity-core.html#watcheffect) を参照してください。
-  - **`onTrack / onTrigger`**: ウォッチャーの依存関係をデバッグします。[ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth.html#watcher-debugging)を参照してください。
+  - **`deep`**: ソースがオブジェクトまたは配列の場合、深い探索を強制し、深部の変更の際にコールバックが発生するようにします。[ディープ・ウォッチャー](/guide/essentials/watchers#deep-watchers)を参照してください。
+  - **`flush`**: コールバックの実行タイミングを調整します。[コールバックが実行されるタイミング](/guide/essentials/watchers#callback-flush-timing)と [`watchEffect()`](/api/reactivity-core#watcheffect) を参照してください。
+  - **`onTrack / onTrigger`**: ウォッチャーの依存関係をデバッグします。[ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth#watcher-debugging)を参照してください。
 
   アロー関数は `this` を介してコンポーネントのインスタンスにアクセスできないため、ウォッチコールバックを宣言する際に使用することは避けてください。
 
@@ -368,7 +368,7 @@
   }
   ```
 
-- **参照:** [ウォッチャー](/guide/essentials/watchers.html)
+- **参照:** [ウォッチャー](/guide/essentials/watchers)
 
 ## emits {#emits}
 
@@ -397,7 +397,7 @@
 
   バリデーション関数は、コンポーネントの `$emit` 呼び出しに渡された追加の引数を受け取ります。 たとえば、`this.$emit('foo', 1)` が呼び出された場合、対応する `foo` のバリデータは引数 `1` を受け取ります。バリデータ関数は、イベントの引数が妥当かどうかを示す真偽値を返す必要があります。
 
-  `emits` オプションは、どのイベントリスナーが（ネイティブ DOM イベントリスナーではなく）コンポーネントイベントリスナーと見なされるかに影響することに注意してください。宣言されたイベントのリスナーは、コンポーネントの `$attrs` オブジェクトから削除されるため、コンポーネントのルート要素には渡されません。 詳細については、[フォールスルー属性](/guide/components/attrs.html) を参照してください。
+  `emits` オプションは、どのイベントリスナーが（ネイティブ DOM イベントリスナーではなく）コンポーネントイベントリスナーと見なされるかに影響することに注意してください。宣言されたイベントのリスナーは、コンポーネントの `$attrs` オブジェクトから削除されるため、コンポーネントのルート要素には渡されません。 詳細については、[フォールスルー属性](/guide/components/attrs) を参照してください。
 
 - **例**
 
@@ -434,8 +434,8 @@
   ```
 
 * **参照:**
-  - [ガイド - フォールスルー属性](/guide/components/attrs.html)
-  - [ガイド - コンポーネントの emits の型付け](/guide/typescript/options-api.html#typing-component-emits) <sup class="vt-badge ts" />
+  - [ガイド - フォールスルー属性](/guide/components/attrs)
+  - [ガイド - コンポーネントの emits の型付け](/guide/typescript/options-api#typing-component-emits) <sup class="vt-badge ts" />
 
 ## expose {#expose}
 
diff --git a/src/api/reactivity-advanced.md b/src/api/reactivity-advanced.md
index d701d87c4..c5e91be80 100644
--- a/src/api/reactivity-advanced.md
+++ b/src/api/reactivity-advanced.md
@@ -2,7 +2,7 @@
 
 ## shallowRef() {#shallowref}
 
-[`ref()`](./reactivity-core.html#ref) の shallow（浅い）バージョン。
+[`ref()`](./reactivity-core#ref) の shallow（浅い）バージョン。
 
 - **型**
 
@@ -33,8 +33,8 @@
   ```
 
 - **参照:**
-  - [ガイド - 大きなイミュータブルな構造のリアクティビティオーバーヘッドを減らす](/guide/best-practices/performance.html#reduce-reactivity-overhead-for-large-immutable-structures)
-  - [ガイド - 外部の状態システムとの統合](/guide/extras/reactivity-in-depth.html#integration-with-external-state-systems)
+  - [ガイド - 大きなイミュータブルな構造のリアクティビティオーバーヘッドを減らす](/guide/best-practices/performance#reduce-reactivity-overhead-for-large-immutable-structures)
+  - [ガイド - 外部の状態システムとの統合](/guide/extras/reactivity-in-depth#integration-with-external-state-systems)
 
 ## triggerRef() {#triggerref}
 
@@ -133,7 +133,7 @@
 
 ## shallowReactive() {#shallowreactive}
 
-[`reactive()`](./reactivity-core.html#reactive) の shallow（浅い）バージョン。
+[`reactive()`](./reactivity-core#reactive) の shallow（浅い）バージョン。
 
 - **型**
 
@@ -171,7 +171,7 @@
 
 ## shallowReadonly() {#shallowreadonly}
 
-[`readonly()`](./reactivity-core.html#readonly) の shallow（浅い）バージョン。
+[`readonly()`](./reactivity-core#readonly) の shallow（浅い）バージョン。
 
 - **型**
 
@@ -219,7 +219,7 @@ Vue で作成されたプロキシの、未加工の元のオブジェクトを
 
 - **詳細**
 
-  `toRaw()` は [`reactive()`](./reactivity-core.html#reactive), [`readonly()`](./reactivity-core.html#readonly), [`shallowReactive()`](#shallowreactive), [`shallowReadonly()`](#shallowreadonly) で生成したプロキシから元のオブジェクトを返せるようにします。
+  `toRaw()` は [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](#shallowreactive), [`shallowReadonly()`](#shallowreadonly) で生成したプロキシから元のオブジェクトを返せるようにします。
 
   これは、プロキシのアクセスやトラッキングのオーバーヘッドを発生させずに一時的に読み込んだり、変更をトリガーせずに書き込んだりするために使用できる緊急避難口です。元のオブジェクトへの永続的な参照を保持することは推奨**されません**。注意して使用してください。
 
diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md
index 8a9ce8e52..e3039a6d0 100644
--- a/src/api/reactivity-core.md
+++ b/src/api/reactivity-core.md
@@ -3,8 +3,8 @@
 :::info See also
 よりリアクティビティー API を理解するために、ガイド内の次の章を読むことを推奨します:
 
-- [リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals.html) (API 環境設定が Composition API に設定されている場合)
-- [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html)
+- [リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals) (API 環境設定が Composition API に設定されている場合)
+- [リアクティビティーの探求](/guide/extras/reactivity-in-depth)
   :::
 
 ## ref() {#ref}
@@ -27,7 +27,7 @@
 
   ref の値としてオブジェクトが代入された場合、[reactive()](#reactive) でそのオブジェクトは深いリアクティブになります。これはオブジェクトがネストした ref を含む場合、それが深くアンラップされることも意味します。
 
-  深い変換を避けるためには、代わりに [`shallowRef()`](./reactivity-advanced.html#shallowref) 使用します。
+  深い変換を避けるためには、代わりに [`shallowRef()`](./reactivity-advanced#shallowref) 使用します。
 
 - **例**
 
@@ -40,8 +40,8 @@
   ```
 
 - **参照:**
-  - [ガイド - `ref()` と共に使うリアクティブな変数](/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref)
-  - [ガイド - `ref()` の型付け](/guide/typescript/composition-api.html#typing-ref) <sup class="vt-badge ts" />
+  - [ガイド - `ref()` と共に使うリアクティブな変数](/guide/essentials/reactivity-fundamentals#reactive-variables-with-ref)
+  - [ガイド - `ref()` の型付け](/guide/typescript/composition-api#typing-ref) <sup class="vt-badge ts" />
 
 ## computed() {#computed}
 
@@ -109,9 +109,9 @@
   ```
 
 - **参照:**
-  - [ガイド - 算出プロパティ](/guide/essentials/computed.html)
-  - [ガイド - 算出プロパティのデバッグ](/guide/extras/reactivity-in-depth.html#computed-debugging)
-  - [ガイド - `computed()` の型付け](/guide/typescript/composition-api.html#typing-computed) <sup class="vt-badge ts" />
+  - [ガイド - 算出プロパティ](/guide/essentials/computed)
+  - [ガイド - 算出プロパティのデバッグ](/guide/extras/reactivity-in-depth#computed-debugging)
+  - [ガイド - `computed()` の型付け](/guide/typescript/composition-api#typing-computed) <sup class="vt-badge ts" />
 
 ## reactive() {#reactive}
 
@@ -129,7 +129,7 @@
 
   また、ref がリアクティブな配列の要素や、`Map` のようなネイティブなコレクションタイプとしてアクセスされた場合、ref のアンラップは行われないことにも注意が必要です。
 
-  深い変換を避け、ルートレベルのリアクティビティーのみを保持するためには、代わりに [shallowReactive()](./reactivity-advanced.html#shallowreactive) 使用します。
+  深い変換を避け、ルートレベルのリアクティビティーのみを保持するためには、代わりに [shallowReactive()](./reactivity-advanced#shallowreactive) 使用します。
 
   返されたオブジェクトとそのネストされたオブジェクトは [ES Proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) でラップされ、元のオブジェクトと**等しくなりません**。元のオブジェクトに依存することを避け、リアクティブなプロキシのみを使用することが推奨されます。
 
@@ -187,8 +187,8 @@
   ```
 
 - **参照:**
-  - [ガイド - リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals.html)
-  - [ガイド - `reactive()` の型付け](/guide/typescript/composition-api.html#typing-reactive) <sup class="vt-badge ts" />
+  - [ガイド - リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals)
+  - [ガイド - `reactive()` の型付け](/guide/typescript/composition-api#typing-reactive) <sup class="vt-badge ts" />
 
 ## readonly() {#readonly}
 
@@ -206,7 +206,7 @@
 
   読み取り専用プロキシは深く、アクセスされた、ネストされたプロパティも読み取り専用になります。また、`reactive()` と同様にアンラップすることができますが、アンラップされた値も読み取り専用になります。
 
-  深い変換を避けるためには、代わりに [shallowReadonly()](./reactivity-advanced.html#shallowreadonly) を使用します。
+  深い変換を避けるためには、代わりに [shallowReadonly()](./reactivity-advanced#shallowreadonly) を使用します。
 
 - **例**
 
@@ -256,7 +256,7 @@
 
   第 2 引数は省略可能なオプションオブジェクトで、エフェクトのフラッシュタイミングを調整したり、エフェクトの依存関係をデバッグするために使用することができます。
 
-  デフォルトでは、ウォッチャーはコンポーネントレンダリングの直前に実行されます。`flush: 'post'` を設定すると、コンポーネントのレンダリングが終わるまでウォッチャーを遅延させることができます。詳しくは[コールバックが実行されるタイミング](/guide/essentials/watchers.html#callback-flush-timing)を参照してください。まれに、キャッシュを無効にする目的などで、リアクティブな依存関係が変化したときにすぐにウォッチャーを起動させる必要がある場合があります。これは `flush: 'sync'` を使って実現することができます。ただし、この設定は、複数のプロパティが同時に更新される場合、パフォーマンスやデータの一貫性に問題が生じる可能性があるため、注意して使用する必要があります。
+  デフォルトでは、ウォッチャーはコンポーネントレンダリングの直前に実行されます。`flush: 'post'` を設定すると、コンポーネントのレンダリングが終わるまでウォッチャーを遅延させることができます。詳しくは[コールバックが実行されるタイミング](/guide/essentials/watchers#callback-flush-timing)を参照してください。まれに、キャッシュを無効にする目的などで、リアクティブな依存関係が変化したときにすぐにウォッチャーを起動させる必要がある場合があります。これは `flush: 'sync'` を使って実現することができます。ただし、この設定は、複数のプロパティが同時に更新される場合、パフォーマンスやデータの一貫性に問題が生じる可能性があるため、注意して使用する必要があります。
 
   戻り値は、エフェクトの再実行を停止するために呼び出されるハンドル関数です。
 
@@ -309,8 +309,8 @@
   ```
 
 - **参照**:
-  - [ガイド - ウォッチャー](/guide/essentials/watchers.html#watcheffect)
-  - [ガイド - ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth.html#watcher-debugging)
+  - [ガイド - ウォッチャー](/guide/essentials/watchers#watcheffect)
+  - [ガイド - ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth#watcher-debugging)
 
 ## watchPostEffect() {#watchposteffect}
 
@@ -383,9 +383,9 @@
   省略可能な第 3 引数は、以下のオプションをサポートするオプションオブジェクトです:
 
   - **`immediate`**: ウォッチャーが作成されたら、すぐにコールバックを起動します。最初の呼び出しでは、古い値は `undefined` になります。
-  - **`deep`**: オブジェクトの場合、深い変更の際にコールバックが発生するように、ソースの深い探索を強制します。詳しくは[ディープ・ウォッチャー](/guide/essentials/watchers.html#deep-watchers)をご参照ください。
-  - **`flush`**: コールバックのフラッシュタイミングを調整します。詳しくは[コールバックが実行されるタイミング](/guide/essentials/watchers.html#callback-flush-timing)や [`watchEffect()`](/api/reactivity-core.html#watcheffect) をご参照ください。
-  - **`onTrack / onTrigger`**: ウォッチャーの依存関係をデバッグします。詳しくは[ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth.html#watcher-debugging)をご参照ください。
+  - **`deep`**: オブジェクトの場合、深い変更の際にコールバックが発生するように、ソースの深い探索を強制します。詳しくは[ディープ・ウォッチャー](/guide/essentials/watchers#deep-watchers)をご参照ください。
+  - **`flush`**: コールバックのフラッシュタイミングを調整します。詳しくは[コールバックが実行されるタイミング](/guide/essentials/watchers#callback-flush-timing)や [`watchEffect()`](/api/reactivity-core#watcheffect) をご参照ください。
+  - **`onTrack / onTrigger`**: ウォッチャーの依存関係をデバッグします。詳しくは[ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth#watcher-debugging)をご参照ください。
 
   [`watchEffect()`](#watcheffect) と比較すると、`watch()` は以下のことができます:
 
@@ -483,5 +483,5 @@
 
 - **参照**:
 
-  - [ガイド - ウォッチャー](/guide/essentials/watchers.html)
-  - [ガイド - ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth.html#watcher-debugging)
+  - [ガイド - ウォッチャー](/guide/essentials/watchers)
+  - [ガイド - ウォッチャーのデバッグ](/guide/extras/reactivity-in-depth#watcher-debugging)
diff --git a/src/api/reactivity-utilities.md b/src/api/reactivity-utilities.md
index 43bd6fd86..6637c798d 100644
--- a/src/api/reactivity-utilities.md
+++ b/src/api/reactivity-utilities.md
@@ -96,7 +96,7 @@
   </script>
   ```
 
-  コンポーネントプロパティに `toRefs` を使用する場合、プロパティの変更に関するいつも通りの制限が適用されます。ref に新しい値を代入しようとするのは、プロパティを直接変更しようとすることと同等であり、許可されていません。そのようなシナリオでは `get` と `set` を持つ [`computed`](./reactivity-core.html#computed) を使うことを検討するとよいでしょう。詳しくは、[コンポーネントで `v-model` を使う](/guide/components/v-model.html)ためのガイドを参照してください。
+  コンポーネントプロパティに `toRefs` を使用する場合、プロパティの変更に関するいつも通りの制限が適用されます。ref に新しい値を代入しようとするのは、プロパティを直接変更しようとすることと同等であり、許可されていません。そのようなシナリオでは `get` と `set` を持つ [`computed`](./reactivity-core#computed) を使うことを検討するとよいでしょう。詳しくは、[コンポーネントで `v-model` を使う](/guide/components/v-model)ためのガイドを参照してください。
 
   `toRef()` はソースプロパティが現在存在しない場合でも、利用可能な ref を返します。これにより [`toRefs`](#torefs) では取得できないオプショナルなプロパティを扱えるようになります。
 
@@ -163,7 +163,7 @@
 
 ## isProxy() {#isproxy}
 
-オブジェクトが [`reactive()`](./reactivity-core.html#reactive), [`readonly()`](./reactivity-core.html#readonly), [`shallowReactive()`](./reactivity-advanced.html#shallowreactive), [`shallowReadonly()`](./reactivity-advanced.html#shallowreadonly) によって作られたプロキシかどうかをチェックします。
+オブジェクトが [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](./reactivity-advanced#shallowreactive), [`shallowReadonly()`](./reactivity-advanced#shallowreadonly) によって作られたプロキシかどうかをチェックします。
 
 - **型**
 
@@ -173,7 +173,7 @@
 
 ## isReactive() {#isreactive}
 
-オブジェクトが [`reactive()`](./reactivity-core.html#reactive) または [`shallowReactive()`](./reactivity-advanced.html#shallowreactive) によって作られたプロキシかどうかをチェックします。
+オブジェクトが [`reactive()`](./reactivity-core#reactive) または [`shallowReactive()`](./reactivity-advanced#shallowreactive) によって作られたプロキシかどうかをチェックします。
 
 - **型**
 
@@ -185,7 +185,7 @@
 
 渡された値が読み取り専用オブジェクトであるかどうかをチェックします。読み取り専用オブジェクトのプロパティは変更可能ですが、渡されたオブジェクトを経由して直接代入することはできません。
 
-[`readonly()`](./reactivity-core.html#readonly) と [`shallowReadonly()`](./reactivity-advanced.html#shallowreadonly) で作成したプロキシは、`set` 関数なしの [`computed()`](./reactivity-core.html#computed) ref と同様に読み取り専用と見なされます。
+[`readonly()`](./reactivity-core#readonly) と [`shallowReadonly()`](./reactivity-advanced#shallowreadonly) で作成したプロキシは、`set` 関数なしの [`computed()`](./reactivity-core#computed) ref と同様に読み取り専用と見なされます。
 
 - **型**
 
diff --git a/src/api/render-function.md b/src/api/render-function.md
index 5b9c61816..a318ed6bb 100644
--- a/src/api/render-function.md
+++ b/src/api/render-function.md
@@ -93,7 +93,7 @@
   })
   ```
 
-- **参照:** [ガイド - レンダー関数 - vnode の作成](/guide/extras/render-function.html#creating-vnodes)
+- **参照:** [ガイド - レンダー関数 - vnode の作成](/guide/extras/render-function#creating-vnodes)
 
 ## mergeProps() {#mergeprops}
 
@@ -228,7 +228,7 @@ vnode のクローンを作成します。
 
   </div>
 
-- **参照:** [ガイド - レンダー関数 - コンポーネント](/guide/extras/render-function.html#components)
+- **参照:** [ガイド - レンダー関数 - コンポーネント](/guide/extras/render-function#components)
 
 ## resolveDirective() {#resolvedirective}
 
@@ -248,7 +248,7 @@ vnode のクローンを作成します。
 
   ディレクティブが見つからない場合、実行時警告が発生し、この関数は `undefined` を返します。
 
-- **参照:** [ガイド - レンダー関数 - カスタムディレクティブ](/guide/extras/render-function.html#custom-directives)
+- **参照:** [ガイド - レンダー関数 - カスタムディレクティブ](/guide/extras/render-function#custom-directives)
 
 ## withDirectives() {#withdirectives}
 
@@ -296,11 +296,11 @@ vnode にカスタムディレクティブを追加します。
   ])
   ```
 
-- **参照:** [ガイド - レンダー関数 - カスタムディレクティブ](/guide/extras/render-function.html#custom-directives)
+- **参照:** [ガイド - レンダー関数 - カスタムディレクティブ](/guide/extras/render-function#custom-directives)
 
 ## withModifiers() {#withmodifiers}
 
-イベントハンドラー関数に、ビルトインの [`v-on` 修飾子](/guide/essentials/event-handling.html#event-modifiers)を追加します。
+イベントハンドラー関数に、ビルトインの [`v-on` 修飾子](/guide/essentials/event-handling#event-modifiers)を追加します。
 
 - **型**
 
@@ -321,4 +321,4 @@ vnode にカスタムディレクティブを追加します。
   })
   ```
 
-- **参照:** [ガイド - レンダー関数 - イベント修飾子](/guide/extras/render-function.html#event-modifiers)
+- **参照:** [ガイド - レンダー関数 - イベント修飾子](/guide/extras/render-function#event-modifiers)
diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index 9f77a344c..951f9e9e6 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -53,7 +53,7 @@ import { capitalize } from './helpers'
 
 ## リアクティビティー {#reactivity}
 
-リアクティブな状態は [リアクティビティー API](./reactivity-core.html) を使って明示的に作成する必要があります。`setup()` 関数から返された値と同じように、テンプレート内で参照されるときに ref は自動的にアンラップされます:
+リアクティブな状態は [リアクティビティー API](./reactivity-core) を使って明示的に作成する必要があります。`setup()` 関数から返された値と同じように、テンプレート内で参照されるときに ref は自動的にアンラップされます:
 
 ```vue
 <script setup>
@@ -244,7 +244,7 @@ export default {
 - `props` や `emits` のような `<script setup>` で定義できるオプションは、`<script>` セクションで定義**しない**でください。
 - `<script setup>` 内で作成された変数は、コンポーネントインスタンスのプロパティとして追加されないので、Options API からはアクセスできません。このように API を混在させることは、強くお勧めしません。
 
-もし、サポートされていないシナリオに遭遇した場合は、`<script setup>` の代わりに、明示的な [`setup()`](/api/composition-api-setup.html) 関数に切り替えることを検討する必要があります。
+もし、サポートされていないシナリオに遭遇した場合は、`<script setup>` の代わりに、明示的な [`setup()`](/api/composition-api-setup) 関数に切り替えることを検討する必要があります。
 
 ## トップレベルの `await` {#top-level-await}
 
diff --git a/src/api/sfc-spec.md b/src/api/sfc-spec.md
index 014a46ecb..2ae01a76b 100644
--- a/src/api/sfc-spec.md
+++ b/src/api/sfc-spec.md
@@ -42,11 +42,11 @@ export default {
 
 ### `<script>` {#script}
 
-- 各 `*.vue` ファイルには、一度に最大 1 つの `<script>` ブロックを含めることができます（[`<script setup>`](/api/sfc-script-setup.html) は除く）。
+- 各 `*.vue` ファイルには、一度に最大 1 つの `<script>` ブロックを含めることができます（[`<script setup>`](/api/sfc-script-setup) は除く）。
 
 - スクリプトは、ES モジュールとして実行されます。
 
-- **default export** は、プレーンオブジェクトか [defineComponent](/api/general.html#definecomponent) の戻り値のどちらかで、Vue のコンポーネントオプションオブジェクトになっている必要があります。
+- **default export** は、プレーンオブジェクトか [defineComponent](/api/general#definecomponent) の戻り値のどちらかで、Vue のコンポーネントオプションオブジェクトになっている必要があります。
 
 ### `<script setup>` {#script-setup}
 
@@ -68,7 +68,7 @@ export default {
 - [vite-plugin-vue-gql: `<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)
 - [vue-i18n: `<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#i18n-custom-block)
 
-カスタムブロックの扱いはツールに依存します - 独自のカスタムブロック統合を構築したい場合は、[関連するツールのセクション](/guide/scaling-up/tooling.html#sfc-custom-block-integrations)で詳細を確認してください。
+カスタムブロックの扱いはツールに依存します - 独自のカスタムブロック統合を構築したい場合は、[関連するツールのセクション](/guide/scaling-up/tooling#sfc-custom-block-integrations)で詳細を確認してください。
 
 ## 自動名前推論 {#automatic-name-inference}
 
diff --git a/src/api/ssr.md b/src/api/ssr.md
index 36bd20289..18a238195 100644
--- a/src/api/ssr.md
+++ b/src/api/ssr.md
@@ -32,7 +32,7 @@
 
   ### SSR Context {#ssr-context}
 
-  You can pass an optional context object, which can be used to record additional data during the render, for example [accessing content of Teleports](/guide/scaling-up/ssr.html#teleports):
+  You can pass an optional context object, which can be used to record additional data during the render, for example [accessing content of Teleports](/guide/scaling-up/ssr#teleports):
 
   ```js
   const ctx = {}
@@ -43,7 +43,7 @@
 
   Most other SSR APIs on this page also optionally accept a context object. The context object can be accessed in component code via the [useSSRContext](#usessrcontext) helper.
 
-- **See also:** [Guide - Server-Side Rendering](/guide/scaling-up/ssr.html)
+- **See also:** [Guide - Server-Side Rendering](/guide/scaling-up/ssr)
 
 ## renderToNodeStream() {#rendertonodestream}
 
diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index c21380f03..0781c231f 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -30,7 +30,7 @@
   }
   ```
 
-- **参照:** [ガイド - コンポーネントプロパティの型付け](/guide/typescript/options-api.html#typing-component-props)
+- **参照:** [ガイド - コンポーネントプロパティの型付け](/guide/typescript/options-api#typing-component-props)
 
 ## ComponentCustomProperties {#componentcustomproperties}
 
@@ -50,10 +50,10 @@
   ```
 
   :::tip
-  拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties)を参照してください。
+  拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties)を参照してください。
   :::
 
-- **参照:** [ガイド - グローバルプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties)
+- **参照:** [ガイド - グローバルプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties)
 
 ## ComponentCustomOptions {#componentcustomoptions}
 
@@ -72,10 +72,10 @@
   ```
 
   :::tip
-  拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties)を参照してください。
+  拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties)を参照してください。
   :::
 
-- **参照:** [ガイド - カスタムオプションの拡張](/guide/typescript/options-api.html#augmenting-custom-options)
+- **参照:** [ガイド - カスタムオプションの拡張](/guide/typescript/options-api#augmenting-custom-options)
 
 ## ComponentCustomProps {#componentcustomprops}
 
@@ -99,7 +99,7 @@ TSX 要素のプロパティとして宣言されていないプロパティを
   ```
 
   :::tip
-  拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties)を参照してください。
+  拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties)を参照してください。
   :::
 
 ## CSSProperties {#cssproperties}
@@ -126,11 +126,11 @@ TSX 要素のプロパティとして宣言されていないプロパティを
   ```
 
 :::tip
-拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties)を参照してください。
+拡張するには、モジュールを `.ts` または `.d.ts` ファイルとして配置する必要があります。詳細は[グローバルプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties)を参照してください。
 :::
 
 :::info 参照
 SFC `<style>` タグは、`v-bind` CSS 関数を使って、CSS の値を動的コンポーネントの状態にリンクすることをサポートしています。これにより、型を拡張することなく、カスタムプロパティを使用することができます。
 
-- [CSS の v-bind()](/api/sfc-css-features.html#v-bind-in-css)
+- [CSS の v-bind()](/api/sfc-css-features#v-bind-in-css)
   :::
diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md
index 78a484ded..e4ddcd9a7 100644
--- a/src/guide/best-practices/performance.md
+++ b/src/guide/best-practices/performance.md
@@ -16,7 +16,7 @@ Vue は、手動で最適化する必要なく、ほとんどの一般的なユ
 
 この 2 つを最大化させることが理想ですが、フロントエンドのアーキテクチャが異なると、これらの面で望ましい性能を達成するのが容易かどうかに影響する傾向があります。また、構築するアプリケーションの種類によって、性能面で何を優先すべきかに大きく影響します。したがって、最適なパフォーマンスを確保するための最初のステップは、構築するアプリケーションの種類に適したアーキテクチャを選択することです:
 
-- Vue を様々な形でどのように活用するかは、[Vue を使う方法](/guide/extras/ways-of-using-vue.html)を参照してください。
+- Vue を様々な形でどのように活用するかは、[Vue を使う方法](/guide/extras/ways-of-using-vue)を参照してください。
 
 - Jason Miller 氏は、[Application Holotypes](https://jasonformat.com/application-holotypes/) で、Web アプリケーションの種類と、それぞれの理想的な実装/配信について論じています。
 
@@ -32,8 +32,8 @@ Vue は、手動で最適化する必要なく、ほとんどの一般的なユ
 ローカル開発環境でのパフォーマンスプロファイリング:
 
 - [Chrome DevTools Performance パネル](https://developer.chrome.com/docs/devtools/evaluate-performance/)
-  - [`app.config.performance`](/api/application.html#app-config-performance) は、Chrome DevTools のパフォーマンスタイムラインで、Vue 固有のパフォーマンスマーカーを有効にします。
-- [Vue DevTools 拡張](/guide/scaling-up/tooling.html#browser-devtools)もまた、パフォーマンスプロファイリング機能を提供します。
+  - [`app.config.performance`](/api/application#app-config-performance) は、Chrome DevTools のパフォーマンスタイムラインで、Vue 固有のパフォーマンスマーカーを有効にします。
+- [Vue DevTools 拡張](/guide/scaling-up/tooling#browser-devtools)もまた、パフォーマンスプロファイリング機能を提供します。
 
 ## ページロード最適化 {#page-load-optimizations}
 
@@ -41,7 +41,7 @@ Vue は、手動で最適化する必要なく、ほとんどの一般的なユ
 
 ### 適切なアーキテクチャの選択 {#choosing-the-right-architecture}
 
-ページロードのパフォーマンスに敏感なユースケースの場合、純粋なクライアントサイド SPA として配信することは避けてください。ユーザーが見たいコンテンツを含む HTML をサーバーから直接送信する必要があります。純粋なクライアントサイドのレンダリングは、Time-to-Content の遅さに悩まされます。これは、[サーバーサイドレンダリング (SSR)](/guide/extras/ways-of-using-vue.html#fullstack-ssr) または [静的サイト生成 (SSG)](/guide/extras/ways-of-using-vue.html#jamstack-ssg) で緩和できます。Vue による SSR の実行については、[SSR ガイド](/guide/scaling-up/ssr.html) を確認してください。アプリにリッチなインタラクティブ性が要求されない場合は、従来のバックエンドサーバーで HTML をレンダリングし、クライアント側で Vue を使って拡張することもできます。
+ページロードのパフォーマンスに敏感なユースケースの場合、純粋なクライアントサイド SPA として配信することは避けてください。ユーザーが見たいコンテンツを含む HTML をサーバーから直接送信する必要があります。純粋なクライアントサイドのレンダリングは、Time-to-Content の遅さに悩まされます。これは、[サーバーサイドレンダリング (SSR)](/guide/extras/ways-of-using-vue#fullstack-ssr) または [静的サイト生成 (SSG)](/guide/extras/ways-of-using-vue#jamstack-ssg) で緩和できます。Vue による SSR の実行については、[SSR ガイド](/guide/scaling-up/ssr) を確認してください。アプリにリッチなインタラクティブ性が要求されない場合は、従来のバックエンドサーバーで HTML をレンダリングし、クライアント側で Vue を使って拡張することもできます。
 
 もし、メインのアプリケーションが SPA である必要があり、マーケティングページ(ランディング、アバウト、ブログ) がある場合、それらを別々に配信してください。マーケティングページは、SSG を使用して最小限の JS を含む静的 HTML としてデプロイされるのが理想的です。
 
@@ -77,7 +77,7 @@ function loadLazy() {
 }
 ```
 
-遅延ローディングは、最初のページロード後すぐに必要とされない機能で最もよく使用されます。Vue アプリケーションでは、これは Vue の[非同期コンポーネント](/guide/components/async.html)機能と組み合わせて、コンポーネントツリーの分割チャンクを作成するために使用できます:
+遅延ローディングは、最初のページロード後すぐに必要とされない機能で最もよく使用されます。Vue アプリケーションでは、これは Vue の[非同期コンポーネント](/guide/components/async)機能と組み合わせて、コンポーネントツリーの分割チャンクを作成するために使用できます:
 
 ```js
 import { defineAsyncComponent } from 'vue'
@@ -118,11 +118,11 @@ Vue では、子コンポーネントは、受け取ったプロパティのう
 
 ### `v-once` {#v-once}
 
-`v-once` は組み込みのディレクティブで、ランタイムデータに依存しながらも更新の必要がないコンテンツをレンダリングするために使用することができます。このディレクティブが使用されたサブツリー全体は、その後のすべての更新をスキップします。詳細は [API リファレンス](/api/built-in-directives.html#v-once)を参照してください。
+`v-once` は組み込みのディレクティブで、ランタイムデータに依存しながらも更新の必要がないコンテンツをレンダリングするために使用することができます。このディレクティブが使用されたサブツリー全体は、その後のすべての更新をスキップします。詳細は [API リファレンス](/api/built-in-directives#v-once)を参照してください。
 
 ### `v-memo` {#v-memo}
 
-`v-memo` は組み込みのディレクティブで、大きなサブツリーや `v-for` リストの更新を条件付きでスキップするために使用することができます。詳細は [API リファレンス](/api/built-in-directives.html#v-memo)を参照してください。
+`v-memo` は組み込みのディレクティブで、大きなサブツリーや `v-for` リストの更新を条件付きでスキップするために使用することができます。詳細は [API リファレンス](/api/built-in-directives#v-memo)を参照してください。
 
 ## 全般的な最適化 {#general-optimizations}
 
@@ -144,7 +144,7 @@ Vue では、子コンポーネントは、受け取ったプロパティのう
 
 Vue のリアクティビティーシステムは、デフォルトでディープです。これにより状態管理が直感的になりますが、データサイズが大きくなると、プロパティアクセスのたびに依存関係の追跡を行うプロキシトラップがトリガーされるため、一定レベルのオーバーヘッドが発生します。これは通常、深くネストされたオブジェクトの大きな配列を扱うとき、1 回のレンダリングで 10 万以上のプロパティにアクセスする必要があるために顕著になります。これは非常に特定のユースケースにのみ影響するはずです。
 
-Vue は [`shallowRef()`](/api/reactivity-advanced.html#shallowref) と [`shallowReactive()`](/api/reactivity-advanced.html#shallowreactive) によってディープなリアクティビティーを回避する方法を提供します。Shallow API は、ルートレベルでのみリアクティブな状態を作り、すべてのネストされたオブジェクトをそのまま公開します。これは、ネストされたプロパティへのアクセスを高速に保ちますが、トレードオフとして、すべてのネストされたオブジェクトをイミュータブルとして扱わなければならず、更新はルートの状態を置き換えることによってのみトリガーされるようになります:
+Vue は [`shallowRef()`](/api/reactivity-advanced#shallowref) と [`shallowReactive()`](/api/reactivity-advanced#shallowreactive) によってディープなリアクティビティーを回避する方法を提供します。Shallow API は、ルートレベルでのみリアクティブな状態を作り、すべてのネストされたオブジェクトをそのまま公開します。これは、ネストされたプロパティへのアクセスを高速に保ちますが、トレードオフとして、すべてのネストされたオブジェクトをイミュータブルとして扱わなければならず、更新はルートの状態を置き換えることによってのみトリガーされるようになります:
 
 ```js
 const shallowArray = shallowRef([
@@ -170,6 +170,6 @@ shallowArray.value = [
 
 ### 不必要なコンポーネントの抽象化を避ける {#avoid-unnecessary-component-abstractions}
 
-時には、より良い抽象化やコード構成のために、[レンダーレスコンポーネント](/guide/components/slots.html#renderless-components)や高階コンポーネント（つまり、特別なプロパティで他のコンポーネントをレンダリングするコンポーネント）を作ることもあります。これは悪いことではありませんが、コンポーネントインスタンスはプレーンな DOM ノードよりもはるかに高価であり、抽象化パターンによりそれらを大量に生成すると、パフォーマンスコストが発生することを覚えておいてください。
+時には、より良い抽象化やコード構成のために、[レンダーレスコンポーネント](/guide/components/slots#renderless-components)や高階コンポーネント（つまり、特別なプロパティで他のコンポーネントをレンダリングするコンポーネント）を作ることもあります。これは悪いことではありませんが、コンポーネントインスタンスはプレーンな DOM ノードよりもはるかに高価であり、抽象化パターンによりそれらを大量に生成すると、パフォーマンスコストが発生することを覚えておいてください。
 
 数個のインスタンスを減らすだけでは顕著な効果はないため、アプリ内で数回しかレンダリングされないコンポーネントなら頑張る必要はないことに注意してください。この最適化を検討するのにふさわしい場面は、やはり大きなリストです。100 のアイテムからなり、各アイテムのコンポーネントが多数の子コンポーネントを含んでいるリストを想像してみてください。ここで不要なコンポーネントの抽象化をひとつ削除すると、何百ものコンポーネントインスタンスを削減することができます。
diff --git a/src/guide/best-practices/production-deployment.md b/src/guide/best-practices/production-deployment.md
index c39f4f884..31087c79d 100644
--- a/src/guide/best-practices/production-deployment.md
+++ b/src/guide/best-practices/production-deployment.md
@@ -6,7 +6,7 @@
 
 - よくあるエラーや落とし穴に対する警告
 - プロパティやイベントに対するバリデーション
-- [リアクティビティーのデバックのためのフック](/guide/extras/reactivity-in-depth.html#reactivity-debugging)
+- [リアクティビティーのデバックのためのフック](/guide/extras/reactivity-in-depth#reactivity-debugging)
 - 開発者ツールとの連携
 
 しかし、これらの機能は本番では役に立ちません。警告の検査の中には、わずかなパフォーマンスのオーバーヘッドを発生させるものもあります。本番へのデプロイ時には、ペイロードサイズを小さくしてパフォーマンスを向上させるために、使用されていない開発専用のコードブランチをすべて削除する必要があります。
@@ -38,7 +38,7 @@ CDN やセルフホストのスクリプトからロードして、ビルドツ
 
 ## ランタイムエラーの追跡 {#tracking-runtime-errors}
 
-[アプリケーションレベルのエラーハンドラー](/api/application.html#app-config-errorhandler) は、トラッキングサービスへエラーを報告するために使用できます:
+[アプリケーションレベルのエラーハンドラー](/api/application#app-config-errorhandler) は、トラッキングサービスへエラーを報告するために使用できます:
 
 ```js
 import { createApp } from 'vue'
diff --git a/src/guide/best-practices/security.md b/src/guide/best-practices/security.md
index 37b4b17f4..9b77ec70f 100644
--- a/src/guide/best-practices/security.md
+++ b/src/guide/best-practices/security.md
@@ -133,7 +133,7 @@ URL が `javascript:` を使って JavaScript を実行できないように "sa
 <style>{{ userProvidedStyles }}</style>
 ```
 
-クリックジャックからユーザーを完全に保護するために、サンドボックス化された iframe 内でのみ CSS の完全な制御を許可することをお勧めします。また、ユーザーにスタイルバインディングのコントロールを提供する場合は、[オブジェクト構文](/guide/essentials/class-and-style.html#binding-to-objects-1)を使用し、以下のように安全に制御できる特定のプロパティにのみ値を提供できるようにすることをお勧めします:
+クリックジャックからユーザーを完全に保護するために、サンドボックス化された iframe 内でのみ CSS の完全な制御を許可することをお勧めします。また、ユーザーにスタイルバインディングのコントロールを提供する場合は、[オブジェクト構文](/guide/essentials/class-and-style#binding-to-objects-1)を使用し、以下のように安全に制御できる特定のプロパティにのみ値を提供できるようにすることをお勧めします:
 
 ```vue-html
 <a
@@ -180,4 +180,4 @@ Vue のテンプレートでクロスサイトスクリプティング (XSS) が
 
 ## サーバーサイドレンダリング (SSR) {#server-side-rendering-ssr}
 
-SSR を使用する場合、セキュリティー上の懸念があるため、[SSR ドキュメント](/guide/scaling-up/ssr.html)で説明されているベストプラクティスに従って、脆弱性を回避するようにしてください。
+SSR を使用する場合、セキュリティー上の懸念があるため、[SSR ドキュメント](/guide/scaling-up/ssr)で説明されているベストプラクティスに従って、脆弱性を回避するようにしてください。
diff --git a/src/guide/built-ins/keep-alive.md b/src/guide/built-ins/keep-alive.md
index 9bafc33d3..396ed78f3 100644
--- a/src/guide/built-ins/keep-alive.md
+++ b/src/guide/built-ins/keep-alive.md
@@ -8,7 +8,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 
 ## 基本的な使い方 {#basic-usage}
 
-「コンポーネントの基礎」の章で、特別な要素 `<component>` を使用する、[動的コンポーネント](/guide/essentials/component-basics.html#dynamic-components)のための構文を導入しました:
+「コンポーネントの基礎」の章で、特別な要素 `<component>` を使用する、[動的コンポーネント](/guide/essentials/component-basics#dynamic-components)のための構文を導入しました:
 
 ```vue-html
 <component :is="activeComponent" />
@@ -47,7 +47,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 </div>
 
 :::tip
-[DOM テンプレート](/guide/essentials/component-basics.html#dom-template-parsing-caveats)内で使用する場合は `<keep-alive>` として参照する必要があります。
+[DOM テンプレート](/guide/essentials/component-basics#dom-template-parsing-caveats)内で使用する場合は `<keep-alive>` として参照する必要があります。
 :::
 
 ## Include / Exclude {#include-exclude}
@@ -71,7 +71,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 </KeepAlive>
 ```
 
-一致するかどうかは、コンポーネントの [`name`](/api/options-misc.html#name) オプションに対してチェックされます。よって、`KeepAlive` により条件付きでキャッシュされるコンポーネントには、明示的に `name` オプションを宣言する必要があります。
+一致するかどうかは、コンポーネントの [`name`](/api/options-misc#name) オプションに対してチェックされます。よって、`KeepAlive` により条件付きでキャッシュされるコンポーネントには、明示的に `name` オプションを宣言する必要があります。
 
 :::tip
 バージョン 3.2.34 以降、`<script setup>` を使った単一ファイルコンポーネントは、ファイル名から `name` オプションを自動的に推測し、手動で名前を宣言する必要がなくなりました。
@@ -93,7 +93,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 
 <div class="composition-api">
 
-kept-alive コンポーネントは、これら 2 つの状態に対して、[`onActivated()`](/api/composition-api-lifecycle.html#onactivated) と [`onDeactivated()`](/api/composition-api-lifecycle.html#ondeactivated) を使用してライフサイクルフックを登録できます:
+kept-alive コンポーネントは、これら 2 つの状態に対して、[`onActivated()`](/api/composition-api-lifecycle#onactivated) と [`onDeactivated()`](/api/composition-api-lifecycle#ondeactivated) を使用してライフサイクルフックを登録できます:
 
 ```vue
 <script setup>
@@ -114,7 +114,7 @@ onDeactivated(() => {
 </div>
 <div class="options-api">
 
-kept-alive コンポーネントは、これら 2 つの状態に対して、[`activated`](/api/options-lifecycle.html#activated) と [`deactivated`](/api/options-lifecycle.html#deactivated) のフックを使用してライフサイクルフックを登録できます:
+kept-alive コンポーネントは、これら 2 つの状態に対して、[`activated`](/api/options-lifecycle#activated) と [`deactivated`](/api/options-lifecycle#deactivated) のフックを使用してライフサイクルフックを登録できます:
 
 ```js
 export default {
@@ -141,4 +141,4 @@ export default {
 
 **関連ページ**
 
-- [`<KeepAlive>` API リファレンス](/api/built-in-components.html#keepalive)
+- [`<KeepAlive>` API リファレンス](/api/built-in-components#keepalive)
diff --git a/src/guide/built-ins/suspense.md b/src/guide/built-ins/suspense.md
index c6b230174..3ed40bc50 100644
--- a/src/guide/built-ins/suspense.md
+++ b/src/guide/built-ins/suspense.md
@@ -32,7 +32,7 @@ outline: deep
 
 1. 非同期 `setup()` フックを持つコンポーネント。これには、トップレベルの `await` がある `<script setup>` を使用したコンポーネントも含まれます。
 
-2. [非同期コンポーネント](/guide/components/async.html).
+2. [非同期コンポーネント](/guide/components/async).
 
 ### `async setup()` {#async-setup}
 
@@ -101,7 +101,7 @@ pending 状態に戻った場合、フォールバックのコンテンツはす
 
 ## エラーハンドリング {#error-handling}
 
-`<Suspense>` は現在のところ、それ自身ではエラーハンドリングは提供していません。ただし、`<Suspense>` の親コンポーネントで [`errorCaptured`](/api/options-lifecycle.html#errorcaptured) オプションや [`onErrorCaptured()`](/api/composition-api-lifecycle.html#onerrorcaptured) フックを使って非同期なエラーを補足して処理することができます。
+`<Suspense>` は現在のところ、それ自身ではエラーハンドリングは提供していません。ただし、`<Suspense>` の親コンポーネントで [`errorCaptured`](/api/options-lifecycle#errorcaptured) オプションや [`onErrorCaptured()`](/api/composition-api-lifecycle#onerrorcaptured) フックを使って非同期なエラーを補足して処理することができます。
 
 ## 他のコンポーネントとの組み合わせ {#combining-with-other-components}
 
diff --git a/src/guide/built-ins/teleport.md b/src/guide/built-ins/teleport.md
index f2294d590..e34ec3194 100644
--- a/src/guide/built-ins/teleport.md
+++ b/src/guide/built-ins/teleport.md
@@ -199,5 +199,5 @@ const open = ref(false)
 
 **関連**
 
-- [`<Teleport>` API リファレンス](/api/built-in-components.html#teleport)
-- [SSR における Teleport の扱いについて](/guide/scaling-up/ssr.html#teleports)
+- [`<Teleport>` API リファレンス](/api/built-in-components#teleport)
+- [SSR における Teleport の扱いについて](/guide/scaling-up/ssr#teleports)
diff --git a/src/guide/built-ins/transition-group.md b/src/guide/built-ins/transition-group.md
index 60ecbdfba..805a4ecda 100644
--- a/src/guide/built-ins/transition-group.md
+++ b/src/guide/built-ins/transition-group.md
@@ -14,14 +14,14 @@ import ListStagger from './transition-demos/ListStagger.vue'
 
 - デフォルトでは、ラッパーの要素はレンダリングされません。しかし、`tag` プロパティでレンダリングする要素を指定することができます。
 
-- [トランジションモード](./transition.html#transition-modes)は、排他的な要素同士を交互にトランジションすることがなくなったので、利用できません。
+- [トランジションモード](./transition#transition-modes)は、排他的な要素同士を交互にトランジションすることがなくなったので、利用できません。
 
 - 内部の要素は **常に** ユニークな `key` プロパティを設定する必要があります。
 
 - CSS トランジションクラスはグループ / コンテナ **ではなく**、リストの個々の要素に適用されます。
 
 :::tip
-[DOM テンプレート](/guide/essentials/component-basics.html#dom-template-parsing-caveats) で使用する場合、`<transition-group>` として参照する必要があります。
+[DOM テンプレート](/guide/essentials/component-basics#dom-template-parsing-caveats) で使用する場合、`<transition-group>` として参照する必要があります。
 :::
 
 ## Enter / Leave トランジション {#enter-leave-transitions}
@@ -132,4 +132,4 @@ function onEnter(el, done) {
 
 **関連**
 
-- [`<TransitionGroup>` API リファレンス](/api/built-in-components.html#transitiongroup)
+- [`<TransitionGroup>` API リファレンス](/api/built-in-components#transitiongroup)
diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md
index e92d0a7bc..ad3cae497 100644
--- a/src/guide/built-ins/transition.md
+++ b/src/guide/built-ins/transition.md
@@ -14,9 +14,9 @@ Vue には、状態の変化に応じてトランジションやアニメーシ
 
 - `<Transition>` は、要素やコンポーネントが DOM に enter (挿入) 、leave (削除) される時にアニメーションを適用するために提供されます。これについては、このページ内で説明しています。
 
-- `<TransitionGroup>` は、要素やコンポーネントが `v-for` で作成されたリスト内に inserted into (追加)、removed from (削除)、moved within (移動) される時にアニメーションを適用するために提供されます。こちらについては、[次の章](/guide/built-ins/transition-group.html) で説明します。
+- `<TransitionGroup>` は、要素やコンポーネントが `v-for` で作成されたリスト内に inserted into (追加)、removed from (削除)、moved within (移動) される時にアニメーションを適用するために提供されます。こちらについては、[次の章](/guide/built-ins/transition-group) で説明します。
 
-この 2 つのコンポーネント以外にも、CSS クラスをトグルしたりスタイルバインディングによるステートドリブンアニメーションなど、Vue では他のテクニックを使ってアニメーションを適用することもできます。これらのテクニックは、[アニメーションテクニック](/guide/extras/animation.html) の章で説明されています。
+この 2 つのコンポーネント以外にも、CSS クラスをトグルしたりスタイルバインディングによるステートドリブンアニメーションなど、Vue では他のテクニックを使ってアニメーションを適用することもできます。これらのテクニックは、[アニメーションテクニック](/guide/extras/animation) の章で説明されています。
 
 ## `<Transition>` コンポーネント {#the-transition-component}
 
@@ -543,7 +543,7 @@ JavaScript のみでトランジションを利用する場合、通常は `:css
 
 ## コンポーネント間のトランジション {#transition-between-components}
 
-`<Transition>` は [動的コンポーネント](/guide/essentials/component-basics.html#dynamic-components) でも使用することができます:
+`<Transition>` は [動的コンポーネント](/guide/essentials/component-basics#dynamic-components) でも使用することができます:
 
 ```vue-html
 <Transition name="fade" mode="out-in">
@@ -582,4 +582,4 @@ JavaScript のみでトランジションを利用する場合、通常は `:css
 
 **関連**
 
-- [`<Transition>` API リファレンス](/api/built-in-components.html#transition)
+- [`<Transition>` API リファレンス](/api/built-in-components#transition)
diff --git a/src/guide/components/async.md b/src/guide/components/async.md
index 3a2e7fce5..5cdfca15d 100644
--- a/src/guide/components/async.md
+++ b/src/guide/components/async.md
@@ -2,7 +2,7 @@
 
 ## 基本的な使い方 {#basic-usage}
 
-大規模なアプリケーションでは、アプリを小さなチャンクに分割し、必要なときにのみサーバーからコンポーネントを読み込む必要があるかもしれません。これを実現するために、Vue には [`defineAsyncComponent`](/api/general.html#defineasynccomponent) 関数があります:
+大規模なアプリケーションでは、アプリを小さなチャンクに分割し、必要なときにのみサーバーからコンポーネントを読み込む必要があるかもしれません。これを実現するために、Vue には [`defineAsyncComponent`](/api/general#defineasynccomponent) 関数があります:
 
 ```js
 import { defineAsyncComponent } from 'vue'
@@ -30,7 +30,7 @@ const AsyncComp = defineAsyncComponent(() =>
 
 結果的に得られる `AsyncComp` は、実際にページ上にレンダリングされるときにローダー関数を呼ぶだけのラッパーコンポーネントです。さらに、内側のコンポーネントに任意のプロパティやスロットを渡せるため、非同期ラッパーを使用すると、コンポーネントをシームレスに置換するとともに、遅延読み込みも実現できます。
 
-通常のコンポーネントと同様に、非同期コンポーネントも `app.component()` を用いて[グローバルに登録](/guide/components/registration.html#global-registration)できます:
+通常のコンポーネントと同様に、非同期コンポーネントも `app.component()` を用いて[グローバルに登録](/guide/components/registration#global-registration)できます:
 
 ```js
 app.component('MyComponent', defineAsyncComponent(() =>
@@ -40,7 +40,7 @@ app.component('MyComponent', defineAsyncComponent(() =>
 
 <div class="options-api">
 
-[コンポーネントをローカルに登録する](/guide/components/registration.html#local-registration)ときには、`defineAsyncComponent` も利用できます:
+[コンポーネントをローカルに登録する](/guide/components/registration#local-registration)ときには、`defineAsyncComponent` も利用できます:
 
 ```vue
 <script>
@@ -110,4 +110,4 @@ const AsyncComp = defineAsyncComponent({
 
 ## Suspense とともに使用する {#using-with-suspense}
 
-非同期コンポーネントは、ビルトインコンポーネント `<Suspense>` とともに使用することもできます。`<Suspense>` と非同期コンポーネント間のインタラクションについては、[`<Suspense>` のページ](/guide/built-ins/suspense.html) にドキュメントがあります。
+非同期コンポーネントは、ビルトインコンポーネント `<Suspense>` とともに使用することもできます。`<Suspense>` と非同期コンポーネント間のインタラクションについては、[`<Suspense>` のページ](/guide/built-ins/suspense) にドキュメントがあります。
diff --git a/src/guide/components/attrs.md b/src/guide/components/attrs.md
index 1527240a8..ed2c167b2 100644
--- a/src/guide/components/attrs.md
+++ b/src/guide/components/attrs.md
@@ -8,7 +8,7 @@ outline: deep
 
 ## 属性の継承 {#attribute-inheritance}
 
-"フォールスルー属性"とは、あるコンポーネントに渡されたものの、受け取ったコンポーネントの [props](./props) や [emits](./events.html#declaring-emitted-events) で明確に宣言されていない属性、または `v-on` イベントリスナーを指します。よくある例としては、`class`、`style`、`id` 属性などがあります。
+"フォールスルー属性"とは、あるコンポーネントに渡されたものの、受け取ったコンポーネントの [props](./props) や [emits](./events#declaring-emitted-events) で明確に宣言されていない属性、または `v-on` イベントリスナーを指します。よくある例としては、`class`、`style`、`id` 属性などがあります。
 
 コンポーネントが単一のルート要素をレンダリングする時、フォールスルー属性は自動的にルート要素の属性に追加されます。例えば、次のようなテンプレートを持つ `<MyButton>` コンポーネントがあったとします:
 
@@ -128,7 +128,7 @@ export default {
 </div>
 ```
 
-[引数なしの `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes) はオブジェクトのすべてのプロパティをターゲット要素の属性としてバインドすることを覚えておきましょう。
+[引数なしの `v-bind`](/guide/essentials/template-syntax#dynamically-binding-multiple-attributes) はオブジェクトのすべてのプロパティをターゲット要素の属性としてバインドすることを覚えておきましょう。
 
 ## 複数のルートノードでの属性継承 {#attribute-inheritance-on-multiple-root-nodes}
 
diff --git a/src/guide/components/events.md b/src/guide/components/events.md
index 1223b31ab..8b7668c95 100644
--- a/src/guide/components/events.md
+++ b/src/guide/components/events.md
@@ -62,10 +62,10 @@ export default {
 <MyComponent @some-event.once="callback" />
 ```
 
-コンポーネントやプロパティと同様に、イベント名も自動的な大文字・小文字の変換を提供します。キャメルケースのイベントを発行しましたが、親ではケバブケースのリスナーを使用して購読できることに注意してください。[プロパティ名での大文字・小文字の使い分け](/guide/components/props.html#prop-name-casing)と同様に、テンプレートではケバブケースのイベントリスナーを使用することをお勧めします。
+コンポーネントやプロパティと同様に、イベント名も自動的な大文字・小文字の変換を提供します。キャメルケースのイベントを発行しましたが、親ではケバブケースのリスナーを使用して購読できることに注意してください。[プロパティ名での大文字・小文字の使い分け](/guide/components/props#prop-name-casing)と同様に、テンプレートではケバブケースのイベントリスナーを使用することをお勧めします。
 
 :::tip
-ネイティブの DOM イベントとは異なり、コンポーネントから発行されたイベントはバブリング**しません**。直接の子コンポーネントから発行されたイベントのみを購読できます。兄弟コンポーネントや深くネストしたコンポーネント間で通信する必要がある場合は、外部のイベントバスや[グローバルな状態管理ソリューション](/guide/scaling-up/state-management.html)を使ってください。
+ネイティブの DOM イベントとは異なり、コンポーネントから発行されたイベントはバブリング**しません**。直接の子コンポーネントから発行されたイベントのみを購読できます。兄弟コンポーネントや深くネストしたコンポーネント間で通信する必要がある場合は、外部のイベントバスや[グローバルな状態管理ソリューション](/guide/scaling-up/state-management)を使ってください。
 :::
 
 ## イベントの引数 {#event-arguments}
@@ -119,7 +119,7 @@ function increaseCount(n) {
 
 ## 発行するイベントの宣言 {#declaring-emitted-events}
 
-<span class="composition-api">[`defineEmits()`](/api/sfc-script-setup.html#defineprops-defineemits) マクロ</span><span class="options-api">[`emits`](/api/options-state.html#emits) オプション</span>を使用して、コンポーネントが発行するイベントを明示的に宣言できます:
+<span class="composition-api">[`defineEmits()`](/api/sfc-script-setup#defineprops-defineemits) マクロ</span><span class="options-api">[`emits`](/api/options-state#emits) オプション</span>を使用して、コンポーネントが発行するイベントを明示的に宣言できます:
 
 <div class="composition-api">
 
@@ -143,7 +143,7 @@ function buttonClick() {
 
 `defineEmits()` マクロは関数の中では使用**できません**。上記の例のように、`<script setup>` 内に直接記述する必要があります。
 
-`<script setup>` の代わりに明示的な `setup` 関数を使う場合は、イベントは [`emits`](/api/options-state.html#emits) オプションを使って宣言する必要があり、`emit` 関数は `setup()` コンテキスト上で公開されます:
+`<script setup>` の代わりに明示的な `setup` 関数を使う場合は、イベントは [`emits`](/api/options-state#emits) オプションを使って宣言する必要があり、`emit` 関数は `setup()` コンテキスト上で公開されます:
 
 ```js
 export default {
@@ -202,7 +202,7 @@ const emit = defineEmits<{
 </script>
 ```
 
-詳細: [コンポーネントの emit の型付け](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts" />
+詳細: [コンポーネントの emit の型付け](/guide/typescript/composition-api#typing-component-emits) <sup class="vt-badge ts" />
 
 </div>
 <div class="options-api">
@@ -218,11 +218,11 @@ export default {
 }
 ```
 
-参照: [コンポーネントの emit の型付け](/guide/typescript/options-api.html#typing-component-emits) <sup class="vt-badge ts" />
+参照: [コンポーネントの emit の型付け](/guide/typescript/options-api#typing-component-emits) <sup class="vt-badge ts" />
 
 </div>
 
-任意ですが、コンポーネントがどのように動作すべきかをよりよく文書化するために、発行されるすべてのイベントを定義することが推奨されます。また、これにより Vue は既知のリスナーを[フォールスルー属性](/guide/components/attrs.html#v-on-listener-inheritance)から除外し、サードパーティのコードによって手動でディスパッチされた DOM イベントによって起こるエッジケースを回避できます。
+任意ですが、コンポーネントがどのように動作すべきかをよりよく文書化するために、発行されるすべてのイベントを定義することが推奨されます。また、これにより Vue は既知のリスナーを[フォールスルー属性](/guide/components/attrs#v-on-listener-inheritance)から除外し、サードパーティのコードによって手動でディスパッチされた DOM イベントによって起こるエッジケースを回避できます。
 
 :::tip
 ネイティブイベント（例: `click`）が `emits` オプションに定義されている場合、リスナーはコンポーネントが発行する `click` イベントのみを購読し、ネイティブの `click` イベントには反応しなくなります。
diff --git a/src/guide/components/props.md b/src/guide/components/props.md
index b7fea6e72..569fa1b2b 100644
--- a/src/guide/components/props.md
+++ b/src/guide/components/props.md
@@ -22,7 +22,7 @@ console.log(props.foo)
 </script>
 ```
 
-`<script setup>` を用いないコンポーネントの場合、[`props`](/api/options-state.html#props) オプションを使ってプロパティを宣言します:
+`<script setup>` を用いないコンポーネントの場合、[`props`](/api/options-state#props) オプションを使ってプロパティを宣言します:
 
 ```js
 export default {
@@ -40,7 +40,7 @@ export default {
 
 <div class="options-api">
 
-プロパティは、以下のように [`props`](/api/options-state.html#props) オプションを使って宣言します:
+プロパティは、以下のように [`props`](/api/options-state#props) オプションを使って宣言します:
 
 ```js
 export default {
@@ -96,7 +96,7 @@ export default {
 
 <div class="options-api">
 
-[コンポーネントプロパティの型付け](/guide/typescript/options-api.html#typing-component-props)も合わせて参照してください。<sup class="vt-badge ts" />
+[コンポーネントプロパティの型付け](/guide/typescript/options-api#typing-component-props)も合わせて参照してください。<sup class="vt-badge ts" />
 
 </div>
 
@@ -113,7 +113,7 @@ defineProps<{
 </script>
 ```
 
-詳細: [コンポーネントプロパティの型付け](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts" />
+詳細: [コンポーネントプロパティの型付け](/guide/typescript/composition-api#typing-component-props) <sup class="vt-badge ts" />
 
 </div>
 
@@ -148,13 +148,13 @@ export default {
 <span>{{ greetingMessage }}</span>
 ```
 
-技術的には、子コンポーネントにプロパティを渡すときにも camelCase を用いることができます (ただし [DOM テンプレート](/guide/essentials/component-basics.html#dom-template-parsing-caveats)内を除く)。しかし、常に kebab-case (ケバブケース) を用いて HTML の属性に揃える、以下のような表記が慣例となっています:
+技術的には、子コンポーネントにプロパティを渡すときにも camelCase を用いることができます (ただし [DOM テンプレート](/guide/essentials/component-basics#dom-template-parsing-caveats)内を除く)。しかし、常に kebab-case (ケバブケース) を用いて HTML の属性に揃える、以下のような表記が慣例となっています:
 
 ```vue-html
 <MyComponent greeting-message="hello" />
 ```
 
-[コンポーネントのタグには、可能な限り PascalCase を用いる](/guide/components/registration.html#component-name-casing)ことが推奨されます。これは Vue コンポーネントとネイティブ要素の区別が付き、テンプレートの可読性が高まるためです。しかし、プロパティを渡すときに camelCase を用いることには、それほど実用的なメリットがありません。そのため、Vue では各言語の規約に従うことが推奨されます。
+[コンポーネントのタグには、可能な限り PascalCase を用いる](/guide/components/registration#component-name-casing)ことが推奨されます。これは Vue コンポーネントとネイティブ要素の区別が付き、テンプレートの可読性が高まるためです。しかし、プロパティを渡すときに camelCase を用いることには、それほど実用的なメリットがありません。そのため、Vue では各言語の規約に従うことが推奨されます。
 
 ### 静的なプロパティと動的なプロパティ {#static-vs-dynamic-props}
 
@@ -232,7 +232,7 @@ export default {
 
 ### オブジェクトを利用した複数のプロパティのバインディング {#binding-multiple-properties-using-an-object}
 
-オブジェクトに含まれるすべてのプロパティをコンポーネントプロパティとして渡したい場合には、[引数なしの `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes) を使用します (`:プロパティ名` の代わりに `v-bind`)。例えば、以下のような `post` オブジェクトがあるとします:
+オブジェクトに含まれるすべてのプロパティをコンポーネントプロパティとして渡したい場合には、[引数なしの `v-bind`](/guide/essentials/template-syntax#dynamically-binding-multiple-attributes) を使用します (`:プロパティ名` の代わりに `v-bind`)。例えば、以下のような `post` オブジェクトがあるとします:
 
 <div class="options-api">
 
@@ -367,7 +367,7 @@ export default {
 
 オブジェクトや配列をプロパティとして渡した場合、子コンポーネントがプロパティのバインディングを変更することはできませんが、オブジェクトや配列のネストされたプロパティを変更することは**可能です**。これは、JavaScript ではオブジェクトや配列が参照渡しであり、Vue がそのような変更を防ぐのにかかるコストが現実的でないためです。
 
-このような変更の主な欠点は、親コンポーネントにとって明瞭でない方法で子コンポーネントが親の状態に影響を与えることを許してしまい、後からデータの流れを見極めるのが難しくなる可能性があることです。親と子を密に結合させる設計でない限り、ベストプラクティスとしてはそのような変更を避けるべきです。ほとんどの場合、子コンポーネントは[イベントを発行](/guide/components/events.html)して、変更を親コンポーネントに実行してもらう必要があります。
+このような変更の主な欠点は、親コンポーネントにとって明瞭でない方法で子コンポーネントが親の状態に影響を与えることを許してしまい、後からデータの流れを見極めるのが難しくなる可能性があることです。親と子を密に結合させる設計でない限り、ベストプラクティスとしてはそのような変更を避けるべきです。ほとんどの場合、子コンポーネントは[イベントを発行](/guide/components/events)して、変更を親コンポーネントに実行してもらう必要があります。
 
 ## プロパティのバリデーション {#prop-validation}
 
@@ -492,7 +492,7 @@ export default {
 
 <div class="composition-api">
 
-[型のみのプロパティ宣言](/api/sfc-script-setup.html#typescript-only-features) <sup class="vt-badge ts" /> を使用する場合、Vue は型アノテーションに基づいて、同等の実行時プロパティ宣言へのコンパイルをベストエフォートで試みます。例えば、`defineProps<{ msg: string }>` は `{ msg: { type: String, required: true }}` にコンパイルされます。
+[型のみのプロパティ宣言](/api/sfc-script-setup#typescript-only-features) <sup class="vt-badge ts" /> を使用する場合、Vue は型アノテーションに基づいて、同等の実行時プロパティ宣言へのコンパイルをベストエフォートで試みます。例えば、`defineProps<{ msg: string }>` は `{ msg: { type: String, required: true }}` にコンパイルされます。
 
 </div>
 <div class="options-api">
diff --git a/src/guide/components/provide-inject.md b/src/guide/components/provide-inject.md
index cc9d515cf..9d1297278 100644
--- a/src/guide/components/provide-inject.md
+++ b/src/guide/components/provide-inject.md
@@ -22,7 +22,7 @@
 
 <div class="composition-api">
 
-コンポーネントの子孫にデータを提供するには [`provide()`](/api/composition-api-dependency-injection.html#provide) 関数を使います:
+コンポーネントの子孫にデータを提供するには [`provide()`](/api/composition-api-dependency-injection#provide) 関数を使います:
 
 ```vue
 <script setup>
@@ -61,7 +61,7 @@ provide('key', count)
 
 <div class="options-api">
 
-コンポーネントの子孫にデータを提供するには、[`provide`](/api/options-composition.html#provide) オプションを使用します:
+コンポーネントの子孫にデータを提供するには、[`provide`](/api/options-composition#provide) オプションを使用します:
 
 ```js
 export default {
@@ -107,13 +107,13 @@ const app = createApp({})
 app.provide(/* key */ 'message', /* value */ 'hello!')
 ```
 
-アプリケーションレベルの Provide は、アプリケーションでレンダリングされるすべてのコンポーネントで利用可能です。これは特に[プラグイン](/guide/reusability/plugins.html)を書くときに便利です。プラグインは通常、コンポーネントを使って値を提供することができないからです。
+アプリケーションレベルの Provide は、アプリケーションでレンダリングされるすべてのコンポーネントで利用可能です。これは特に[プラグイン](/guide/reusability/plugins)を書くときに便利です。プラグインは通常、コンポーネントを使って値を提供することができないからです。
 
 ## Inject {#inject}
 
 <div class="composition-api">
 
-祖先コンポーネントが提供するデータを注入するには [`inject()`](/api/composition-api-dependency-injection.html#inject) 関数を使用します:
+祖先コンポーネントが提供するデータを注入するには [`inject()`](/api/composition-api-dependency-injection#inject) 関数を使用します:
 
 ```vue
 <script setup>
@@ -144,7 +144,7 @@ export default {
 
 <div class="options-api">
 
-祖先コンポーネントが提供するデータを注入するには、[`inject`](/api/options-composition.html#inject) オプションを使用します:
+祖先コンポーネントが提供するデータを注入するには、[`inject`](/api/options-composition#inject) オプションを使用します:
 
 ```js
 export default {
@@ -274,7 +274,7 @@ const { location, updateLocation } = inject('location')
 </template>
 ```
 
-最後に、`provide` を通して渡されたデータがインジェクターコンポーネントによって変更されないようにしたい場合は、提供された値を [`readonly()`](/api/reactivity-core.html#readonly) でラップすることができます。
+最後に、`provide` を通して渡されたデータがインジェクターコンポーネントによって変更されないようにしたい場合は、提供された値を [`readonly()`](/api/reactivity-core#readonly) でラップすることができます。
 
 ```vue
 <script setup>
@@ -289,7 +289,7 @@ provide('read-only-count', readonly(count))
 
 <div class="options-api">
 
-インジェクションをプロバイダーとリアクティブに連携させるためには、[computed()](/api/reactivity-core.html#computed) 関数を使って、computed プロパティを提供する必要があります:
+インジェクションをプロバイダーとリアクティブに連携させるためには、[computed()](/api/reactivity-core#computed) 関数を使って、computed プロパティを提供する必要があります:
 
 ```js{10}
 import { computed } from 'vue'
@@ -311,7 +311,7 @@ export default {
 
 [リアクティブな provide と inject のフルガイド](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbmltcG9ydCBDaGlsZCBmcm9tICcuL0NoaWxkLnZ1ZSdcbmltcG9ydCB7IGNvbXB1dGVkIH0gZnJvbSAndnVlJ1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIGNvbXBvbmVudHM6IHsgQ2hpbGQgfSxcbiAgZGF0YSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgbWVzc2FnZTogJ2hlbGxvJ1xuICAgIH1cbiAgfSxcbiAgcHJvdmlkZSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgbWVzc2FnZTogY29tcHV0ZWQoKCkgPT4gdGhpcy5tZXNzYWdlKVxuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGlucHV0IHYtbW9kZWw9XCJtZXNzYWdlXCI+XG4gIDxDaGlsZCAvPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59IiwiQ2hpbGQudnVlIjoiPHNjcmlwdD5cbmltcG9ydCBHcmFuZENoaWxkIGZyb20gJy4vR3JhbmRDaGlsZC52dWUnXG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgY29tcG9uZW50czoge1xuICAgIEdyYW5kQ2hpbGRcbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPEdyYW5kQ2hpbGQgLz5cbjwvdGVtcGxhdGU+IiwiR3JhbmRDaGlsZC52dWUiOiI8c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBpbmplY3Q6IFsnbWVzc2FnZSddXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8cD5cbiAgICBNZXNzYWdlIHRvIGdyYW5kIGNoaWxkOiB7eyBtZXNzYWdlIH19XG4gIDwvcD5cbjwvdGVtcGxhdGU+In0=)
 
-`computed()` 関数は、通常 Composition API のコンポーネントで使用されますが、Options API の特定のユースケースを補完するために使用することもできます。API 選択を Composition API に設定して[リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals.html)と[算出プロパティ](/guide/essentials/computed.html)を読むと、より詳しい使い方を学ぶことができます。
+`computed()` 関数は、通常 Composition API のコンポーネントで使用されますが、Options API の特定のユースケースを補完するために使用することもできます。API 選択を Composition API に設定して[リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals)と[算出プロパティ](/guide/essentials/computed)を読むと、より詳しい使い方を学ぶことができます。
 
 :::warning 一時的な設定が必要
 上記の使い方では、`app.config.unwrapInjectedRef = true` を設定して、インジェクションが自動的に算出 ref をアンラップするようにする必要があります。これは Vue 3.3 でデフォルトの動作になり、この設定は破損を避けるために一時的に導入されています。3.3 以降では不要になります。
@@ -350,7 +350,7 @@ import { myInjectionKey } from './keys.js'
 const injected = inject(myInjectionKey)
 ```
 
-参照: [Provide / Inject の型付け](/guide/typescript/composition-api.html#typing-provide-inject) <sup class="vt-badge ts" />
+参照: [Provide / Inject の型付け](/guide/typescript/composition-api#typing-provide-inject) <sup class="vt-badge ts" />
 
 </div>
 
diff --git a/src/guide/components/registration.md b/src/guide/components/registration.md
index 5f97ec82e..2766996e8 100644
--- a/src/guide/components/registration.md
+++ b/src/guide/components/registration.md
@@ -8,7 +8,7 @@ Vue のコンポーネントをテンプレートで使用する時は、それ
 
 ## グローバル登録 {#global-registration}
 
-開発中の [Vue アプリケーション](/guide/essentials/application.html)でグローバルにコンポーネントを利用できるようにするには、以下に示す `app.component()` メソッドを使用します:
+開発中の [Vue アプリケーション](/guide/essentials/application)でグローバルにコンポーネントを利用できるようにするには、以下に示す `app.component()` メソッドを使用します:
 
 ```js
 import { createApp } from 'vue'
@@ -136,6 +136,6 @@ export default {
 
 2. テンプレートで `<PascalCase />` を用いると、これがネイティブの HTML 要素ではなく、Vue のコンポーネントであることがより明確になります。また、Vue コンポーネントとカスタム要素（Web コンポーネント）を区別することも可能になります。
 
-このスタイルは、SFC や文字列テンプレートを合わせて使う時に推奨されるスタイルです。ただし、[DOM テンプレート解析の注意点](/guide/essentials/component-basics.html#dom-template-parsing-caveats) で説明しているように、DOM テンプレート内では PascalCase のタグが使えません。
+このスタイルは、SFC や文字列テンプレートを合わせて使う時に推奨されるスタイルです。ただし、[DOM テンプレート解析の注意点](/guide/essentials/component-basics#dom-template-parsing-caveats) で説明しているように、DOM テンプレート内では PascalCase のタグが使えません。
 
 幸いなことに、Vue は PascalCase で登録したコンポーネントから kebab-case 形式のタグへの解決をサポートしています。これにより、`MyComponent` として登録したコンポーネントは、`<MyComponent>` と `<my-component>` のどちらを使ってもテンプレート内で参照できます。そのため、テンプレートの出どころに関わらず、JavaScript のコンポーネント登録のコードには同じものを用いることができます。
diff --git a/src/guide/components/slots.md b/src/guide/components/slots.md
index baa0dcd7a..2b56358ea 100644
--- a/src/guide/components/slots.md
+++ b/src/guide/components/slots.md
@@ -313,7 +313,7 @@ function BaseLayout(slots) {
 </base-layout>
 ```
 
-式は、動的なディレクティブの引数の[構文上の制約](/guide/essentials/template-syntax.html#directives)の対象となることに注意してください。
+式は、動的なディレクティブの引数の[構文上の制約](/guide/essentials/template-syntax#directives)の対象となることに注意してください。
 
 ## スコープ付きスロット {#scoped-slots}
 
@@ -374,7 +374,7 @@ function MyComponent(slots) {
 }
 ```
 
-実際、これはスコープ付きスロットがコンパイルされる方法や、スコープ付きスロットを手動で [レンダー関数](/guide/extras/render-function.html)に渡す方法に非常に近いものです。
+実際、これはスコープ付きスロットがコンパイルされる方法や、スコープ付きスロットを手動で [レンダー関数](/guide/extras/render-function)に渡す方法に非常に近いものです。
 
 `v-slot="slotProps"` がスロット関数のシグネチャーにどのように対応しているかに注目してください。関数の引数のように、`v-slot` でもオブジェクトの分割が利用できます:
 
@@ -505,6 +505,6 @@ function MyComponent(slots) {
 
 </div>
 
-面白いパターンではありますが、レンダーレスコンポーネントで実現できるほとんどのことは、Composition API を利用することで、追加のコンポーネントのネストによるオーバーヘッドを起こすことなく、より効率的な方法で実現できます。後ほど、同様のマウストラッキング機能を[コンポーザブル](/guide/reusability/composables.html)として実装する方法を説明します。
+面白いパターンではありますが、レンダーレスコンポーネントで実現できるほとんどのことは、Composition API を利用することで、追加のコンポーネントのネストによるオーバーヘッドを起こすことなく、より効率的な方法で実現できます。後ほど、同様のマウストラッキング機能を[コンポーザブル](/guide/reusability/composables)として実装する方法を説明します。
 
 そうは言っても、スコープ付きスロットは、`<FancyList>` の例のように、ロジックのカプセル化と視覚的な出力の作成の**両方**が必要な場合には十分役に立ちます。
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index eedb29494..54924f71e 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -275,7 +275,7 @@ export default {
 
 ## `v-model` 修飾子の処理 {#handling-v-model-modifiers}
 
-フォームの入力バインディングについて学習しているときに、`v-model` には [組み込みの修飾子](/guide/essentials/forms.html#modifiers)（`.trim`, `.number`, `.lazy`）があることを確認しました。場合によっては、カスタム入力コンポーネントの `v-model` でカスタム修飾子をサポートしたいかもしれません。
+フォームの入力バインディングについて学習しているときに、`v-model` には [組み込みの修飾子](/guide/essentials/forms#modifiers)（`.trim`, `.number`, `.lazy`）があることを確認しました。場合によっては、カスタム入力コンポーネントの `v-model` でカスタム修飾子をサポートしたいかもしれません。
 
 カスタム修飾子の例として、`v-model` バインディングによって提供される文字列の最初の文字を大文字にする `capitalize` を作成してみましょう:
 
diff --git a/src/guide/essentials/class-and-style.md b/src/guide/essentials/class-and-style.md
index 11fd6a8a7..3ffeb8e9a 100644
--- a/src/guide/essentials/class-and-style.md
+++ b/src/guide/essentials/class-and-style.md
@@ -243,7 +243,7 @@ data() {
 <span>This is a child component</span>
 ```
 
-コンポーネントの属性の継承については、[フォールスルー属性](/guide/components/attrs.html)のセクションで詳しく説明しています。
+コンポーネントの属性の継承については、[フォールスルー属性](/guide/components/attrs)のセクションで詳しく説明しています。
 
 ## インラインスタイルのバインディング {#binding-inline-styles}
 
diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md
index 181f632c9..7fb80aedf 100644
--- a/src/guide/essentials/component-basics.md
+++ b/src/guide/essentials/component-basics.md
@@ -6,11 +6,11 @@
 
 <!-- https://www.figma.com/file/qa7WHDQRWuEZNRs7iZRZSI/components -->
 
-これは、ネイティブの HTML 要素をネストする方法ととてもよく似ていますが、Vue は独自のコンポーネントモデルを実装しており、各コンポーネントのカスタムコンテンツとロジックをカプセル化することができます。 Vue はまた、ネイティブの Web コンポーネントとうまく連携しています。 Vue コンポーネントとネイティブの Web コンポーネントの関係について興味があるようでしたら[こちらを参照してください](/guide/extras/web-components.html)。
+これは、ネイティブの HTML 要素をネストする方法ととてもよく似ていますが、Vue は独自のコンポーネントモデルを実装しており、各コンポーネントのカスタムコンテンツとロジックをカプセル化することができます。 Vue はまた、ネイティブの Web コンポーネントとうまく連携しています。 Vue コンポーネントとネイティブの Web コンポーネントの関係について興味があるようでしたら[こちらを参照してください](/guide/extras/web-components)。
 
 ## コンポーネントの定義 {#defining-a-component}
 
-ビルドステップを使用する場合は通常、各 Vue コンポーネントは専用のファイルで `.vue` 拡張子を使用して定義します。これは [単一ファイルコンポーネント](/guide/scaling-up/sfc.html)（略して SFC）として知られています:
+ビルドステップを使用する場合は通常、各 Vue コンポーネントは専用のファイルで `.vue` 拡張子を使用して定義します。これは [単一ファイルコンポーネント](/guide/scaling-up/sfc)（略して SFC）として知られています:
 
 <div class="options-api">
 
@@ -117,7 +117,7 @@ export default {
 </template>
 ```
 
-インポートしたコンポーネントをテンプレートに公開するには、`components` オプションでコンポーネントを[登録](/guide/components/registration.html)する必要があります。これにより、そのコンポーネントは登録されたキーを使ってタグとして利用できるようになります。
+インポートしたコンポーネントをテンプレートに公開するには、`components` オプションでコンポーネントを[登録](/guide/components/registration)する必要があります。これにより、そのコンポーネントは登録されたキーを使ってタグとして利用できるようになります。
 
 </div>
 
@@ -138,7 +138,7 @@ import ButtonCounter from './ButtonCounter.vue'
 
 </div>
 
-また、コンポーネントをグローバル登録することで、インポートすることなくアプリケーション内のすべてのコンポーネントで利用できるようにすることもできます。グローバル登録とローカル登録のメリットとデメリットは、専用の[コンポーネントの登録](/guide/components/registration.html)セクションで説明されています。
+また、コンポーネントをグローバル登録することで、インポートすることなくアプリケーション内のすべてのコンポーネントで利用できるようにすることもできます。グローバル登録とローカル登録のメリットとデメリットは、専用の[コンポーネントの登録](/guide/components/registration)セクションで説明されています。
 
 コンポーネントは好きなだけ、何度でも再利用可能です:
 
@@ -179,7 +179,7 @@ SFC では、ネイティブの HTML 要素と区別するために、子コン
 
 ブログを構築する場合、ブログの記事を表示するコンポーネントが必要になるかと思います。すべてのブログ記事が同じレイアウトで表示されるようにしたいのですが、コンテンツは異なっています。このようなコンポーネントは、表示したい特定の記事のタイトルや内容などのデータを渡すことができない限り役に立ちません。そこでプロパティの出番です。
 
-プロパティはコンポーネントに登録できるカスタム属性のことです。ブログ記事コンポーネントにタイトルを渡すには、<span class="options-api">[`props`](/api/options-state.html#props) オプション</span><span class="composition-api">[`defineProps`](/api/sfc-script-setup.html#defineprops-defineemits) マクロ</span>を使って、このコンポーネントが受け取るプロパティのリストを宣言する必要があります:
+プロパティはコンポーネントに登録できるカスタム属性のことです。ブログ記事コンポーネントにタイトルを渡すには、<span class="options-api">[`props`](/api/options-state#props) オプション</span><span class="composition-api">[`defineProps`](/api/sfc-script-setup#defineprops-defineemits) マクロ</span>を使って、このコンポーネントが受け取るプロパティのリストを宣言する必要があります:
 
 <div class="options-api">
 
@@ -219,7 +219,7 @@ const props = defineProps(['title'])
 console.log(props.title)
 ```
 
-参照:[コンポーネントプロパティの型付け](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts" />
+参照:[コンポーネントプロパティの型付け](/guide/typescript/composition-api#typing-component-props) <sup class="vt-badge ts" />
 
 `<script setup>` を使わない場合、プロパティは `props` オプションで宣言する必要があり、props オブジェクトは `setup()` の第 1 引数として渡されます:
 
@@ -299,7 +299,7 @@ const posts = ref([
 
 動的なプロパティの値を渡すために `v-bind` がどう使用されているかに注目してください。これは、レンダリングするコンテンツを事前に正確に把握していない場合に特に役立ちます。
 
-プロパティについては以上となりますが、このページを読み終え内容に慣れてきたら、後ほど[プロパティ](/guide/components/props.html)の完全ガイドを読みにくることをおすすめします。
+プロパティについては以上となりますが、このページを読み終え内容に慣れてきたら、後ほど[プロパティ](/guide/components/props)の完全ガイドを読みにくることをおすすめします。
 
 ## イベントの購読 {#listening-to-events}
 
@@ -366,7 +366,7 @@ const postFontSize = ref(1)
  />
 ```
 
-そして、子コンポーネントは組み込みの [**`$emit`** メソッド](/api/component-instance.html#emit)を呼び出し、イベント名を渡すことによって自身のイベントを発行することができます:
+そして、子コンポーネントは組み込みの [**`$emit`** メソッド](/api/component-instance#emit)を呼び出し、イベント名を渡すことによって自身のイベントを発行することができます:
 
 ```vue{5}
 <!-- BlogPost.vue, omitting <script> -->
@@ -391,7 +391,7 @@ const postFontSize = ref(1)
 
 </div>
 
-オプションとして <span class="options-api">[`emits`](/api/options-state.html#emits) オプション</span><span class="composition-api">[`defineEmits`](/api/sfc-script-setup.html#defineprops-defineemits) マクロ</span>を使って発行するイベントを宣言することができます:
+オプションとして <span class="options-api">[`emits`](/api/options-state#emits) オプション</span><span class="composition-api">[`defineEmits`](/api/sfc-script-setup#defineprops-defineemits) マクロ</span>を使って発行するイベントを宣言することができます:
 
 <div class="options-api">
 
@@ -418,7 +418,7 @@ defineEmits(['enlarge-text'])
 
 </div>
 
-コンポーネントが発行する全てのイベントをドキュメント化することで、必要に応じてそれらを[バリデーション](/guide/components/events.html#events-validation)しています。また、これは Vue が暗黙的に子コンポーネントのルート要素にイベントをネイティブリスナーとして適用するのを避けることにもなります。
+コンポーネントが発行する全てのイベントをドキュメント化することで、必要に応じてそれらを[バリデーション](/guide/components/events#events-validation)しています。また、これは Vue が暗黙的に子コンポーネントのルート要素にイベントをネイティブリスナーとして適用するのを避けることにもなります。
 
 <div class="composition-api">
 
@@ -432,7 +432,7 @@ emit('enlarge-text')
 </script>
 ```
 
-参照:[コンポーネントの emit の型付け](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts" />
+参照:[コンポーネントの emit の型付け](/guide/typescript/composition-api#typing-component-emits) <sup class="vt-badge ts" />
 
 `<script setup>` を使用していない時は `emits` オプションを使用してイベント発行を宣言することができます。setup コンテキスト (`setup()` に第 2 引数として渡されます) のプロパティとして `emit` 関数にアクセスすることができます:
 
@@ -538,7 +538,7 @@ HTML 要素と同じように、以下のようにコンポーネントにコン
 
 また、`is` 属性を使って、通常の HTML 要素を作成することもできます。
 
-複数のコンポーネントを `<component :is="...">` で切り替えた場合、切り変えられたコンポーネントがアンマウントされます。組み込みの [`<KeepAlive>` コンポーネント](/guide/built-ins/keep-alive.html) を使用すれば、アクティブでないコンポーネントを強制的に "生きて" いる状態にすることができます。
+複数のコンポーネントを `<component :is="...">` で切り替えた場合、切り変えられたコンポーネントがアンマウントされます。組み込みの [`<KeepAlive>` コンポーネント](/guide/built-ins/keep-alive) を使用すれば、アクティブでないコンポーネントを強制的に "生きて" いる状態にすることができます。
 
 ## DOM テンプレート解析の注意点 {#dom-template-parsing-caveats}
 
@@ -615,7 +615,7 @@ const BlogPost = {
 </table>
 ```
 
-カスタムコンポーネント `<blog-post-row>` は無効なコンテンツとして巻き上げられ、最終的なレンダリング出力でエラーが発生します。回避策として、特別な [`is` 属性](/api/built-in-special-attributes.html#is) を使用することができます:
+カスタムコンポーネント `<blog-post-row>` は無効なコンテンツとして巻き上げられ、最終的なレンダリング出力でエラーが発生します。回避策として、特別な [`is` 属性](/api/built-in-special-attributes#is) を使用することができます:
 
 ```vue-html
 <table>
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 3ce8da7d1..f88f9731a 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -97,7 +97,7 @@ export default {
 
 通常のプロパティと同じように、テンプレート内の算出プロパティにデータバインドすることもできます。Vue は `this.publishedBooksMessage` が `this.author.books` に依存していることを知っているので、`this.author.books` が変わると `this.publishedBooksMessage` に依存する全てのバインディングを更新します。
 
-参照: [算出プロパティの型付け](/guide/typescript/options-api.html#typing-computed-properties) <sup class="vt-badge ts" />
+参照: [算出プロパティの型付け](/guide/typescript/options-api#typing-computed-properties) <sup class="vt-badge ts" />
 
 </div>
 
@@ -134,7 +134,7 @@ const publishedBooksMessage = computed(() => {
 
 算出プロパティは、自動的にリアクティブな依存関係を追跡します。Vue は `publishedBooksMessage` の算出が `author.books` に依存することを知っているので、`author.books` が変わると `publishedBooksMessage` に依存する全てのバインディングを更新します。
 
-参照: [`computed()` の型付け](/guide/typescript/composition-api.html#typing-computed) <sup class="vt-badge ts" />
+参照: [`computed()` の型付け](/guide/typescript/composition-api#typing-computed) <sup class="vt-badge ts" />
 
 </div>
 
diff --git a/src/guide/essentials/conditional.md b/src/guide/essentials/conditional.md
index d7c2ac2f5..69a90ff0e 100644
--- a/src/guide/essentials/conditional.md
+++ b/src/guide/essentials/conditional.md
@@ -111,7 +111,7 @@ const awesome = ref(true)
 ## `v-if` と `v-for` {#v-if-with-v-for}
 
 ::: warning Note
-暗黙的な優先順位により、 `v-if` と `v-for` を同じ要素で利用することは **推奨されません**。 詳細については [スタイルガイド](/style-guide/rules-essential.html#avoid-v-if-with-v-for) を参照ください。
+暗黙的な優先順位により、 `v-if` と `v-for` を同じ要素で利用することは **推奨されません**。 詳細については [スタイルガイド](/style-guide/rules-essential#avoid-v-if-with-v-for) を参照ください。
 :::
 
 `v-if` と `v-for` が同じ要素に両方つかわれる場合、 `v-if` が先に評価されます。詳細については [リストレンダリングのガイド](list.html#v-for-と-v-if) を参照してください。
diff --git a/src/guide/essentials/event-handling.md b/src/guide/essentials/event-handling.md
index 26ac55526..ebb609c72 100644
--- a/src/guide/essentials/event-handling.md
+++ b/src/guide/essentials/event-handling.md
@@ -120,12 +120,12 @@ methods: {
 
 <div class="composition-api">
 
-参照: [イベントハンドラーの型付け](/guide/typescript/composition-api.html#typing-event-handlers) <sup class="vt-badge ts" />
+参照: [イベントハンドラーの型付け](/guide/typescript/composition-api#typing-event-handlers) <sup class="vt-badge ts" />
 
 </div>
 <div class="options-api">
 
-参照: [イベントハンドラーの型付け](/guide/typescript/options-api.html#typing-event-handlers) <sup class="vt-badge ts" />
+参照: [イベントハンドラーの型付け](/guide/typescript/options-api#typing-event-handlers) <sup class="vt-badge ts" />
 
 </div>
 
diff --git a/src/guide/essentials/forms.md b/src/guide/essentials/forms.md
index a0cb96ed2..d88c8637c 100644
--- a/src/guide/essentials/forms.md
+++ b/src/guide/essentials/forms.md
@@ -458,4 +458,4 @@ input が `type="number"` を持つ場合は `number` 修飾子が自動で適
 
 > Vue のコンポーネントにまだ慣れていない場合、とりあえずはこのセクションをスキップすることができます。
 
-HTML 組み込みの input タイプが常にあなたのニーズを満たすとは限りません。幸いなことに、 Vue のコンポーネントでは完全にカスタマイズされた動作を持つ再利用可能な入力を構築することが可能です。それらの入力は `v-model` でも動作します！　詳しくは、コンポーネントガイドの [`v-model` の使い方](/guide/components/v-model.html) を参照してください。
+HTML 組み込みの input タイプが常にあなたのニーズを満たすとは限りません。幸いなことに、 Vue のコンポーネントでは完全にカスタマイズされた動作を持つ再利用可能な入力を構築することが可能です。それらの入力は `v-model` でも動作します！　詳しくは、コンポーネントガイドの [`v-model` の使い方](/guide/components/v-model) を参照してください。
diff --git a/src/guide/essentials/lifecycle.md b/src/guide/essentials/lifecycle.md
index 2b339e16a..dfb9a9b92 100644
--- a/src/guide/essentials/lifecycle.md
+++ b/src/guide/essentials/lifecycle.md
@@ -31,7 +31,7 @@ export default {
 
 </div>
 
-インスタンスのライフサイクルのさまざまな段階で呼び出されるフックは他にもあり、最も一般的に使用されるのは <span class="composition-api">[`onMounted`](/api/composition-api-lifecycle.html#onmounted)、 [`onUpdated`](/api/composition-api-lifecycle.html#onupdated) および [`onUnmounted`](/api/composition-api-lifecycle.html#onunmounted)</span><span class="options-api">[`mounted`](/api/options-lifecycle.html#mounted)、 [`updated`](/api/options-lifecycle.html#updated) および [`unmounted`](/api/options-lifecycle.html#unmounted)</span> です。
+インスタンスのライフサイクルのさまざまな段階で呼び出されるフックは他にもあり、最も一般的に使用されるのは <span class="composition-api">[`onMounted`](/api/composition-api-lifecycle#onmounted)、 [`onUpdated`](/api/composition-api-lifecycle#onupdated) および [`onUnmounted`](/api/composition-api-lifecycle#onunmounted)</span><span class="options-api">[`mounted`](/api/options-lifecycle#mounted)、 [`updated`](/api/options-lifecycle#updated) および [`unmounted`](/api/options-lifecycle#unmounted)</span> です。
 
 <div class="options-api">
 
@@ -63,4 +63,4 @@ setTimeout(() => {
 
 <!-- https://www.figma.com/file/Xw3UeNMOralY6NV7gSjWdS/Vue-Lifecycle -->
 
-すべてのライフサイクルフックとそれぞれのユースケースの詳細については、<span class="composition-api">[ライフサイクルフック API リファレンス](/api/composition-api-lifecycle.html)</span><span class="options-api">[ライフサイクルフック API リファレンス](/api/options-lifecycle.html)</span> を参照してください。
+すべてのライフサイクルフックとそれぞれのユースケースの詳細については、<span class="composition-api">[ライフサイクルフック API リファレンス](/api/composition-api-lifecycle)</span><span class="options-api">[ライフサイクルフック API リファレンス](/api/options-lifecycle)</span> を参照してください。
diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md
index a3ff4a8c1..d05bcc022 100644
--- a/src/guide/essentials/list.md
+++ b/src/guide/essentials/list.md
@@ -224,7 +224,7 @@ data() {
 ## `v-for` と `v-if` を組み合わせる場合 {#v-for-with-v-if}
 
 :::warning 注意
-暗黙の優先順位があるため、`v-if` と `v-for` を同一の要素に対して使用することは**推奨されません**。詳しくは[スタイルガイド](/style-guide/rules-essential.html#avoid-v-if-with-v-for)を参照してください。
+暗黙の優先順位があるため、`v-if` と `v-for` を同一の要素に対して使用することは**推奨されません**。詳しくは[スタイルガイド](/style-guide/rules-essential#avoid-v-if-with-v-for)を参照してください。
 :::
 
 同じノードに両方が存在する場合、`v-for` よりも `v-if` のほうが優先順位が高くなります。これは、以下のように `v-for` のスコープにある変数には `v-if` の条件式からアクセスできないことを意味します:
@@ -275,9 +275,9 @@ Vue に各ノードを一意に追跡するためのヒントを与え、既存
 ここでいう `key` は、`v-bind` でバインドされる特別な属性です。[`v-for` をオブジェクトに適用する](#v-for-with-an-object)ときのプロパティのキーの変数と混同しないように注意してください。
 :::
 
-`v-for` の `key` 属性は、可能な場合は必ず指定することが[推奨されます](/style-guide/rules-essential.html#use-keyed-v-for)。ただし、反復処理する DOM の内容が単純なものである (つまりコンポーネントやステートフルな DOM 要素を含まない) 場合、またはパフォーマンス向上のために意図的にデフォルト動作を用いたい場合は、この限りではありません。
+`v-for` の `key` 属性は、可能な場合は必ず指定することが[推奨されます](/style-guide/rules-essential#use-keyed-v-for)。ただし、反復処理する DOM の内容が単純なものである (つまりコンポーネントやステートフルな DOM 要素を含まない) 場合、またはパフォーマンス向上のために意図的にデフォルト動作を用いたい場合は、この限りではありません。
 
-`key` のバインディングにはプリミティブ型の値、つまり文字列と数値が想定されます。`v-for` の key にオブジェクトを指定してはいけません。`key` 属性の詳しい使い方については、[`key` API のドキュメント](/api/built-in-special-attributes.html#key)を参照してください。
+`key` のバインディングにはプリミティブ型の値、つまり文字列と数値が想定されます。`v-for` の key にオブジェクトを指定してはいけません。`key` 属性の詳しい使い方については、[`key` API のドキュメント](/api/built-in-special-attributes#key)を参照してください。
 
 ## `v-for` をコンポーネントに適用する {#v-for-with-a-component}
 
diff --git a/src/guide/essentials/reactivity-fundamentals.md b/src/guide/essentials/reactivity-fundamentals.md
index 2ea74ead6..7f4f5fa3d 100644
--- a/src/guide/essentials/reactivity-fundamentals.md
+++ b/src/guide/essentials/reactivity-fundamentals.md
@@ -67,7 +67,7 @@ export default {
 
 <div class="composition-api">
 
-リアクティブなオブジェクトや配列を作るには、[`reactive()`](/api/reactivity-core.html#reactive) 関数を使用します。
+リアクティブなオブジェクトや配列を作るには、[`reactive()`](/api/reactivity-core#reactive) 関数を使用します。
 
 ```js
 import { reactive } from 'vue'
@@ -75,9 +75,9 @@ import { reactive } from 'vue'
 const state = reactive({ count: 0 })
 ```
 
-リアクティブなオブジェクトは [JavaScript プロキシ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)で、通常のオブジェクトと同じように振る舞います。違いは、Vue がリアクティブなオブジェクトのプロパティアクセスと変更を追跡できることです。詳細については、[リアクティビティーの探求](/guide/extras/reactivity-in-depth.html)で Vue のリアクティブシステムの仕組みを説明していますが、このメインガイドを読み終えた後に読むことをお勧めします。
+リアクティブなオブジェクトは [JavaScript プロキシ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)で、通常のオブジェクトと同じように振る舞います。違いは、Vue がリアクティブなオブジェクトのプロパティアクセスと変更を追跡できることです。詳細については、[リアクティビティーの探求](/guide/extras/reactivity-in-depth)で Vue のリアクティブシステムの仕組みを説明していますが、このメインガイドを読み終えた後に読むことをお勧めします。
 
-参照: [`reactive()` の型付け](/guide/typescript/composition-api.html#typing-reactive) <sup class="vt-badge ts" />。
+参照: [`reactive()` の型付け](/guide/typescript/composition-api#typing-reactive) <sup class="vt-badge ts" />。
 
 コンポーネントのテンプレートでリアクティブな状態を使うには、下記に示すように、コンポーネントの `setup()` 関数で宣言し、それを返します：
 
@@ -216,7 +216,7 @@ export default {
 
 リアクティブな状態を変化させると、DOM は自動的に更新されます。しかし、DOM の更新は同期的に適用されないことに注意する必要があります。その代わりに Vue は、更新サイクルの「next tick」まで更新をバッファリングし、どれだけ状態を変化させても、各コンポーネントは一度だけ更新することを保証しています。
 
-状態変化後の DOM 更新が完了するのを待つため、[nextTick()](/api/general.html#nexttick) というグローバル API を使用することができます：
+状態変化後の DOM 更新が完了するのを待つため、[nextTick()](/api/general#nexttick) というグローバル API を使用することができます：
 
 <div class="composition-api">
 
@@ -298,7 +298,7 @@ function mutateDeeply() {
 
 </div>
 
-また、ルートレベルでのみリアクティビティーを追跡する[浅いリアクティブオブジェクト](/api/reactivity-advanced.html#shallowreactive)を明示的に作成することも可能ですが、これらは一般的に高度な使用例においてのみ必要とされるものとなります。
+また、ルートレベルでのみリアクティビティーを追跡する[浅いリアクティブオブジェクト](/api/reactivity-advanced#shallowreactive)を明示的に作成することも可能ですが、これらは一般的に高度な使用例においてのみ必要とされるものとなります。
 
 <div class="composition-api">
 
@@ -375,7 +375,7 @@ console.log(proxy.nested === raw) // false
 
 ## `ref()` と共に使うリアクティブな変数 \*\* {#reactive-variables-with-ref}
 
-Vue は、`reactive()` の制限に対処するため、[`ref()`](/api/reactivity-core.html#ref) という関数も提供しており、任意の値の型を保持できるリアクティブな **"refs "** を作成することができます：
+Vue は、`reactive()` の制限に対処するため、[`ref()`](/api/reactivity-core#ref) という関数も提供しており、任意の値の型を保持できるリアクティブな **"refs "** を作成することができます：
 
 ```js
 import { ref } from 'vue'
@@ -395,7 +395,7 @@ count.value++
 console.log(count.value) // 1
 ```
 
-参照: [`ref()` の型付け](/guide/typescript/composition-api.html#typing-ref) <sup class="vt-badge ts" />。
+参照: [`ref()` の型付け](/guide/typescript/composition-api#typing-ref) <sup class="vt-badge ts" />。
 
 リアクティブなオブジェクトのプロパティと同様に、ref の `.value` プロパティはリアクティブとなります。また、オブジェクト型を保持する場合、ref は `.value` を `reactive()` で自動的に変換します。
 
@@ -425,7 +425,7 @@ callSomeFunction(obj.foo)
 const { foo, bar } = obj
 ```
 
-つまり、`ref()` を使うと、任意の値への「参照」を作り、リアクティビティーを失わずに受け渡しすることができます。この能力は、ロジックを[コンポーザブル関数](/guide/reusability/composables.html)に抽出する際に頻繁に使用されるため、非常に重要となります。
+つまり、`ref()` を使うと、任意の値への「参照」を作り、リアクティビティーを失わずに受け渡しすることができます。この能力は、ロジックを[コンポーザブル関数](/guide/reusability/composables)に抽出する際に頻繁に使用されるため、非常に重要となります。
 
 ### Ref Unwrapping in Templates \*\* {#ref-unwrapping-in-templates}
 
@@ -512,7 +512,7 @@ console.log(state.count) // 2
 console.log(count.value) // 1
 ```
 
-Ref のアンラッピングは、より深いリアクティブなオブジェクトの内部にネストされている場合にのみ発生します。[浅いリアクティブなオブジェクト](/api/reactivity-advanced.html#shallowreactive) のプロパティとしてアクセスされた場合は適用されません。
+Ref のアンラッピングは、より深いリアクティブなオブジェクトの内部にネストされている場合にのみ発生します。[浅いリアクティブなオブジェクト](/api/reactivity-advanced#shallowreactive) のプロパティとしてアクセスされた場合は適用されません。
 
 ### 配列とコレクションにおける Ref のアンラッピング {#ref-unwrapping-in-arrays-and-collections}
 
diff --git a/src/guide/essentials/template-refs.md b/src/guide/essentials/template-refs.md
index b7afd6c44..ac9705caa 100644
--- a/src/guide/essentials/template-refs.md
+++ b/src/guide/essentials/template-refs.md
@@ -83,7 +83,7 @@ watchEffect(() => {
 })
 ```
 
-こちらもご覧ください: [テンプレート参照の型付け](/guide/typescript/composition-api.html#typing-template-refs) <sup class="vt-badge ts" />
+こちらもご覧ください: [テンプレート参照の型付け](/guide/typescript/composition-api#typing-template-refs) <sup class="vt-badge ts" />
 
 </div>
 
@@ -237,7 +237,7 @@ defineExpose({
 
 親がテンプレート参照を用いてこのコンポーネントのインスタンスを取得する場合、取得されるインスタンスは `{ a: number, b: number }` の形になります (通常のインスタンスと同様に、ref は自動的にアンラップされます)。
 
-こちらもご覧ください: [コンポーネントのテンプレート参照の型付け](/guide/typescript/composition-api.html#typing-component-template-refs) <sup class="vt-badge ts" />
+こちらもご覧ください: [コンポーネントのテンプレート参照の型付け](/guide/typescript/composition-api#typing-component-template-refs) <sup class="vt-badge ts" />
 
 </div>
 <div class="options-api">
diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md
index 09bf6dd6b..eea8ef7dc 100644
--- a/src/guide/essentials/template-syntax.md
+++ b/src/guide/essentials/template-syntax.md
@@ -4,7 +4,7 @@ Vue では、HTML ベースのテンプレート構文を使用します。テ
 
 内部では、Vue はテンプレートをコンパイルし、高度に最適化された JavaScript のコードにします。リアクティビティー機構と組み合わせ、Vue はアプリの状態が変化したとき、再レンダリングを必要とする最小限のコンポーネントをインテリジェントに見つけ出すことができます。そして、最小限の DOM 操作を適用します。
 
-仮想 DOM の各種概念をよく知っていて、生の JavaScript が持つパワーを活かしたいという場合には、テンプレートの代わりに [レンダー関数を直接記述](/guide/extras/render-function.html)することもできます。さらに、オプションで JSX もサポートされています。ただし、これらの書き方をする場合には、コンパイル時の最適化がテンプレートと同等のレベルでは利用できないことに注意してください。
+仮想 DOM の各種概念をよく知っていて、生の JavaScript が持つパワーを活かしたいという場合には、テンプレートの代わりに [レンダー関数を直接記述](/guide/extras/render-function)することもできます。さらに、オプションで JSX もサポートされています。ただし、これらの書き方をする場合には、コンパイル時の最適化がテンプレートと同等のレベルでは利用できないことに注意してください。
 
 ## テキスト展開 {#text-interpolation}
 
@@ -18,7 +18,7 @@ Vue では、HTML ベースのテンプレート構文を使用します。テ
 
 ## 生の HTML {#raw-html}
 
-マスタッシュの中では、データが HTML ではなくプレーンテキストとして解釈されます。本来の HTML を出力したい場合は、次のように [`v-html` ディレクティブ](/api/built-in-directives.html#v-html)を用いる必要があります:
+マスタッシュの中では、データが HTML ではなくプレーンテキストとして解釈されます。本来の HTML を出力したい場合は、次のように [`v-html` ディレクティブ](/api/built-in-directives#v-html)を用いる必要があります:
 
 ```vue-html
 <p>Using text interpolation: {{ rawHtml }}</p>
@@ -44,7 +44,7 @@ Vue では、HTML ベースのテンプレート構文を使用します。テ
 
 ## 属性バインディング {#attribute-bindings}
 
-HTML 属性の中ではマスタッシュ構文が使えません。代わりに、以下の [`v-bind` ディレクティブ](/api/built-in-directives.html#v-bind)を使用します:
+HTML 属性の中ではマスタッシュ構文が使えません。代わりに、以下の [`v-bind` ディレクティブ](/api/built-in-directives#v-bind)を使用します:
 
 ```vue-html
 <div v-bind:id="dynamicId"></div>
@@ -164,13 +164,13 @@ Vue のテンプレートでは、以下の場所で JavaScript の式を使用
 
 テンプレートで用いる式はサンドボックス内で実行され、[限定的なグローバルのリスト](https://github.com/vuejs/core/blob/main/packages/shared/src/globalsWhitelist.ts#L3)にのみアクセスできます。このリストには、`Math` や `Date` などのよく使われる組み込みグローバルが含まれています。
 
-ユーザーが `window` に付与したプロパティなど、このリストに明示的に含まれていないグローバルには、テンプレート内の式からアクセスすることができません。ただし、[`app.config.globalProperties`](/api/application.html#app-config-globalproperties) に追加することにより、Vue のあらゆる式で利用できるグローバルを明示的に定義することができます。
+ユーザーが `window` に付与したプロパティなど、このリストに明示的に含まれていないグローバルには、テンプレート内の式からアクセスすることができません。ただし、[`app.config.globalProperties`](/api/application#app-config-globalproperties) に追加することにより、Vue のあらゆる式で利用できるグローバルを明示的に定義することができます。
 
 ## ディレクティブ {#directives}
 
-ディレクティブは、`v-` という接頭辞を持つ特別な属性です。Vue では、上で紹介した `v-html` や `v-bind` をはじめ、数々の[組み込みディレクティブ](/api/built-in-directives.html)が用意されています。
+ディレクティブは、`v-` という接頭辞を持つ特別な属性です。Vue では、上で紹介した `v-html` や `v-bind` をはじめ、数々の[組み込みディレクティブ](/api/built-in-directives)が用意されています。
 
-ディレクティブの属性値は、JavaScript の単一の式であることが期待されます (ただし `v-for`、`v-on`、`v-slot` は例外であり、後ほどそれぞれのセクションで説明します)。ディレクティブの役割は、式が示す値が変化したとき、リアクティブに更新を DOM に適用することです。例えば、[`v-if`](/api/built-in-directives.html#v-if) を取り上げてみます:
+ディレクティブの属性値は、JavaScript の単一の式であることが期待されます (ただし `v-for`、`v-on`、`v-slot` は例外であり、後ほどそれぞれのセクションで説明します)。ディレクティブの役割は、式が示す値が変化したとき、リアクティブに更新を DOM に適用することです。例えば、[`v-if`](/api/built-in-directives#v-if) を取り上げてみます:
 
 ```vue-html
 <p v-if="seen">Now you see me</p>
@@ -243,7 +243,7 @@ Vue のテンプレートでは、以下の場所で JavaScript の式を使用
 <a :['foo' + bar]="value"> ... </a>
 ```
 
-複雑な動的引数を渡す必要がある場合は、後ほど取り上げる[算出プロパティ](./computed.html)を使用するとよいでしょう。
+複雑な動的引数を渡す必要がある場合は、後ほど取り上げる[算出プロパティ](./computed)を使用するとよいでしょう。
 
 また、HTML ファイルに直接記述する DOM 内テンプレートを使用する場合、ブラウザーでは属性名が小文字であることが求められるため、以下のように大文字のキー名を使用することは避ける必要があります:
 
@@ -261,7 +261,7 @@ Vue のテンプレートでは、以下の場所で JavaScript の式を使用
 <form @submit.prevent="onSubmit">...</form>
 ```
 
-この後、[`v-on` 向け](./event-handling.html#event-modifiers)や [`v-model` 向け](./forms.html#modifiers)の修飾子の例を、その機能のページで見ることになるでしょう。
+この後、[`v-on` 向け](./event-handling#event-modifiers)や [`v-model` 向け](./forms#modifiers)の修飾子の例を、その機能のページで見ることになるでしょう。
 
 最後に、ディレクティブの構文の全容をこちらの図にまとめました:
 
diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md
index e90f68ba3..8ff395702 100644
--- a/src/guide/essentials/watchers.md
+++ b/src/guide/essentials/watchers.md
@@ -6,7 +6,7 @@
 
 <div class="options-api">
 
-Options API では、[`watch` オプション](/api/options-state.html#watch) を使って、リアクティブなプロパティが変更されるたびに関数を実行することができます:
+Options API では、[`watch` オプション](/api/options-state#watch) を使って、リアクティブなプロパティが変更されるたびに関数を実行することができます:
 
 ```js
 export default {
@@ -65,7 +65,7 @@ export default {
 
 <div class="composition-api">
 
-Composition API では、[`watch` 関数](/api/reactivity-core.html#watch) を使用することでリアクティブな状態の一部が変更されるたびにコールバックを実行することができます:
+Composition API では、[`watch` 関数](/api/reactivity-core#watch) を使用することでリアクティブな状態の一部が変更されるたびにコールバックを実行することができます:
 
 ```vue
 <script setup>
@@ -280,7 +280,7 @@ watch(todoId, async () => {
 
 特に、ウォッチャーが `todoId` を 2 回使用していることに注目してください。1 回目はソースとして、2 回目はコールバック内で使用しています。
 
-これは、[`watchEffect()`](/api/reactivity-core.html#watcheffect) によって簡略化できます。`watchEffect()` によって、コールバックのリアクティブな依存関係を自動的に追跡できます。上記のウォッチャーは次のように書き換えられます:
+これは、[`watchEffect()`](/api/reactivity-core#watcheffect) によって簡略化できます。`watchEffect()` によって、コールバックのリアクティブな依存関係を自動的に追跡できます。上記のウォッチャーは次のように書き換えられます:
 
 ```js
 watchEffect(async () => {
@@ -363,7 +363,7 @@ watchPostEffect(() => {
 
 ## `this.$watch()` \* {#this-watch}
 
-また、[`$watch()  インスタンスメソッド`](/api/component-instance.html#watch) を使用してウォッチャーを強制的に作成することが可能です:
+また、[`$watch()  インスタンスメソッド`](/api/component-instance#watch) を使用してウォッチャーを強制的に作成することが可能です:
 
 ```js
 export default {
diff --git a/src/guide/extras/animation.md b/src/guide/extras/animation.md
index c2c15bb48..47b833cef 100644
--- a/src/guide/extras/animation.md
+++ b/src/guide/extras/animation.md
@@ -7,7 +7,7 @@ import AnimateWatcher from './demos/AnimateWatcher.vue'
 
 # アニメーションテクニック {#animation-techniques}
 
-Vue には、enter (挿入) / leave (削除) とリストのトランジションを処理するための[`<Transition>`](/guide/built-ins/transition.html) と [`<TransitionGroup>`](/guide/built-ins/transition-group.html)というコンポーネントがあります。しかし、Vue のアプリケーションであっても、Web 上でアニメーションを使用する方法は他にもたくさんあります。ここでは、いくつかの追加のテクニックについて説明します。
+Vue には、enter (挿入) / leave (削除) とリストのトランジションを処理するための[`<Transition>`](/guide/built-ins/transition) と [`<TransitionGroup>`](/guide/built-ins/transition-group)というコンポーネントがあります。しかし、Vue のアプリケーションであっても、Web 上でアニメーションを使用する方法は他にもたくさんあります。ここでは、いくつかの追加のテクニックについて説明します。
 
 ## クラスベースのアニメーション {#class-based-animations}
 
diff --git a/src/guide/extras/composition-api-faq.md b/src/guide/extras/composition-api-faq.md
index 04e10ae58..ac0d1c56e 100644
--- a/src/guide/extras/composition-api-faq.md
+++ b/src/guide/extras/composition-api-faq.md
@@ -14,13 +14,13 @@ outline: deep
 
 Composition API はオプションを宣言する代わりに関数をインポートすることで Vue コンポーネントを書くことができる API セットのことです。以下に記載する API を含む包括的な用語です:
 
-- [リアクティビティー API](/api/reactivity-core.html) 、例: `ref()` や `reactive()` で、リアクティブな状態、算出状態、ウォッチャーを直接作成できます。
+- [リアクティビティー API](/api/reactivity-core) 、例: `ref()` や `reactive()` で、リアクティブな状態、算出状態、ウォッチャーを直接作成できます。
 
-- [ライフサイクルフック](/api/composition-api-lifecycle.html)、 例: `onMounted()` や `onUnmounted()` で、コンポーネントのライフサイクルにプログラム的なフックを設定します。
+- [ライフサイクルフック](/api/composition-api-lifecycle)、 例: `onMounted()` や `onUnmounted()` で、コンポーネントのライフサイクルにプログラム的なフックを設定します。
 
-- [依存関係の注入](/api/composition-api-dependency-injection.html)、すなわち `provide()` と `inject()` によって、 リアクティビティー API を使用しながら Vue の依存関係注入システムを利用できます。
+- [依存関係の注入](/api/composition-api-dependency-injection)、すなわち `provide()` と `inject()` によって、 リアクティビティー API を使用しながら Vue の依存関係注入システムを利用できます。
 
-Composition API は Vue 3 と [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html) の組み込み機能です。Vue 2 の古いバージョンでは、公式にメンテナンスされている[`@vue/composition-api`](https://github.com/vuejs/composition-api)プラグインを使用してください。Vue 3 においては、 単一ファイルコンポーネント内で  [`<script setup>`](/api/sfc-script-setup.html) 構文を書くことで使えます。以下は Composition API を使った簡単なコンポーネントの例です。
+Composition API は Vue 3 と [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html) の組み込み機能です。Vue 2 の古いバージョンでは、公式にメンテナンスされている[`@vue/composition-api`](https://github.com/vuejs/composition-api)プラグインを使用してください。Vue 3 においては、 単一ファイルコンポーネント内で  [`<script setup>`](/api/sfc-script-setup) 構文を書くことで使えます。以下は Composition API を使った簡単なコンポーネントの例です。
 
 ```vue
 <script setup>
@@ -53,9 +53,9 @@ Vue の Composition API の使い方について興味があるようでした
 
 ### より良いロジックの再利用 {#better-logic-reuse}
 
-Composition API の最大の利点は [コンポーザブル関数](/guide/reusability/composables.html)の形式で、クリーンかつ効率的にロジックを再利用できることです。これは Options API の主要なロジック再利用メカニズムであった[ミックスインの欠点を全て](/guide/reusability/composables.html#vs-mixins)解決しています。
+Composition API の最大の利点は [コンポーザブル関数](/guide/reusability/composables)の形式で、クリーンかつ効率的にロジックを再利用できることです。これは Options API の主要なロジック再利用メカニズムであった[ミックスインの欠点を全て](/guide/reusability/composables#vs-mixins)解決しています。
 
-Composition API のロジック再利用性は [VueUse](https://vueuse.org/) のようなすばらしいコミュニティープロジェクトを生み出し、コンポーザブルの利便性を広める存在を増やし続けています。クリーンなメカニズムによってサードパーティーサービス・ライブラリーと Vue のリアクティブ機能との安定した統合も容易にしてくれています、例えば[イミュータブルなデータ](/guide/extras/reactivity-in-depth.html#immutable-data)、[ステートマシン](/guide/extras/reactivity-in-depth.html#state-machines)、そして [RxJS](https://vueuse.org/rxjs/readme.html#vueuse-rxjs) などです。
+Composition API のロジック再利用性は [VueUse](https://vueuse.org/) のようなすばらしいコミュニティープロジェクトを生み出し、コンポーザブルの利便性を広める存在を増やし続けています。クリーンなメカニズムによってサードパーティーサービス・ライブラリーと Vue のリアクティブ機能との安定した統合も容易にしてくれています、例えば[イミュータブルなデータ](/guide/extras/reactivity-in-depth#immutable-data)、[ステートマシン](/guide/extras/reactivity-in-depth#state-machines)、そして [RxJS](https://vueuse.org/rxjs/readme.html#vueuse-rxjs) などです。
 
 ### より柔軟なコード整理 {#more-flexible-code-organization}
 
@@ -112,7 +112,7 @@ Composition API だけを使用したい場合は(上にあげたオプション
 
 ### 両方の API を一緒に使うことはできますか? {#can-i-use-both-apis-together}
 
-はい。 Options API のコンポーネント内で [`setup()`](/api/composition-api-setup.html) オプションを使用することで Composition API を使うことができます。
+はい。 Options API のコンポーネント内で [`setup()`](/api/composition-api-setup) オプションを使用することで Composition API を使うことができます。
 
 しかしながら、この方法は既存の Options API コードベースがあり、Composition API で書かれた新しい機能/外部ライブラリーと統合する必要がある場合にのみ採ることを推奨します。
 
diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md
index 0a1149263..5414bb722 100644
--- a/src/guide/extras/reactivity-in-depth.md
+++ b/src/guide/extras/reactivity-in-depth.md
@@ -102,7 +102,7 @@ function ref(value) {
 ここと以下のコードスニペットは、核となるコンセプトをできるだけシンプルに説明することを目的としているため、多くの詳細は省略され、エッジケースも無視されています。
 :::
 
-これは基礎のセクションで説明したいくつかの[リアクティブオブジェクトの制限](/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive)を説明するものです:
+これは基礎のセクションで説明したいくつかの[リアクティブオブジェクトの制限](/guide/essentials/reactivity-fundamentals#limitations-of-reactive)を説明するものです:
 
 - リアクティブオブジェクトのプロパティをローカル変数に割り当てたり分割代入した場合、ローカル変数へのアクセスはプロキシーが仕込んだ get/set をトリガーしなくなるため、リアクティビティーが"切断"されます。
 
@@ -151,7 +151,7 @@ function whenDepsChange(update) {
 
 この時点で、依存関係を自動的に追跡し、依存関係が変更されるたびに再実行する作用が作成しました。これを **リアクティブ作用（Reactive Effect）** と呼びます。
 
-Vue はリアクティブ作用を作成するための API を提供しています: [`watchEffect()`](/api/reactivity-core.html#watcheffect)。実際、この例にある魔法のような `whenDepsChange()` とかなり似た動きをすることに気づくかもしれません。これで、実際の Vue の API を使って最初のサンプルを作り直すことができます:
+Vue はリアクティブ作用を作成するための API を提供しています: [`watchEffect()`](/api/reactivity-core#watcheffect)。実際、この例にある魔法のような `whenDepsChange()` とかなり似た動きをすることに気づくかもしれません。これで、実際の Vue の API を使って最初のサンプルを作り直すことができます:
 
 ```js
 import { ref, watchEffect } from 'vue'
@@ -212,7 +212,7 @@ Vue のリアクティビティーシステムは、主にランタイムベー
 
 [Svelte](https://svelte.dev/) のような一部のフレームワークは、コンパイル時のリアクティビティーを実装することで、そのような制限を克服することを選択しています。リアクティビティーをシミュレートするためにコードを分析および変換します。コンパイルステップにより、フレームワークは JavaScript 自体のセマンティクスを変更できます。例えば、依存関係の解析やローカル定義された変数へのアクセスに関する作用トリガーを実行するコードを暗黙のうちに注入できます。欠点は、このような変換にはビルドステップが必要であり、また JavaScript のセマンティクスを変更するということは、本質的には「JavaScript のように見えるが別のものにコンパイルされる言語を作成すること」になります。
 
-Vue チームは、[Reactivity Transform](/guide/extras/reactivity-transform.html) という実験的な機能を通じてこの方向性を模索しましたが、最終的には[こういった理由](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028)で、このプロジェクトには適していないだろうと判断しました。
+Vue チームは、[Reactivity Transform](/guide/extras/reactivity-transform) という実験的な機能を通じてこの方向性を模索しましたが、最終的には[こういった理由](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028)で、このプロジェクトには適していないだろうと判断しました。
 
 ## リアクティビティーのデバッグ {#reactivity-debugging}
 
@@ -344,7 +344,7 @@ watchEffect(callback, {
 
 Vue のリアクティビティーシステムは、プレーンな JavaScript オブジェクトをリアクティブなプロキシーに綿密に変換することで機能します。外部の状態管理システムと統合する場合（例えば、外部のソリューションもプロキシーを使用する場合）、この変換は不要になることがあり、時には望ましくないことになります。
 
-Vue のリアクティビティーシステムを外部の状態管理ソリューションと統合する一般的な方法は、外部の状態を [`shallowRef`](/api/reactivity-advanced.html#shallowref) で保持することです。shallow ref は `.value` プロパティにアクセスしたときのみリアクティブになり、内部の値はそのまま残されます。外部の状態が変化したら、更新をトリガーするために ref の値を置き換えます。
+Vue のリアクティビティーシステムを外部の状態管理ソリューションと統合する一般的な方法は、外部の状態を [`shallowRef`](/api/reactivity-advanced#shallowref) で保持することです。shallow ref は `.value` プロパティにアクセスしたときのみリアクティブになり、内部の値はそのまま残されます。外部の状態が変化したら、更新をトリガーするために ref の値を置き換えます。
 
 ### イミュータブルなデータ {#immutable-data}
 
@@ -409,11 +409,11 @@ export function useMachine(options) {
 
 基本的に、シグナルは Vue の ref と同じ種類のリアクティビティープリミティブです。これは、アクセス時の依存関係の追跡と、変更時の副作用のトリガーを提供する値コンテナーです。このリアクティビティープリミティブベースのパラダイムは、フロントエンドの世界においては特に新しい概念ではなく、10 年以上前の [Knockout observables](https://knockoutjs.com/documentation/observables.html) や [Meteor Tracker](https://docs.meteor.com/api/tracker.html) のような実装に遡ることができます。Vue の Options API や React の状態管理ライブラリーである [MobX](https://mobx.js.org/) も同じ原理に基づいていますが、オブジェクトプロパティの裏側にあるプリミティブを隠しています。
 
-シグナルとして認定されるために必要な特性ではありませんが、今日、この概念はきめ細かいサブスクリプションを通じて更新が実行されるレンダリングモデルと一緒に議論されることがよくあります。仮想 DOM を使用しているため、Vue は現在、[コンパイラーに依存して同様の最適化を実現しています](/guide/extras/rendering-mechanism.html#compiler-informed-virtual-dom)。しかし、仮想 DOM に依存せず、Vue の組み込みのリアクティビティーシステムをより活用する、Solid にインスパイアされた新しいコンパイル戦略（Vapor モード）も模索しています。
+シグナルとして認定されるために必要な特性ではありませんが、今日、この概念はきめ細かいサブスクリプションを通じて更新が実行されるレンダリングモデルと一緒に議論されることがよくあります。仮想 DOM を使用しているため、Vue は現在、[コンパイラーに依存して同様の最適化を実現しています](/guide/extras/rendering-mechanism#compiler-informed-virtual-dom)。しかし、仮想 DOM に依存せず、Vue の組み込みのリアクティビティーシステムをより活用する、Solid にインスパイアされた新しいコンパイル戦略（Vapor モード）も模索しています。
 
 ### API 設計のトレードオフ {#api-design-trade-offs}
 
-Preact と Qwik のシグナルの設計は Vue の [shallowRef](/api/reactivity-advanced.html#shallowref) に非常に似ています。3 つとも `.value` プロパティを介してミュータブルなインターフェースを提供しています。Solid と Angular のシグナルについて考察してみます。
+Preact と Qwik のシグナルの設計は Vue の [shallowRef](/api/reactivity-advanced#shallowref) に非常に似ています。3 つとも `.value` プロパティを介してミュータブルなインターフェースを提供しています。Solid と Angular のシグナルについて考察してみます。
 
 #### Solid のシグナル {#solid-signals}
 
diff --git a/src/guide/extras/reactivity-transform.md b/src/guide/extras/reactivity-transform.md
index 481c6fde0..cced0572e 100644
--- a/src/guide/extras/reactivity-transform.md
+++ b/src/guide/extras/reactivity-transform.md
@@ -50,11 +50,11 @@ function increment() {
 
 ref を返す各リアクティビティー API に `$` で始まるマクロに相当するものがあります。これらの API には次のものが含まれます:
 
-- [`ref`](/api/reactivity-core.html#ref) -> `$ref`
-- [`computed`](/api/reactivity-core.html#computed) -> `$computed`
-- [`shallowRef`](/api/reactivity-advanced.html#shallowref) -> `$shallowRef`
-- [`customRef`](/api/reactivity-advanced.html#customref) -> `$customRef`
-- [`toRef`](/api/reactivity-utilities.html#toref) -> `$toRef`
+- [`ref`](/api/reactivity-core#ref) -> `$ref`
+- [`computed`](/api/reactivity-core#computed) -> `$computed`
+- [`shallowRef`](/api/reactivity-advanced#shallowref) -> `$shallowRef`
+- [`customRef`](/api/reactivity-advanced#customref) -> `$customRef`
+- [`toRef`](/api/reactivity-utilities#toref) -> `$toRef`
 
 これらのマクロは Reactivity Transform が有効であればグローバルに利用可能でインポート不要ですが、より明示的にしたい場合は任意で `vue/macros` からインポートできます:
 
@@ -111,7 +111,7 @@ let count = $(myCreateRef())
 
 1. `.value` と同様、リアクティビティーを維持するために常に `props.x` でプロパティにアクセスする必要があります。分割代入された変数はリアクティブではなく更新されないため、`defineProps` は分割代入できないのです。
 
-2. [型のみのプロパティ宣言](/api/sfc-script-setup.html#typescript-only-features)を使う場合、プロパティのデフォルト値を宣言するための簡単な方法はありません。この目的のために `withDefaults()` を導入しましたが、まだ使い勝手が悪いです。
+2. [型のみのプロパティ宣言](/api/sfc-script-setup#typescript-only-features)を使う場合、プロパティのデフォルト値を宣言するための簡単な方法はありません。この目的のために `withDefaults()` を導入しましたが、まだ使い勝手が悪いです。
 
 これまで見てきた `$()` の事例と同様に、`defineProps` が分割代入された場合にはコンパイル時の変換を適用することで、この問題を処理できます:
 
diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
index 4608d91a8..142b61ce7 100644
--- a/src/guide/extras/render-function.md
+++ b/src/guide/extras/render-function.md
@@ -6,7 +6,7 @@ outline: deep
 
 Vue は、ほとんどの場合、アプリケーションを構築するためにテンプレートを使用することを推奨しています。しかし、JavaScript の完全なプログラムの力が必要な状況もあります。そこで、**レンダー関数** を使用します。
 
-> 仮想 DOM やレンダー関数の概念に初めて触れる方は、まず[レンダリングの仕組み](/guide/extras/rendering-mechanism.html)の章を必ずお読みください。
+> 仮想 DOM やレンダー関数の概念に初めて触れる方は、まず[レンダリングの仕組み](/guide/extras/rendering-mechanism)の章を必ずお読みください。
 
 ## 基本的な使い方 {#basic-usage}
 
@@ -389,7 +389,7 @@ h('input', {
 />
 ```
 
-その他のイベントやキー修飾子については、[`withModifiers`](/api/render-function.html#withmodifiers) ヘルパーを使用することが可能です:
+その他のイベントやキー修飾子については、[`withModifiers`](/api/render-function#withmodifiers) ヘルパーを使用することが可能です:
 
 ```js
 import { withModifiers } from 'vue'
@@ -446,7 +446,7 @@ function render() {
 }
 ```
 
-コンポーネントが名前で登録されていて直接インポートできない場合 (例えば、ライブラリーによってグローバルに登録されている場合)、 [`resolveComponent()`](/api/render-function.html#resolvecomponent) ヘルパーを使ってプログラムで解決することが可能です。
+コンポーネントが名前で登録されていて直接インポートできない場合 (例えば、ライブラリーによってグローバルに登録されている場合)、 [`resolveComponent()`](/api/render-function#resolvecomponent) ヘルパーを使ってプログラムで解決することが可能です。
 
 ### スロットのレンダリング {#rendering-slots}
 
@@ -489,7 +489,7 @@ export default {
 </div>
 <div class="options-api">
 
-レンダー関数では、スロットは [`this.$slots`](/api/component-instance.html#slots) からアクセスすることができます。
+レンダー関数では、スロットは [`this.$slots`](/api/component-instance#slots) からアクセスすることができます。
 
 ```js
 export default {
@@ -559,7 +559,7 @@ h(MyComponent, null, {
 
 ### 組み込みコンポーネント {#built-in-components}
 
-レンダー関数で使用するためには、`<KeepAlive>`, `<Transition>`, `<TransitionGroup>`, `<Teleport>`, `<Suspense>` などの [組み込みコンポーネント](/api/built-in-components.html) をインポートする必要があります。
+レンダー関数で使用するためには、`<KeepAlive>`, `<Transition>`, `<TransitionGroup>`, `<Teleport>`, `<Suspense>` などの [組み込みコンポーネント](/api/built-in-components) をインポートする必要があります。
 
 <div class="composition-api">
 
@@ -628,7 +628,7 @@ export default {
 
 ### カスタムディレクティブ {#custom-directives}
 
-カスタムディレクティブは、[`withDirectives`](/api/render-function.html#withdirectives)を使って vnode に適用することが可能です:
+カスタムディレクティブは、[`withDirectives`](/api/render-function#withdirectives)を使って vnode に適用することが可能です:
 
 ```js
 import { h, withDirectives } from 'vue'
@@ -645,7 +645,7 @@ const vnode = withDirectives(h('div'), [
 ])
 ```
 
-ディレクティブが名前で登録されていて、直接インポートできない場合は、[`resolveDirective`](/api/render-function.html#resolvedirective) ヘルパーを使って解決することが可能です。
+ディレクティブが名前で登録されていて、直接インポートできない場合は、[`resolveDirective`](/api/render-function#resolvedirective) ヘルパーを使って解決することが可能です。
 
 ## 関数型コンポーネント {#functional-components}
 
@@ -674,11 +674,11 @@ function MyComponent(props, context) {
 }
 ```
 
-第二引数の `context` には、3 つのプロパティが含まれます。 `attrs` , `emit` , そして `slots` です。これらはそれぞれ、インスタンスのプロパティである [`$attrs`](/api/component-instance.html#attrs), [`$emit`](/api/component-instance.html#emit), および [`$slots`](/api/component-instance.html#slots) と同じです。
+第二引数の `context` には、3 つのプロパティが含まれます。 `attrs` , `emit` , そして `slots` です。これらはそれぞれ、インスタンスのプロパティである [`$attrs`](/api/component-instance#attrs), [`$emit`](/api/component-instance#emit), および [`$slots`](/api/component-instance#slots) と同じです。
 
 </div>
 
-コンポーネントに対する通常の設定オプションのほとんどは、関数型コンポーネントでは使用できません。しかし、[`props`](/api/options-state.html#props) と [`emits`](/api/options-state.html#emits) はプロパティとして追加することで定義することが可能です:
+コンポーネントに対する通常の設定オプションのほとんどは、関数型コンポーネントでは使用できません。しかし、[`props`](/api/options-state#props) と [`emits`](/api/options-state#emits) はプロパティとして追加することで定義することが可能です:
 
 ```js
 MyComponent.props = ['value']
@@ -687,7 +687,7 @@ MyComponent.emits = ['click']
 
 `props` オプションが指定されていない場合、関数に渡される `props` オブジェクトには、`attrs` と同じようにすべての属性が含まれます。`props` オプションが指定されない限り、prop の名前はキャメルケースに正規化されません。
 
-明示的に `props` を指定した関数型コンポーネントの場合、[属性のフォールスルー](/guide/components/attrs.html)は通常のコンポーネントとほぼ同じように動作します。しかし、`props` を明示的に指定しない関数型コンポーネントの場合は、`class`、`style`、`onXxx` イベントリスナーのみがデフォルトで `attrs` から継承されます。どちらの場合でも、 `inheritAttrs` を `false` に設定することで、属性の継承を無効化できます。
+明示的に `props` を指定した関数型コンポーネントの場合、[属性のフォールスルー](/guide/components/attrs)は通常のコンポーネントとほぼ同じように動作します。しかし、`props` を明示的に指定しない関数型コンポーネントの場合は、`class`、`style`、`onXxx` イベントリスナーのみがデフォルトで `attrs` から継承されます。どちらの場合でも、 `inheritAttrs` を `false` に設定することで、属性の継承を無効化できます。
 
 ```js
 MyComponent.inheritAttrs = false
diff --git a/src/guide/extras/rendering-mechanism.md b/src/guide/extras/rendering-mechanism.md
index eb896d93f..642480aa6 100644
--- a/src/guide/extras/rendering-mechanism.md
+++ b/src/guide/extras/rendering-mechanism.md
@@ -185,7 +185,7 @@ div (block root)
 
 ### SSR ハイドレーションへの影響 {#impact-on-ssr-hydration}
 
-パッチフラグとツリーのフラット化により、Vue の[SSR ハイドレーション](/guide/scaling-up/ssr.html#client-hydration) のパフォーマンスが大幅に改善されます:
+パッチフラグとツリーのフラット化により、Vue の[SSR ハイドレーション](/guide/scaling-up/ssr#client-hydration) のパフォーマンスが大幅に改善されます:
 
 - 単一要素ハイドレーションは対応する vnode パッチフラグに基づき高速にパスを取得できます。
 
diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md
index b664ac78c..39f02ce04 100644
--- a/src/guide/extras/web-components.md
+++ b/src/guide/extras/web-components.md
@@ -10,7 +10,7 @@ Vue は[カスタム要素の全てのテストにおいてスコアは 100% 完
 
 ### コンポーネント解決のスキップ {#skipping-component-resolution}
 
-デフォルトで Vue はカスタム要素をレンダリングするためのフォールバックをする前に、ネイティブではない HTML タグを登録された Vue コンポーネントとして解決しようとします。これにより、開発中に Vue が "failed to resolve component" という警告を出す原因となります。特定の要素をカスタム要素として扱い、Vue にコンポーネントの解決をスキップすることを知らせるために、[`compilerOptions.isCustomElement` オプション](/api/application.html#app-config-compileroptions)を指定できます。
+デフォルトで Vue はカスタム要素をレンダリングするためのフォールバックをする前に、ネイティブではない HTML タグを登録された Vue コンポーネントとして解決しようとします。これにより、開発中に Vue が "failed to resolve component" という警告を出す原因となります。特定の要素をカスタム要素として扱い、Vue にコンポーネントの解決をスキップすることを知らせるために、[`compilerOptions.isCustomElement` オプション](/api/application#app-config-compileroptions)を指定できます。
 
 もし Vue をビルドセットアップで使用している場合、このオプションはコンパイル時のオプションであるため、ビルド設定経由で渡す必要があります。
 
@@ -81,7 +81,7 @@ DOM 属性は文字列のみしか扱えないため、複雑なデータをカ
 
 ### defineCustomElement {#definecustomelement}
 
-Vue は [`defineCustomElement`](/api/general.html#definecustomelement) メソッドを介したまったく同じ Vue コンポーネント API 群を使ってカスタム要素の作成をサポートします。このメソッドは [`defineComponent`](/api/general.html#definecomponent) と同じ引数を受け付けますが、代わりに `HTMLElement` を拡張したカスタム要素を返します:
+Vue は [`defineCustomElement`](/api/general#definecustomelement) メソッドを介したまったく同じ Vue コンポーネント API 群を使ってカスタム要素の作成をサポートします。このメソッドは [`defineComponent`](/api/general#definecomponent) と同じ引数を受け付けますが、代わりに `HTMLElement` を拡張したカスタム要素を返します:
 
 ```vue-html
 <my-vue-element></my-vue-element>
@@ -157,7 +157,7 @@ document.body.appendChild(
 
 コンポーネント内部では、通常通り `<slot/>` 要素を使ってスロットをレンダリングすることができます。しかし、生成された要素を使うときは、[ネイティブのスロット構文](https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_templates_and_slots)しか受け付けません。
 
-- [スコープ付きスロット](/guide/components/slots.html#scoped-slots)はサポートされていません。
+- [スコープ付きスロット](/guide/components/slots#scoped-slots)はサポートされていません。
 
 - 名前付きスロットを渡すときは、`v-slot` ディレクティブの代わりに `slot` 属性を使用します:
 
@@ -169,7 +169,7 @@ document.body.appendChild(
 
 #### Provide / Inject {#provide-inject}
 
-[Provide / Inject API](/guide/components/provide-inject.html#provide-inject) と [Composition API](/api/composition-api-dependency-injection.html#provide) も、Vue で定義されたカスタム要素間で動作します。しかしながら、これは**カスタム要素間**のみ動作するということに注意してください。つまり、Vue で定義されたカスタム要素は、カスタム要素ではない Vue コンポーネントによってプロパティを注入することはできません。
+[Provide / Inject API](/guide/components/provide-inject#provide-inject) と [Composition API](/api/composition-api-dependency-injection#provide) も、Vue で定義されたカスタム要素間で動作します。しかしながら、これは**カスタム要素間**のみ動作するということに注意してください。つまり、Vue で定義されたカスタム要素は、カスタム要素ではない Vue コンポーネントによってプロパティを注入することはできません。
 
 ### カスタム要素としての SFC {#sfc-as-custom-element}
 
@@ -244,8 +244,8 @@ Vue のコンポーネントモデルは、これらのニーズを考慮して
 
 また、カスタム要素では限界があると感じる部分もあります:
 
-- スロットの評価時間が長いと、コンポーネントの構成を妨げます。Vue の[スコープ付きスロット](/guide/components/slots.html#scoped-slots)は、コンポーネント構成における強力なメカニズムですが、ネイティブスロットの先行性質のため、カスタム要素はサポートされません。先行スロットは、受信側のコンポーネントがスロットコンテンツの一部をレンダリングするタイミングやその有無を制御できないことを意味します。
+- スロットの評価時間が長いと、コンポーネントの構成を妨げます。Vue の[スコープ付きスロット](/guide/components/slots#scoped-slots)は、コンポーネント構成における強力なメカニズムですが、ネイティブスロットの先行性質のため、カスタム要素はサポートされません。先行スロットは、受信側のコンポーネントがスロットコンテンツの一部をレンダリングするタイミングやその有無を制御できないことを意味します。
 
-- 現在、shadow DOM にスコープされた CSS を持つカスタム要素を配布するには、実行時に shadow root に注入できるように、JavaScript 内に CSS を埋め込む必要があります。また、SSR のシナリオでは、マークアップに重複したスタイルが発生します。この分野は、[プラットフォーム機能](https://github.com/whatwg/html/pull/4898/)としての開発が進められていますが、現時点ではまだ一般的にサポートされているわけではなく、パフォーマンスや SSR の面でも解決すべき問題があります。一方で、Vue の SFC は、スタイルをプレーンな CSS ファイルに抽出することをサポートする [CSS スコープ化するメカニズム](/api/sfc-css-features.html)を提供しています。
+- 現在、shadow DOM にスコープされた CSS を持つカスタム要素を配布するには、実行時に shadow root に注入できるように、JavaScript 内に CSS を埋め込む必要があります。また、SSR のシナリオでは、マークアップに重複したスタイルが発生します。この分野は、[プラットフォーム機能](https://github.com/whatwg/html/pull/4898/)としての開発が進められていますが、現時点ではまだ一般的にサポートされているわけではなく、パフォーマンスや SSR の面でも解決すべき問題があります。一方で、Vue の SFC は、スタイルをプレーンな CSS ファイルに抽出することをサポートする [CSS スコープ化するメカニズム](/api/sfc-css-features)を提供しています。
 
 Vue は常に Web プラットフォームの最新の規格に対応しており、みなさんが開発しやすくなるのであれば、プラットフォームが提供するものを喜んで活用していきます。しかしながら、私たちの目標は今日でも十分に機能するソリューションを提供することです。つまり、批判的な考え方で新しいプラットフォームの機能を取り入れなければなりません。そのためには、今のうちに規格では不十分な部分を埋めておく必要があります。
diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md
index bd6396bb7..551b1cd80 100644
--- a/src/guide/quick-start.md
+++ b/src/guide/quick-start.md
@@ -20,7 +20,7 @@ footer: false
 - [Node.js](https://nodejs.org/ja/) のバージョン 16.0 以上をインストールすること
   :::
 
-このセクションでは、ローカルマシン上で Vue の[シングルページアプリケーション](/guide/extras/ways-of-using-vue.html#single-page-application-spa)を生成する方法を紹介します。作成されたプロジェクトは、[Vite](https://ja.vitejs.dev/) に基づいたビルド設定を使用し、Vue の単一ファイルコンポーネント（SFC）を使用できるようにします。
+このセクションでは、ローカルマシン上で Vue の[シングルページアプリケーション](/guide/extras/ways-of-using-vue#single-page-application-spa)を生成する方法を紹介します。作成されたプロジェクトは、[Vite](https://ja.vitejs.dev/) に基づいたビルド設定を使用し、Vue の単一ファイルコンポーネント（SFC）を使用できるようにします。
 
 [Node.js](https://nodejs.org/) の最新バージョンがインストールされていることを確認してから、コマンドラインで次のコマンドを（`>` 記号なしで）実行します:
 
@@ -48,19 +48,19 @@ footer: false
 <span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm run dev</span></span>
 <span class="line"></span></code></pre></div>
 
-あなたの初めての Vue プロジェクトが今実行されているはずです！　なお、生成されたプロジェクトのサンプルコンポーネントは、[Options API](/guide/introduction.html#options-api) ではなく、[Composition API](/guide/introduction.html#composition-api) と `<script setup>` で書かれていることに注意してください。いくつか追加のヒントをどうぞ:
+あなたの初めての Vue プロジェクトが今実行されているはずです！　なお、生成されたプロジェクトのサンプルコンポーネントは、[Options API](/guide/introduction#options-api) ではなく、[Composition API](/guide/introduction#composition-api) と `<script setup>` で書かれていることに注意してください。いくつか追加のヒントをどうぞ:
 
-- IDE の推奨構成は [Visual Studio Code](https://code.visualstudio.com/) + [Volar extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) です。他のエディターを使用している場合は、[IDE のサポート](/guide/scaling-up/tooling.html#ide-support)を確認してください。
-- バックエンドフレームワークとの統合を含む、ツールのさらなる詳細については、[ツールガイド](/guide/scaling-up/tooling.html) で説明しています。
+- IDE の推奨構成は [Visual Studio Code](https://code.visualstudio.com/) + [Volar extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) です。他のエディターを使用している場合は、[IDE のサポート](/guide/scaling-up/tooling#ide-support)を確認してください。
+- バックエンドフレームワークとの統合を含む、ツールのさらなる詳細については、[ツールガイド](/guide/scaling-up/tooling) で説明しています。
 - 基礎となっているビルドツール Vite について学ぶには、[Vite のドキュメント](https://ja.vitejs.dev/) を確認しましょう。
-- もし TypeScript を使うことを選択したなら、[TypeScript の使い方](typescript/overview.html) を確認しましょう。
+- もし TypeScript を使うことを選択したなら、[TypeScript の使い方](typescript/overview) を確認しましょう。
 
 あなたのアプリをプロダクション環境に出す準備ができたら、以下を実行してください:
 
 <div class="language-sh"><pre><code><span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm run build</span></span>
 <span class="line"></span></code></pre></div>
 
-これであなたのアプリのプロダクション向けビルドがプロジェクトの `./dist` ディレクトリーに作成されます。プロダクション環境への出荷についてさらに学ぶには [プロダクション環境への配信](/guide/best-practices/production-deployment.html) を確認してください。
+これであなたのアプリのプロダクション向けビルドがプロジェクトの `./dist` ディレクトリーに作成されます。プロダクション環境への出荷についてさらに学ぶには [プロダクション環境への配信](/guide/best-practices/production-deployment) を確認してください。
 
 [次のステップ ＞](#次のステップ)
 
@@ -171,7 +171,7 @@ Firefox を使用している場合、バージョン 108+ ではデフォルト
 :::
 
 :::warning プロダクション使用の注意
-ここまでの例では、Vue の開発ビルドを使用しています。プロダクションで CDN から Vue を使用する場合は、[プロダクション環境への配信](/guide/best-practices/production-deployment.html#without-build-tools)を確認してください。
+ここまでの例では、Vue の開発ビルドを使用しています。プロダクションで CDN から Vue を使用する場合は、[プロダクション環境への配信](/guide/best-practices/production-deployment#without-build-tools)を確認してください。
 :::
 
 ### モジュールの分割 {#splitting-up-the-modules}
@@ -208,7 +208,7 @@ ES モジュールは `file://` プロトコルでは動作しないため、上
 
 ### ビルドステップなしで Composition API を使用する {#using-composition-api-without-a-build-step}
 
-Composition API の例の多くは `<script setup>` 構文を使用しています。Composition API をビルドなしで使用する場合は、[`setup()` オプション](/api/composition-api-setup.html)の使用方法を参照してください。
+Composition API の例の多くは `<script setup>` 構文を使用しています。Composition API をビルドなしで使用する場合は、[`setup()` オプション](/api/composition-api-setup)の使用方法を参照してください。
 
 ## 次のステップ {#next-steps}
 
diff --git a/src/guide/reusability/composables.md b/src/guide/reusability/composables.md
index ddd3ece9e..1a3abdcc1 100644
--- a/src/guide/reusability/composables.md
+++ b/src/guide/reusability/composables.md
@@ -6,7 +6,7 @@ const { x, y } = useMouse()
 </script>
 
 :::tip
-このセクションは Composition API の基本的な知識があることを前提としています。もし Vue を Options API のみで学んできた場合は、（左サイドバーの上部にあるトグルを使って）API 選択を Composition API に設定し、[リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals.html)と[ライフサイクルフック](/guide/essentials/lifecycle.html)の章を読み直すとよいでしょう。
+このセクションは Composition API の基本的な知識があることを前提としています。もし Vue を Options API のみで学んできた場合は、（左サイドバーの上部にあるトグルを使って）API 選択を Composition API に設定し、[リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals)と[ライフサイクルフック](/guide/essentials/lifecycle)の章を読み直すとよいでしょう。
 :::
 
 ## 「コンポーザブル」とは？ {#what-is-a-composable}
@@ -125,7 +125,7 @@ export function useMouse() {
 ```
 
 :::tip
-`useMouse()` を呼び出すコンポーネントの各インスタンスは、`x` と `y` の状態のコピーを独自に作成するので、互いに干渉することはありません。もしコンポーネント間で共有する状態を管理したい場合は、[状態管理](/guide/scaling-up/state-management.html)の章を読んでください。
+`useMouse()` を呼び出すコンポーネントの各インスタンスは、`x` と `y` の状態のコピーを独自に作成するので、互いに干渉することはありません。もしコンポーネント間で共有する状態を管理したい場合は、[状態管理](/guide/scaling-up/state-management)の章を読んでください。
 :::
 
 ## 非同期の状態の例 {#async-state-example}
@@ -218,7 +218,7 @@ export function useFetch(url) {
 }
 ```
 
-このバージョンの `useFetch()` は静的な URL 文字列と、URL 文字列の ref のどちらも受け付けるようになりました。[`isRef()`](/api/reactivity-utilities.html#isref) を使って URL が動的な ref だと判別した場合、[`watchEffect()`](/api/reactivity-core.html#watcheffect) を使ってリアクティブな副作用をセットアップします。この副作用は即時に実行され、URL の ref を依存関係として追跡します。URL の ref が変更されるたび、データをリセットし再度取得します。
+このバージョンの `useFetch()` は静的な URL 文字列と、URL 文字列の ref のどちらも受け付けるようになりました。[`isRef()`](/api/reactivity-utilities#isref) を使って URL が動的な ref だと判別した場合、[`watchEffect()`](/api/reactivity-core#watcheffect) を使ってリアクティブな副作用をセットアップします。この副作用は即時に実行され、URL の ref を依存関係として追跡します。URL の ref が変更されるたび、データをリセットし再度取得します。
 
 これが [`useFetch()` の更新バージョン](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiwgY29tcHV0ZWQgfSBmcm9tICd2dWUnXG5pbXBvcnQgeyB1c2VGZXRjaCB9IGZyb20gJy4vdXNlRmV0Y2guanMnXG5cbmNvbnN0IGJhc2VVcmwgPSAnaHR0cHM6Ly9qc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3RvZG9zLydcbmNvbnN0IGlkID0gcmVmKCcxJylcbmNvbnN0IHVybCA9IGNvbXB1dGVkKCgpID0+IGJhc2VVcmwgKyBpZC52YWx1ZSlcblxuY29uc3QgeyBkYXRhLCBlcnJvciwgcmV0cnkgfSA9IHVzZUZldGNoKHVybClcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIExvYWQgcG9zdCBpZDpcbiAgPGJ1dHRvbiB2LWZvcj1cImkgaW4gNVwiIEBjbGljaz1cImlkID0gaVwiPnt7IGkgfX08L2J1dHRvbj5cblxuXHQ8ZGl2IHYtaWY9XCJlcnJvclwiPlxuICAgIDxwPk9vcHMhIEVycm9yIGVuY291bnRlcmVkOiB7eyBlcnJvci5tZXNzYWdlIH19PC9wPlxuICAgIDxidXR0b24gQGNsaWNrPVwicmV0cnlcIj5SZXRyeTwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiB2LWVsc2UtaWY9XCJkYXRhXCI+RGF0YSBsb2FkZWQ6IDxwcmU+e3sgZGF0YSB9fTwvcHJlPjwvZGl2PlxuICA8ZGl2IHYtZWxzZT5Mb2FkaW5nLi4uPC9kaXY+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0iLCJ1c2VGZXRjaC5qcyI6ImltcG9ydCB7IHJlZiwgaXNSZWYsIHVucmVmLCB3YXRjaEVmZmVjdCB9IGZyb20gJ3Z1ZSdcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZldGNoKHVybCkge1xuICBjb25zdCBkYXRhID0gcmVmKG51bGwpXG4gIGNvbnN0IGVycm9yID0gcmVmKG51bGwpXG5cbiAgYXN5bmMgZnVuY3Rpb24gZG9GZXRjaCgpIHtcbiAgICAvLyByZXNldCBzdGF0ZSBiZWZvcmUgZmV0Y2hpbmcuLlxuICAgIGRhdGEudmFsdWUgPSBudWxsXG4gICAgZXJyb3IudmFsdWUgPSBudWxsXG4gICAgXG4gICAgLy8gcmVzb2x2ZSB0aGUgdXJsIHZhbHVlIHN5bmNocm9ub3VzbHkgc28gaXQncyB0cmFja2VkIGFzIGFcbiAgICAvLyBkZXBlbmRlbmN5IGJ5IHdhdGNoRWZmZWN0KClcbiAgICBjb25zdCB1cmxWYWx1ZSA9IHVucmVmKHVybClcbiAgICBcbiAgICB0cnkge1xuICAgICAgLy8gYXJ0aWZpY2lhbCBkZWxheSAvIHJhbmRvbSBlcnJvclxuICBcdCAgYXdhaXQgdGltZW91dCgpXG4gIFx0ICAvLyB1bnJlZigpIHdpbGwgcmV0dXJuIHRoZSByZWYgdmFsdWUgaWYgaXQncyBhIHJlZlxuXHQgICAgLy8gb3RoZXJ3aXNlIHRoZSB2YWx1ZSB3aWxsIGJlIHJldHVybmVkIGFzLWlzXG4gICAgXHRjb25zdCByZXMgPSBhd2FpdCBmZXRjaCh1cmxWYWx1ZSlcblx0ICAgIGRhdGEudmFsdWUgPSBhd2FpdCByZXMuanNvbigpXG4gICAgfSBjYXRjaCAoZSkge1xuICAgICAgZXJyb3IudmFsdWUgPSBlXG4gICAgfVxuICB9XG5cbiAgaWYgKGlzUmVmKHVybCkpIHtcbiAgICAvLyBzZXR1cCByZWFjdGl2ZSByZS1mZXRjaCBpZiBpbnB1dCBVUkwgaXMgYSByZWZcbiAgICB3YXRjaEVmZmVjdChkb0ZldGNoKVxuICB9IGVsc2Uge1xuICAgIC8vIG90aGVyd2lzZSwganVzdCBmZXRjaCBvbmNlXG4gICAgZG9GZXRjaCgpXG4gIH1cblxuICByZXR1cm4geyBkYXRhLCBlcnJvciwgcmV0cnk6IGRvRmV0Y2ggfVxufVxuXG4vLyBhcnRpZmljaWFsIGRlbGF5XG5mdW5jdGlvbiB0aW1lb3V0KCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKE1hdGgucmFuZG9tKCkgPiAwLjMpIHtcbiAgICAgICAgcmVzb2x2ZSgpXG4gICAgICB9IGVsc2Uge1xuICAgICAgICByZWplY3QobmV3IEVycm9yKCdSYW5kb20gRXJyb3InKSlcbiAgICAgIH1cbiAgICB9LCAzMDApXG4gIH0pXG59In0=)で、デモ用に人工的な遅延とランダムなエラーが発生します。
 
@@ -230,7 +230,7 @@ export function useFetch(url) {
 
 ### 入力引数 {#input-arguments}
 
-コンポーザブルはリアクティビティーに依存しない場合でも ref の引数を受け取れます。もし他の開発者が使うかも知れないコンポーザブルを書くのなら、入力引数が生の値ではなく ref である場合にも対応するとよいでしょう。[`unref()`](/api/reactivity-utilities.html#unref) ユーティリティー関数はその用途に便利です:
+コンポーザブルはリアクティビティーに依存しない場合でも ref の引数を受け取れます。もし他の開発者が使うかも知れないコンポーザブルを書くのなら、入力引数が生の値ではなく ref である場合にも対応するとよいでしょう。[`unref()`](/api/reactivity-utilities#unref) ユーティリティー関数はその用途に便利です:
 
 ```js
 import { unref } from 'vue'
@@ -271,7 +271,7 @@ Mouse position is at: {{ mouse.x }}, {{ mouse.y }}
 
 コンポーザブルで副作用（例: DOM イベントリスナーの登録やデータの取得）を起こすことは問題ありませんが、次のルールに注意してください:
 
-- [サーバーサイドレンダリング](/guide/scaling-up/ssr.html) (SSR) を利用したアプリケーションで作業している場合、DOM 固有の副作用は必ず `onMounted()` のようなマウント後のライフサイクルフック内で実行するようにしてください。これらのフックはブラウザーでしか呼び出されないので、そのコード内では DOM にアクセスできることが保証されます。
+- [サーバーサイドレンダリング](/guide/scaling-up/ssr) (SSR) を利用したアプリケーションで作業している場合、DOM 固有の副作用は必ず `onMounted()` のようなマウント後のライフサイクルフック内で実行するようにしてください。これらのフックはブラウザーでしか呼び出されないので、そのコード内では DOM にアクセスできることが保証されます。
 
 - `onUnmounted()` で副作用をクリーンアップすることを忘れないでください。例えば、コンポーザブルが DOM イベントリスナーを登録したなら、`useMouse()` の例で見てきたように `onUnmounted()` でそのリスナーを削除しないといけません。`useEventListener()` の例のように、自動的にそれをやってくれるコンポーザブルを使うのもよいでしょう。
 
@@ -333,7 +333,7 @@ export default {
 
 ### vs. ミックスイン {#vs-mixins}
 
-Vue 2 からのユーザーは、[mixins](/api/options-composition.html#mixins) オプションに慣れ親しんでいるかも知れません。これもコンポーネントのロジックを再利用可能なユニットに抽出することができます。ミックスインには 3 つの主要な欠点があります:
+Vue 2 からのユーザーは、[mixins](/api/options-composition#mixins) オプションに慣れ親しんでいるかも知れません。これもコンポーネントのロジックを再利用可能なユニットに抽出することができます。ミックスインには 3 つの主要な欠点があります:
 
 1. **プロパティの発生元が不明確**: 多くのミックスインを使うと、インスタンスのプロパティがどのミックスインから注入されたのが不明確になり、実装を追ったりコンポーネントの動作を理解するのが難しくなります。このことはコンポーザブルに ref + 分割代入のパターンをおすすめする理由でもあり、利用するコンポーネント内でプロパティの発生元が明確になります。
 
@@ -345,7 +345,7 @@ Vue 2 からのユーザーは、[mixins](/api/options-composition.html#mixins)
 
 ### vs. レンダーレスコンポーネント {#vs-renderless-components}
 
-コンポーネントスロットの章で、スコープ付きスロットに基づく[レンダーレスコンポーネント](/guide/components/slots.html#renderless-components)パターンについて検討しました。またレンダーレスコンポーネントを使って、同じマウストラッキングのデモを実装しました。
+コンポーネントスロットの章で、スコープ付きスロットに基づく[レンダーレスコンポーネント](/guide/components/slots#renderless-components)パターンについて検討しました。またレンダーレスコンポーネントを使って、同じマウストラッキングのデモを実装しました。
 
 レンダーレスコンポーネントに対するコンポーザブルの利点は、余分なコンポーネントインスタンスのオーバーヘッドがないことです。アプリケーション全体に渡って使われる場合、レンダーレスコンポーネントのパターンで余計に作られるコンポーネントインスタンスの量は、顕著なパフォーマンスのオーバーヘッドになりえます。
 
@@ -357,7 +357,7 @@ Vue 2 からのユーザーは、[mixins](/api/options-composition.html#mixins)
 
 ## 参考文献 {#further-reading}
 
-- [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html): Vue のリアクティビティーシステムがどのように動作をするのかを、より具体的に理解する。
-- [状態管理](/guide/scaling-up/state-management.html): 複数コンポーネントで共有する状態を管理するためのパターン。
-- [コンポーザブルのテスト](/guide/scaling-up/testing.html#testing-composables): コンポーザブルをユニットテストするためのコツ。
+- [リアクティビティーの探求](/guide/extras/reactivity-in-depth): Vue のリアクティビティーシステムがどのように動作をするのかを、より具体的に理解する。
+- [状態管理](/guide/scaling-up/state-management): 複数コンポーネントで共有する状態を管理するためのパターン。
+- [コンポーザブルのテスト](/guide/scaling-up/testing#testing-composables): コンポーザブルをユニットテストするためのコツ。
 - [VueUse](https://vueuse.org/): 発展し続ける Vue コンポーザブル集。このソースコードも素晴らしい学習資料です。
diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index aa87c9470..dbeeee6ae 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -12,7 +12,7 @@ const vFocus = {
 
 コアに設定されているデフォルトのディレクティブのセット（`v-model` や `v-show` など)に加え、Vue では独自のカスタムディレクティブを登録することができます。
 
-Vue におけるコードの再利用として 2 つの方法を紹介してきました:[コンポーネント](/guide/essentials/component-basics.html)と[コンポーザブル](./composables)です。コンポーネントはメインブロックの構築、コンポーザブルはステートフルなロジックの再利用に重点を置いています。一方、カスタムディレクティブは主にプレーンな要素に対する低レベルの DOM アクセスを伴うロジックを再利用することを目的としています。
+Vue におけるコードの再利用として 2 つの方法を紹介してきました:[コンポーネント](/guide/essentials/component-basics)と[コンポーザブル](./composables)です。コンポーネントはメインブロックの構築、コンポーザブルはステートフルなロジックの再利用に重点を置いています。一方、カスタムディレクティブは主にプレーンな要素に対する低レベルの DOM アクセスを伴うロジックを再利用することを目的としています。
 
 カスタムディレクティブは、コンポーネントと同様のライフサイクルフックを含むオブジェクトとして定義されます。フックは、ディレクティブがバインドされている要素を受け取ります。以下は Vue によって要素が DOM に挿入されたときに入力欄にフォーカスするディレクティブの例です:
 
@@ -210,7 +210,7 @@ app.directive('demo', (el, binding) => {
 
 ## コンポーネントでの使い方 {#usage-on-components}
 
-コンポーネントで使用すると、[フォールスルー属性](/guide/components/attrs.html)と同様にカスタムディレクティブは常にコンポーネントのルートノードに適用されます。
+コンポーネントで使用すると、[フォールスルー属性](/guide/components/attrs)と同様にカスタムディレクティブは常にコンポーネントのルートノードに適用されます。
 
 ```vue-html
 <MyComponent v-demo="test" />
diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md
index 6b2869de1..18bc3364a 100644
--- a/src/guide/reusability/plugins.md
+++ b/src/guide/reusability/plugins.md
@@ -14,7 +14,7 @@ app.use(myPlugin, {
 })
 ```
 
-プラグインの定義は `install()` メソッドを公開するオブジェクトか、あるいは単にインストール関数として動作する関数です。インストール関数は[アプリケーションインスタンス](/api/application.html)と、`app.use()` に渡された追加のオプション（もしあれば）を受け取ります:
+プラグインの定義は `install()` メソッドを公開するオブジェクトか、あるいは単にインストール関数として動作する関数です。インストール関数は[アプリケーションインスタンス](/api/application)と、`app.use()` に渡された追加のオプション（もしあれば）を受け取ります:
 
 ```js
 const myPlugin = {
@@ -26,11 +26,11 @@ const myPlugin = {
 
 厳密に定義されたプラグインの適用範囲はありませんが、プラグインが役立つ一般的なシナリオは以下の通りです:
 
-1. [`app.component()`](/api/application.html#app-component) や [`app.directive()`](/api/application.html#app-directive) を使って、1 つもしくは複数のグローバルなコンポーネントやカスタムディレクティブを登録する。
+1. [`app.component()`](/api/application#app-component) や [`app.directive()`](/api/application#app-directive) を使って、1 つもしくは複数のグローバルなコンポーネントやカスタムディレクティブを登録する。
 
-2. [`app.provide()`](/api/application.html#app-provide) を呼び出して、アプリケーション全体でリソースを[注入できる](/guide/components/provide-inject.html)ようにする。
+2. [`app.provide()`](/api/application#app-provide) を呼び出して、アプリケーション全体でリソースを[注入できる](/guide/components/provide-inject)ようにする。
 
-3. [`app.config.globalProperties`](/api/application.html#app-config-globalproperties) にグローバルなインスタンスプロパティやメソッドを追加する。
+3. [`app.config.globalProperties`](/api/application#app-config-globalproperties) にグローバルなインスタンスプロパティやメソッドを追加する。
 
 4. 上記のいくつかの組み合わせを実行する必要があるライブラリー（例: [vue-router](https://github.com/vuejs/vue-router-next)）。
 
@@ -89,7 +89,7 @@ app.use(i18nPlugin, {
 
 これで、最初の式 `$translate('greetings.hello')` は、実行時に `Bonjour!` に置き換えられます。
 
-参照: [グローバルなプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties) <sup class="vt-badge ts" />
+参照: [グローバルなプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties) <sup class="vt-badge ts" />
 
 :::tip
 グローバルプロパティはほとんど使わないようにしてください。様々なプラグインから注入された多くのグローバルプロパティがアプリケーション全体で使われていると、すぐに混乱してしまいます。
diff --git a/src/guide/scaling-up/routing.md b/src/guide/scaling-up/routing.md
index 138557620..d1714917e 100644
--- a/src/guide/scaling-up/routing.md
+++ b/src/guide/scaling-up/routing.md
@@ -21,7 +21,7 @@ Vue は SPA の構築に適しています。ほとんどの SPA では、公式
 
 ## スクラッチでのシンプルなルーティング {#simple-routing-from-scratch}
 
-もしシンプルなルーティングのみ必要で、フル機能のルーターライブラリーを含めたくない場合は、[動的コンポーネント](/guide/essentials/component-basics.html#dynamic-components)を使って、ブラウザーの [`hashchange` イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/hashchange_event) を購読したり、 [History API](https://developer.mozilla.org/ja/docs/Web/API/History) を使うことで、現在のコンポーネントの状態を変更することができます。
+もしシンプルなルーティングのみ必要で、フル機能のルーターライブラリーを含めたくない場合は、[動的コンポーネント](/guide/essentials/component-basics#dynamic-components)を使って、ブラウザーの [`hashchange` イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/hashchange_event) を購読したり、 [History API](https://developer.mozilla.org/ja/docs/Web/API/History) を使うことで、現在のコンポーネントの状態を変更することができます。
 
 以下は、最小構成の例です:
 
diff --git a/src/guide/scaling-up/sfc.md b/src/guide/scaling-up/sfc.md
index 642db6aa5..af16f0bd1 100644
--- a/src/guide/scaling-up/sfc.md
+++ b/src/guide/scaling-up/sfc.md
@@ -65,7 +65,7 @@ SFC にはビルドステップが必要ですが、その代わりに多くの
 - [コンポーネントスコープのCSS](/api/sfc-css-features)
 - [Composition API を使用する場合のより人間工学的な構文](/api/sfc-script-setup)
 - テンプレートとスクリプトを相互分析することによるコンパイル時の最適化の強化
-- テンプレート内の式のオートコンプリートと型チェックによる[IDE のサポート](/guide/scaling-up/tooling.html#ide-support)
+- テンプレート内の式のオートコンプリートと型チェックによる[IDE のサポート](/guide/scaling-up/tooling#ide-support)
 - すぐに使用できるホットモジュールリプレイスメント（HMR）のサポート
 
 SFC は、フレームワークとしての Vue を特徴付ける機能であり、次のシナリオで Vue を使用するための推奨されるアプローチです:
@@ -104,4 +104,4 @@ SFC 内の `<style>` タグは通常ホットアップデートをサポート
 
 現代の UI 開発では、コードベースを互いに織り交ぜる 3 つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることが分かっています。コンポーネント内では、そのテンプレート、ロジック、およびスタイルが本質的に結合されており、それらを連結することで、実際にコンポーネントがよりまとまり、保守しやすくなります。
 
-単一ファイルコンポーネントのアイデアが好まない場合でも、[src でのインポート](/api/sfc-spec.html#src-imports) を使用して JavaScript と CSS を別々のファイルに分割することで、ホットリロードと事前コンパイル機能を活用できることに注意してください。
+単一ファイルコンポーネントのアイデアが好まない場合でも、[src でのインポート](/api/sfc-spec#src-imports) を使用して JavaScript と CSS を別々のファイルに分割することで、ホットリロードと事前コンパイル機能を活用できることに注意してください。
diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md
index fd333a5ca..a47675d79 100644
--- a/src/guide/scaling-up/ssr.md
+++ b/src/guide/scaling-up/ssr.md
@@ -84,7 +84,7 @@ renderToString(app).then((html) => {
 <button>1</button>
 ```
 
-[`renderToString()`](/api/ssr.html#rendertostring) は Vue アプリケーションのインスタンスを受け取り、アプリケーションでレンダリングされる HTML を解決する Promise を返します。また、[Node.js Stream API](https://nodejs.org/api/stream.html) や [Web Streams API](https://developer.mozilla.org/ja/docs/Web/API/Streams_API) を用いて、ストリームレンダリングもできます。詳しくは [SSR API リファレンス](/api/ssr.html)を参照してください。
+[`renderToString()`](/api/ssr#rendertostring) は Vue アプリケーションのインスタンスを受け取り、アプリケーションでレンダリングされる HTML を解決する Promise を返します。また、[Node.js Stream API](https://nodejs.org/api/stream.html) や [Web Streams API](https://developer.mozilla.org/ja/docs/Web/API/Streams_API) を用いて、ストリームレンダリングもできます。詳しくは [SSR API リファレンス](/api/ssr)を参照してください。
 
 そして、Vue SSR のコードをサーバーのリクエストハンドラーに移動させ、アプリケーションのマークアップをフルページの HTML でラップすることができます。次のステップでは [`express`](https://expressjs.com/) を使用します:
 
@@ -134,7 +134,7 @@ server.listen(3000, () => {
 
 クライアントサイドのアプリケーションをインタラクティブにするために、Vue は **hydration（ハイドレーション）** ステップを踏まえる必要があります。ハイドレーションでは、サーバー上で実行されたのと同じ Vue アプリケーションを作成し、各コンポーネントを制御する DOM ノードにマッチさせ、DOM イベントリスナーをアタッチします。
 
-ハイドレーションモードでアプリケーションをマウントするには、`createApp()` の代わりに [`createSSRApp()`](/api/application.html#createssrapp) を使用する必要があります:
+ハイドレーションモードでアプリケーションをマウントするには、`createApp()` の代わりに [`createSSRApp()`](/api/application#createssrapp) を使用する必要があります:
 
 ```js{2}
 // これはブラウザー内で実行されます
@@ -257,7 +257,7 @@ SSR では、各リクエストの URL はアプリケーションにとって
 
 ### クロスリクエスト状態汚染 {#cross-request-state-pollution}
 
-状態管理のチャプターでは、[リアクティブ API を使ったシンプルな状態管理パターン](state-management.html#リアクティブ-api-によるシンプルな状態の管理)を紹介しました。SSR においては、このパターンにいくつかの追加的な調整が必要です。
+状態管理のチャプターでは、[リアクティブ API を使ったシンプルな状態管理パターン](state-management#simple-state-management-with-reactivity-api)を紹介しました。SSR においては、このパターンにいくつかの追加的な調整が必要です。
 
 このパターンでは、JavaScript モジュールのルートスコープで共有する状態を宣言します。これはそれらの状態を**シングルトン**、つまり、アプリケーションのライフサイクル全体を通じて 1 つだけのリアクティブオブジェクトのインスタンスにします。これは純粋なクライアントサイドの Vue アプリケーションで期待通りに動作します。なぜなら、アプリケーションのモジュールは、ブラウザーがページへアクセスする度に初期化されるからです。
 
@@ -265,7 +265,7 @@ SSR では、各リクエストの URL はアプリケーションにとって
 
 技術的には、ブラウザーで行うように、リクエストごとにすべての JavaScript モジュールを再初期化することも可能です。しかし、JavaScript モジュールの初期化にはコストがかかるため、サーバーのパフォーマンスに大きな影響を与えることになります。
 
-推奨される解決策は、ルーターやグローバルストアを含むアプリケーション全体の新しいインスタンスを、リクエストごとに作成することです。それから、コンポーネントで直接インポートするのではなく、[アプリケーションレベルの Provide](/guide/components/provide-inject.html#app-level-provide) を使って共有する状態を提供し、それを必要とするコンポーネントでインジェクトすることです:
+推奨される解決策は、ルーターやグローバルストアを含むアプリケーション全体の新しいインスタンスを、リクエストごとに作成することです。それから、コンポーネントで直接インポートするのではなく、[アプリケーションレベルの Provide](/guide/components/provide-inject#app-level-provide) を使って共有する状態を提供し、それを必要とするコンポーネントでインジェクトすることです:
 
 ```js
 // app.js （サーバーとクライアントで共有されます）
diff --git a/src/guide/scaling-up/state-management.md b/src/guide/scaling-up/state-management.md
index 434878ad4..e9544d3d0 100644
--- a/src/guide/scaling-up/state-management.md
+++ b/src/guide/scaling-up/state-management.md
@@ -67,7 +67,7 @@ export default {
 1. 複数のビューが同じ状態の一部に依存する場合があります。
 2. 異なるビューからのアクションが、同じ状態の一部を更新する場合があります。
 
-1 の場合については、"lifting" (共有する状態を共通の祖先のコンポーネントに持ち上げること) および、持ち上げた状態をプロパティとして子に渡す回避策が取れるかもしれません。しかし、この方法は深い階層構造を持つ場合にはすぐに手間になり、[prop のバケツリレー (Prop Drilling)](/guide/components/provide-inject.html#prop-drilling) で知られる問題につながります。
+1 の場合については、"lifting" (共有する状態を共通の祖先のコンポーネントに持ち上げること) および、持ち上げた状態をプロパティとして子に渡す回避策が取れるかもしれません。しかし、この方法は深い階層構造を持つ場合にはすぐに手間になり、[prop のバケツリレー (Prop Drilling)](/guide/components/provide-inject#prop-drilling) で知られる問題につながります。
 
 2 の場合については、テンプレート参照によって直接の親 / 子インスタンスを探したり、発行されたイベントで複数の状態を更新したり、同期したりといった解決策に頼らざるを得ないことがしばしばあります。これらのパターンはいずれも脆弱で、すぐにコードのメンテナンス性の低下を導きます。
 
@@ -77,11 +77,11 @@ export default {
 
 <div class="options-api">
 
-Options API では、リアクティブなデータは `data()` オプションによって宣言されます。内部的には、`data()` で返されたオブジェクトは、公開されている API として利用できる [`reactive()`](/api/reactivity-core.html#reactive) 関数によってリアクティブになります。
+Options API では、リアクティブなデータは `data()` オプションによって宣言されます。内部的には、`data()` で返されたオブジェクトは、公開されている API として利用できる [`reactive()`](/api/reactivity-core#reactive) 関数によってリアクティブになります。
 
 </div>
 
-もし状態の一部を複数のインスタンスで共有する必要が有る場合、[`reactive()`](/api/reactivity-core.html#reactive) でリアクティブなオブジェクトを作成し、それを複数のコンポーネントにインポートすることができます:
+もし状態の一部を複数のインスタンスで共有する必要が有る場合、[`reactive()`](/api/reactivity-core#reactive) でリアクティブなオブジェクトを作成し、それを複数のコンポーネントにインポートすることができます:
 
 ```js
 // store.js
@@ -200,7 +200,7 @@ export const store = reactive({
 クリックハンドラーは `store.increment()` をカッコ付きで使用していることに注意してください - これはコンポーネントメソッドではないので、適切な `this` コンテキストでメソッドを呼び出すために必要です。
 :::
 
-ここでは 1 つのリアクティブオブジェクトを store として使っていますが、`ref()` や `computed()` のような他の [リアクティビティー API](/api/reactivity-core.html) で作られたリアクティブな状態を共有することができますし、[コンポーザブル](/guide/reusability/composables.html) からグローバルな状態を返すこともできます:
+ここでは 1 つのリアクティブオブジェクトを store として使っていますが、`ref()` や `computed()` のような他の [リアクティビティー API](/api/reactivity-core) で作られたリアクティブな状態を共有することができますし、[コンポーザブル](/guide/reusability/composables) からグローバルな状態を返すこともできます:
 
 ```js
 import { ref } from 'vue'
diff --git a/src/guide/scaling-up/testing.md b/src/guide/scaling-up/testing.md
index 53a2117ec..287ad2135 100644
--- a/src/guide/scaling-up/testing.md
+++ b/src/guide/scaling-up/testing.md
@@ -82,7 +82,7 @@ Vue 固有の機能を単体テストする場合、2 つのケースがあり
 
 ### コンポーザブル {#composables}
 
-Vue アプリケーションに特有の関数のカテゴリーの 1 つに[コンポーザブル](/guide/reusability/composables.html)があり、こちらはテスト時に特別な処理を必要とする場合があります。
+Vue アプリケーションに特有の関数のカテゴリーの 1 つに[コンポーザブル](/guide/reusability/composables)があり、こちらはテスト時に特別な処理を必要とする場合があります。
 詳細は、以下の[Composablesのテスト](#testing-composables)を参照してください。
 
 ### コンポーネントの単体テスト {#unit-testing-components}
@@ -353,7 +353,7 @@ test('it should work', () => {
 
 ### コンポーザブルのテスト {#testing-composables}
 
-> このセクションは[コンポーザブル](/guide/reusability/composables.html)セクションを既に読んでいることを想定しています。
+> このセクションは[コンポーザブル](/guide/reusability/composables)セクションを既に読んでいることを想定しています。
 
 コンポーザブルをテストする場合、2 つのカテゴリーに分割することができます: ホストコンポーネントのインスタンスに依存しないコンポーザブルと、依存するコンポーザブルです。
 
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index e81ee2ef7..5f6a7f070 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -155,7 +155,7 @@ export default defineComponent({
 })
 ```
 
-`props` オプションは Options API でより一般的に使用されるため、[Options API とともに TypeScript を使用する](/guide/typescript/options-api.html#typing-component-props)のガイドでさらに詳しい例を見つけることができます。これらの例で示されているテクニックは、`defineProps()` を使った実行時の宣言にも適用されます。
+`props` オプションは Options API でより一般的に使用されるため、[Options API とともに TypeScript を使用する](/guide/typescript/options-api#typing-component-props)のガイドでさらに詳しい例を見つけることができます。これらの例で示されているテクニックは、`defineProps()` を使った実行時の宣言にも適用されます。
 
 ## コンポーネントの emit の型付け {#typing-component-emits}
 
@@ -399,4 +399,4 @@ const openModal = () => {
 </script>
 ```
 
-この方法を Vue SFC ではなく、TypeScript ファイルで使いたい場合は、 Volar の [Takeover Mode](./overview.html#volar-takeover-mode) を有効にする必要があることに注意してください。
+この方法を Vue SFC ではなく、TypeScript ファイルで使いたい場合は、 Volar の [Takeover Mode](./overview#volar-takeover-mode) を有効にする必要があることに注意してください。
diff --git a/src/guide/typescript/options-api.md b/src/guide/typescript/options-api.md
index f07e02baf..c2c3e0097 100644
--- a/src/guide/typescript/options-api.md
+++ b/src/guide/typescript/options-api.md
@@ -215,7 +215,7 @@ export default defineComponent({
 
 ## グローバルなプロパティの拡張 {#augmenting-global-properties}
 
-プラグインによっては、[`app.config.globalProperties`](/api/application.html#app-config-globalproperties) を通じて、すべてのコンポーネントインスタンスにグローバルに利用可能なプロパティを追加するものがあります。例えば、データ取得のために `this.$http` をインストールしたり、国際化のために `this.$translate` を追加したりすることができます。これを TypeScript とうまく連携させるために、Vue は [TypeScript のモジュール拡張 (TypeScript module augmentation)](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) で拡張できるように設計された `ComponentCustomProperties` インターフェイスを公開しています。
+プラグインによっては、[`app.config.globalProperties`](/api/application#app-config-globalproperties) を通じて、すべてのコンポーネントインスタンスにグローバルに利用可能なプロパティを追加するものがあります。例えば、データ取得のために `this.$http` をインストールしたり、国際化のために `this.$translate` を追加したりすることができます。これを TypeScript とうまく連携させるために、Vue は [TypeScript のモジュール拡張 (TypeScript module augmentation)](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) で拡張できるように設計された `ComponentCustomProperties` インターフェイスを公開しています。
 
 ```ts
 import axios from 'axios'
diff --git a/src/guide/typescript/overview.md b/src/guide/typescript/overview.md
index a7b223d27..4162a935c 100644
--- a/src/guide/typescript/overview.md
+++ b/src/guide/typescript/overview.md
@@ -87,7 +87,7 @@ Vue CLI など、webpack ベースのセットアップでは、モジュール
 
 ### `defineComponent()` {#definecomponent}
 
-TypeScript がコンポーネントオプション内の型を適切に推論できるようにするには、[`defineComponent()`](/api/general.html#definecomponent) を使ってコンポーネントを定義する必要があります:
+TypeScript がコンポーネントオプション内の型を適切に推論できるようにするには、[`defineComponent()`](/api/general#definecomponent) を使ってコンポーネントを定義する必要があります:
 
 ```ts
 import { defineComponent } from 'vue'
@@ -129,7 +129,7 @@ export default defineComponent({
 
 参照:
 
-- [webpack のツリーシェイキングに関する注意](/api/general.html#note-on-webpack-treeshaking)
+- [webpack のツリーシェイキングに関する注意](/api/general#note-on-webpack-treeshaking)
 - [`defineComponent` の型テスト](https://github.com/vuejs/core/blob/main/packages/dts-test/defineComponent.test-d.tsx)
 
 :::tip
diff --git a/src/style-guide/rules-essential.md b/src/style-guide/rules-essential.md
index 3eb22618d..91141387a 100644
--- a/src/style-guide/rules-essential.md
+++ b/src/style-guide/rules-essential.md
@@ -37,7 +37,7 @@
 コミットされたコードでは、プロパティの定義は可能な限り詳細に、少なくとも型は指定する必要があります。
 
 ::: details 詳しい説明
-詳細な[プロパティ定義](/guide/components/props.html#prop-validation)には、2 つの利点があります。
+詳細な[プロパティ定義](/guide/components/props#prop-validation)には、2 つの利点があります。
 
 - それらはコンポーネントの API を文書化し、コンポーネントがどのように使用されることを意図しているかを容易に理解できるようにします。
 - 開発では、コンポーネントが不適切な形式のプロパティを提供された場合に Vue が警告を発し、潜在的なエラー源を捕らえるのに役立ちます。
@@ -294,7 +294,7 @@ computed: {
 
 アプリケーションの場合、トップレベルの `App` コンポーネントとレイアウトコンポーネントのスタイルはグローバルであってもかまいませんが、その他のコンポーネントは常にスコープされるべきです。
 
-これは、[単一ファイルコンポーネント](/guide/scaling-up/sfc.html) にのみ関連しています。これは、[`scoped` 属性](https://vue-loader.vuejs.org/en/features/scoped-css.html) を使用することを必要としません。スコープは、[CSS モジュール](https://vue-loader.vuejs.org/en/features/css-modules.html) や [BEM](http://getbem.com/) のようなクラスベースの戦略、あるいは他のライブラリーや規約を利用することができます。
+これは、[単一ファイルコンポーネント](/guide/scaling-up/sfc) にのみ関連しています。これは、[`scoped` 属性](https://vue-loader.vuejs.org/en/features/scoped-css.html) を使用することを必要としません。スコープは、[CSS モジュール](https://vue-loader.vuejs.org/en/features/css-modules.html) や [BEM](http://getbem.com/) のようなクラスベースの戦略、あるいは他のライブラリーや規約を利用することができます。
 
 **しかし、コンポーネントライブラリーは `scoped` 属性を使用する代わりに、クラスベースの戦略を取るべきです。**
 
diff --git a/src/style-guide/rules-recommended.md b/src/style-guide/rules-recommended.md
index 89bf35188..6658ebbff 100644
--- a/src/style-guide/rules-recommended.md
+++ b/src/style-guide/rules-recommended.md
@@ -186,7 +186,7 @@ computed: {
 
 ## 単一ファイルコンポーネントのトップレベル要素の順序 {#single-file-component-top-level-element-order}
 
-**[単一ファイルコンポーネント](/guide/scaling-up/sfc.html)では、 `<script>`, `<template>`, `<style>` タグの順番は常に一定で、 `<style>` は最後にする必要があります。なぜなら他の二つのうち少なくとも一つは常に必要だからです。**
+**[単一ファイルコンポーネント](/guide/scaling-up/sfc)では、 `<script>`, `<template>`, `<style>` タグの順番は常に一定で、 `<style>` は最後にする必要があります。なぜなら他の二つのうち少なくとも一つは常に必要だからです。**
 
 <div class="style-example style-example-bad">
 <h3>悪い例</h3>
diff --git a/src/style-guide/rules-strongly-recommended.md b/src/style-guide/rules-strongly-recommended.md
index 896b1c5a9..df9c43b59 100644
--- a/src/style-guide/rules-strongly-recommended.md
+++ b/src/style-guide/rules-strongly-recommended.md
@@ -42,7 +42,7 @@ components/
 
 ## 単一ファイルコンポーネントのファイル名の形式 {#single-file-component-filename-casing}
 
-**[単一ファイルコンポーネント](/guide/scaling-up/sfc.html) のファイル名は、すべてパスカルケース (PascalCase) にするか、すべてケバブケース (kebab-case) にするべきです。**
+**[単一ファイルコンポーネント](/guide/scaling-up/sfc) のファイル名は、すべてパスカルケース (PascalCase) にするか、すべてケバブケース (kebab-case) にするべきです。**
 
 パスカルケース (PascalCase) は、JS(X) やテンプレートでの中でコンポーネントの参照する方法と一致しているため、コードエディターでの自動補完に最も適しています。しかし、大文字と小文字が混ざったファイル名は、大文字と小文字を区別しないファイルシステムで問題を引き起こすことがあります。そのため、ケバブケース (kebab-case) も完全に許容されます。
 
@@ -337,7 +337,7 @@ components/
 
 ## 自己終了形式のコンポーネント {#self-closing-components}
 
-**コンテンツを持たないコンポーネントは、[単一ファイルコンポーネント](/guide/scaling-up/sfc.html)、文字列テンプレート、および [JSX](/guide/extras/render-function.html#jsx-tsx) では自己閉鎖されるべきですが、DOMテンプレート内ではそうしてはいけません。**
+**コンテンツを持たないコンポーネントは、[単一ファイルコンポーネント](/guide/scaling-up/sfc)、文字列テンプレート、および [JSX](/guide/extras/render-function#jsx-tsx) では自己閉鎖されるべきですが、DOMテンプレート内ではそうしてはいけません。**
 
 自己終了形式のコンポーネントは、単に中身を持たないだけでなく、中身を持たないことを**意図した**ことだとはっきりと表現します。これは、本の中にある白紙のページと、「このページは意図的に白紙のままにしてあります」と書かれたページとの違いです。また、不要な閉じタグがなくなるため、コードもすっきりします。
 
@@ -375,7 +375,7 @@ components/
 
 ## テンプレート内でのコンポーネント名の形式 {#component-name-casing-in-templates}
 
-**ほとんどのプロジェクトにおいて、[単一ファイルコンポーネント](/guide/scaling-up/sfc.html)と文字列テンプレートの中では、コンポーネント名は常にパスカルケース(PascalCase)になるべきです。しかし、 DOM テンプレートの中ではケバブケース(kebab-case)です。**
+**ほとんどのプロジェクトにおいて、[単一ファイルコンポーネント](/guide/scaling-up/sfc)と文字列テンプレートの中では、コンポーネント名は常にパスカルケース(PascalCase)になるべきです。しかし、 DOM テンプレートの中ではケバブケース(kebab-case)です。**
 
 パスカルケース（PascalCase）はケバブケース（kebab-case）に比べ、いくつかの利点があります:
 
@@ -431,7 +431,7 @@ components/
 
 ## JS/JSX 内でのコンポーネント名の形式 {#component-name-casing-in-js-jsx}
 
-**JS/[JSX](/guide/extras/render-function.html#jsx-tsx)内でのコンポーネント名は常にパスカルケース(PascalCase)にするべきです。ただし、`app.component` で登録したグローバルコンポーネントしか使わないような単純なアプリケーションでは、ケバブケース(kebab-case)を含む文字列になるかもしれません。**
+**JS/[JSX](/guide/extras/render-function#jsx-tsx)内でのコンポーネント名は常にパスカルケース(PascalCase)にするべきです。ただし、`app.component` で登録したグローバルコンポーネントしか使わないような単純なアプリケーションでは、ケバブケース(kebab-case)を含む文字列になるかもしれません。**
 
 ::: details 詳しい説明
 JavaScript では、クラスやプロトタイプのコンストラクターなど、基本的に個別のインスタンスを持つことができるすべてのもののためにパスカルケースを利用します。Vue のコンポーネントもインスタンスを持つので、パスカルケースを使用するのは理にかなっています。さらに、JSX（およびテンプレート）内でパスカルケースを使用すると、コードを読む人がコンポーネントと HTML 要素をより簡単に区別することができます。
@@ -529,7 +529,7 @@ components/
 
 ## プロパティ名の型式 {#prop-name-casing}
 
-**プロパティ名は、定義の時は常にキャメルケース（camelCase）を使用する必要があります。DOM 内テンプレート内で使用する場合、プロパティはケバブケース（kebab-case）を使用する必要があります。単一ファイルコンポーネントのテンプレートと [JSX](/guide/extras/render-function.html#jsx-tsx) では、ケバブケースまたはキャメルケースのどちらかのプロパティを使用できます。ケーシングは一貫している必要があります - キャメルケースのプロパティを使用することにした場合、そのアプリケーション内ではケバブケースを使用しないでください**
+**プロパティ名は、定義の時は常にキャメルケース（camelCase）を使用する必要があります。DOM 内テンプレート内で使用する場合、プロパティはケバブケース（kebab-case）を使用する必要があります。単一ファイルコンポーネントのテンプレートと [JSX](/guide/extras/render-function#jsx-tsx) では、ケバブケースまたはキャメルケースのどちらかのプロパティを使用できます。ケーシングは一貫している必要があります - キャメルケースのプロパティを使用することにした場合、そのアプリケーション内ではケバブケースを使用しないでください**
 
 <div class="style-example style-example-bad">
 <h3>悪い例</h3>
@@ -603,7 +603,7 @@ const props = defineProps({
 
 **複数の属性をもつ要素は、1 行に 1 要素ずつ、複数の行にわたって書くべきです。**
 
-JavaScript では、複数のプロパティをもつ要素を複数の行に分けて書くことはよい慣習だと広く考えられています。なぜなら、その方がより読みやすいからです。Vue のテンプレートや [JSX](/guide/extras/render-function.html#jsx-tsx)  も同じように考えることがふさわしいです。
+JavaScript では、複数のプロパティをもつ要素を複数の行に分けて書くことはよい慣習だと広く考えられています。なぜなら、その方がより読みやすいからです。Vue のテンプレートや [JSX](/guide/extras/render-function#jsx-tsx)  も同じように考えることがふさわしいです。
 
 <div class="style-example style-example-bad">
 <h3>悪い例</h3>
diff --git a/src/tutorial/src/step-15/description.md b/src/tutorial/src/step-15/description.md
index ee4714649..c5dfac402 100644
--- a/src/tutorial/src/step-15/description.md
+++ b/src/tutorial/src/step-15/description.md
@@ -4,9 +4,9 @@
 
 この時点で、Vue を使った作業がどのようなものであるかは、よく理解できたはずです。しかし、私たちは多くのことを本当に速く学習し、細部には目を瞑ってきました。ですからぜひ学習を継続してください！次のステップとして、次のことができます:
 
-- [クイックスタート](/guide/quick-start.html)の手順に従って、あなたのマシン上に実際の Vue プロジェクトをセットアップします。
+- [クイックスタート](/guide/quick-start)の手順に従って、あなたのマシン上に実際の Vue プロジェクトをセットアップします。
 
-- [メインガイド](/guide/essentials/application.html)では、これまで学んだ全ての内容について、さらに詳しく説明しています。
+- [メインガイド](/guide/essentials/application)では、これまで学んだ全ての内容について、さらに詳しく説明しています。
 
 - より実例的な[例](/examples/)を確認します。