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

@@ -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) を参照してください。

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) をチェックしてください。
 

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)

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)