From 5e03bcad657579edbce95d11bc4415eed3cb00c8 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 20:52:24 +0900
Subject: [PATCH 01/12] fix: half width fullstop & comma

---
 src/style-guide/README.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index a2242cf6..fffab6f8 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -22,11 +22,11 @@ sidebar: auto
 
 ### 優先度 C: 推奨
 
-同じくらい良いオプションが複数ある場合､一貫性を確保するために任意の選択をすることができます｡これらのルールでは､それぞれ許容可能なオプションを説明し､既定の選択を提案します｡つまり､一貫性があり､正当な理由を持ち続ける限り､独自のコードベースで自由に異なる選択肢を作ることができます｡ですが､正当な理由を必ず持つようにしてください！コミュニティの標準に合わせることで､あなたは:
+同じくらい良いオプションが複数ある場合、一貫性を確保するために任意の選択をすることができます。これらのルールでは、それぞれ許容可能なオプションを説明し、既定の選択を提案します。つまり、一貫性があり、正当な理由を持ち続ける限り、独自のコードベースで自由に異なる選択肢を作ることができます。ですが、正当な理由を必ず持つようにしてください！コミュニティの標準に合わせることで、あなたは:
 
-1. 直面するコミュニティのコードを容易に理解できるように脳を慣れさせます｡
-2. ほとんどのコミュニティのコードサンプルを変更なしにコピーして貼り付ける事ができます｡
-3. 少なくとも Vue に関しては､ほとんどの場合､新たな人材はあなたのコーディングスタイルよりも既に慣れ親しんだものを好みます｡
+1. 直面するコミュニティのコードを容易に理解できるように脳を慣れさせます。
+2. ほとんどのコミュニティのコードサンプルを変更なしにコピーして貼り付ける事ができます。
+3. 少なくとも Vue に関しては、ほとんどの場合、新たな人材はあなたのコーディングスタイルよりも既に慣れ親しんだものを好みます。
 
 ### 優先度 D: 使用注意
 
@@ -1266,9 +1266,9 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 
 ### コンポーネント/インスタンス オプション順序 <sup data-p="c">推奨</sup>
 
-**コンポーネント/インスタンス オプションは､一貫した順序になるべきです｡**
+**コンポーネント/インスタンス オプションは、一貫した順序になるべきです。**
 
-これは推奨するコンポーネントオプションの既定の順序です｡それらは種類分けされており､プラグインからどこに新たなプロパティを追加するか知ることができます｡
+これは推奨するコンポーネントオプションの既定の順序です。それらは種類分けされており、プラグインからどこに新たなプロパティを追加するか知ることができます。
 
 1. **グローバルな認識** (コンポーネントを超えた知識が必要)
     - `name`
@@ -1319,9 +1319,9 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 
 ### 要素の属性の順序 <sup data-p="c">推奨</sup>
 
-**要素の属性 (コンポーネントを含む) は､一貫した順序になるべきです｡**
+**要素の属性 (コンポーネントを含む) は、一貫した順序になるべきです。**
 
-これは推奨するコンポーネントオプションの既定の順序です｡それらは種類分けされており､カスタム属性とディレクティブをどこに追加するか知ることができます｡
+これは推奨するコンポーネントオプションの既定の順序です。それらは種類分けされており、カスタム属性とディレクティブをどこに追加するか知ることができます。
 
 1. **定義** (コンポーネントオプションを提供)
     - `is`
@@ -1364,9 +1364,9 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 
 ### コンポーネント/インスタンス オプションの空行 <sup data-p="c">推奨</sup>
 
-**特にオプションがスクロールなしでは画面に収まらなくなった場合､複数行に渡るプロパティの間に空行を追加してみてください｡**
+**特にオプションがスクロールなしでは画面に収まらなくなった場合、複数行に渡るプロパティの間に空行を追加してみてください。**
 
-コンポーネントに窮屈さや読みづらさを感じたら､複数行に渡るプロパティの間に空行を追加する事でそれらを簡単に読み流すことができるようになります｡ Vim など､一部のエディタでは、このような書式を使用するとキーボードで簡単に移動することができます。
+コンポーネントに窮屈さや読みづらさを感じたら、複数行に渡るプロパティの間に空行を追加する事でそれらを簡単に読み流すことができるようになります。Vim など、一部のエディタでは、このような書式を使用するとキーボードで簡単に移動することができます。
 
 <div class="style-example style-example-good">
 <h4>良い例</h4>
@@ -1400,7 +1400,7 @@ computed: {
 
 ``` js
 // コンポーネントの読み取りや移動が容易であれば、
-// 空行がなくても大丈夫です｡
+// 空行がなくても大丈夫です。
 props: {
   value: {
     type: String,
@@ -1430,7 +1430,7 @@ computed: {
 
 ### 単一ファイルコンポーネントのトップレベルの属性の順序 <sup data-p="c">推奨</sup>
 
-**[単一ファイルコンポーネント](../guide/single-file-components.html)では､ `<script>` ､ `<template>` ､ `<style>` タグを一貫した順序にし、 `<style>` は他の2つのうち少なくとも1つで常に必要となるため、順序を最後にするべきです。**
+**[単一ファイルコンポーネント](../guide/single-file-components.html)では、 `<script>` 、 `<template>` 、 `<style>` タグを一貫した順序にし、 `<style>` は他の2つのうち少なくとも1つで常に必要となるため、順序を最後にするべきです。**
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>

From 58738c2fbdb9d2517ac9045b82b0a971ca5571ee Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 20:53:10 +0900
Subject: [PATCH 02/12] docs: add the delimiters option

https://github.com/vuejs/docs/commit/4cf82d43dc7ae6f79051a379cd51fa6a09c1ad9e
---
 src/style-guide/README.md | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index fffab6f8..c7114207 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1260,8 +1260,6 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 </div>
 
 
-## 優先度 C のルール: 推奨 (任意の選択肢と認知上のオーバーヘッドの最小化)
-
 ## 優先度 C のルール: 推奨 (任意の選択肢と認知上のオーバーヘッドの最小化)
 
 ### コンポーネント/インスタンス オプション順序 <sup data-p="c">推奨</sup>
@@ -1273,28 +1271,31 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 1. **グローバルな認識** (コンポーネントを超えた知識が必要)
     - `name`
 
-2. **テンプレートの依存関係** (テンプレートで使用されるアセット)
+2. **テンプレート修飾子** (テンプレートのコンパイル方法の変更)
+    - `delimiters`
+
+3. **テンプレートの依存関係** (テンプレートで使用されるアセット)
     - `components`
     - `directives`
 
-3. **合成** (プロパティをオプションにマージ)
+4. **合成** (プロパティをオプションにマージ)
     - `extends`
     - `mixins`
     - `provide`/`inject`
 
-4. **インタフェース** (コンポーネントへのインタフェース)
+5. **インタフェース** (コンポーネントへのインタフェース)
     - `inheritAttrs`
     - `props`
     - `emits`
 
-5. **コンポジション API** (コンポジション API を使用するためのエントリポイント)
+6. **コンポジション API** (コンポジション API を使用するためのエントリポイント)
     - `setup`
 
-6. **ローカルの状態** (ローカル リアクティブ プロパティ)
+7. **ローカルの状態** (ローカル リアクティブ プロパティ)
     - `data`
     - `computed`
 
-7. **イベント** (リアクティブなイベントによって引き起こされたコールバック)
+8. **イベント** (リアクティブなイベントによって引き起こされたコールバック)
     - `watch`
     - ライフサイクルイベント (呼び出される順)
         - `beforeCreate`
@@ -1311,10 +1312,10 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
         - `renderTracked`
         - `renderTriggered`
 
-8.  **リアクティブではないプロパティ** (リアクティブシステムから独立したインスタンス プロパティ)
+9. **リアクティブではないプロパティ** (リアクティブシステムから独立したインスタンス プロパティ)
     - `methods`
 
-9. **レンダリング** (コンポーネント出力の宣言的な記述)
+10. **レンダリング** (コンポーネント出力の宣言的な記述)
     - `template`/`render`
 
 ### 要素の属性の順序 <sup data-p="c">推奨</sup>

From 44d65d9ffba183d95ba9966850111dc6098e0b7d Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 20:59:43 +0900
Subject: [PATCH 03/12] fix: remove blank lines from an example that shouldn't
 have them

https://github.com/vuejs/docs/commit/c25275295e7729683f0ebe483c284137c6e5322c
---
 src/style-guide/README.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index c7114207..626bdd40 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1407,21 +1407,17 @@ props: {
     type: String,
     required: true
   },
-
   focused: {
     type: Boolean,
     default: false
   },
-
   label: String,
   icon: String
 },
-
 computed: {
   formattedValue() {
     // ...
   },
-
   inputClasses() {
     // ...
   }

From 41ac6a7db4bb8032a790059940efcda5d3fdb38a Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:05:28 +0900
Subject: [PATCH 04/12] fix: update links to single-file-component.html

https://github.com/vuejs/docs/commit/3c1659a19b638e57264a72be945598f5bb7f406e
---
 src/style-guide/README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 626bdd40..79b88614 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -38,7 +38,7 @@ Vue のいくつかの機能は、レアケースまたは従来のコードベ
 
 **ルートの `App` コンポーネントや、Vue が提供する `<transition>` や `<component>` のようなビルトインコンポーネントを除き、コンポーネント名は常に複数単語とするべきです。**
 
-全ての HTML 要素は 1 単語なので、このルールを守ることで既に存在する HTML 要素や将来定義される HTML 要素との[衝突を防止することができます](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name)。
+全ての HTML 要素は 1 単語なので、このルールを守ることで既に存在する HTML 要素や将来定義される HTML 要素との [衝突を防止することができます](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name)。
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
@@ -82,7 +82,7 @@ export default {
 コミットされたコードでは、prop の定義は常に可能な限り詳細にすべきで、少なくともタイプの指定をする必要があります。
 
 ::: details 詳細な説明
-詳細な[プロパティの定義](/guide/component-props.html#prop-validation) には 2 つの利点があります:
+詳細な [プロパティの定義](/guide/component-props.html#prop-validation) には 2 つの利点があります:
 
 - コンポーネントの API が明文化されるため、そのコンポーネントの使用方法が簡単に確認できます。
 - 開発中、コンポーネントに対して誤った形式のプロパティが提供されると Vue は警告を通知するため、潜在的なエラー原因の検知に役立ちます。
@@ -130,7 +130,7 @@ props: {
 
 **`v-for` に対しては常に `key` を使用してください。**
 
-サブツリーの内部コンポーネントの状態を維持するために、コンポーネントでの `v-for` には _常に_ `key` を付ける必要があります。ただし要素の場合であっても、アニメーションでの[オブジェクトの一貫性](https://bost.ocks.org/mike/constancy/)のように、予測可能な振る舞いを維持することをお勧めします。
+サブツリーの内部コンポーネントの状態を維持するために、コンポーネントでの `v-for` には _常に_ `key` を付ける必要があります。ただし要素の場合であっても、アニメーションでの [オブジェクトの一貫性](https://bost.ocks.org/mike/constancy/) のように、予測可能な振る舞いを維持することをお勧めします。
 
 ::: details 詳細な説明
 TODO リストを持っているとしましょう:
@@ -293,7 +293,7 @@ computed: {
 
 **アプリケーションにとって、トップレベルの `App` コンポーネントとレイアウトコンポーネントのスタイルはグローバルである可能性がありますが、他のすべてのコンポーネントは常にスコープ化されているべきです。**
 
-これは、[単一ファイルコンポーネント](../guide/single-file-component.html)のみに関連します。[`scoped` 属性](https://vue-loader.vuejs.org/en/features/scoped-css.html)の使用は必須_ではありません_。 スコープは [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html) や [BEM](http://getbem.com/) のようなクラスに基づいた戦略、または他のライブラリ/慣例を介して行うことができます。
+これは、[単一ファイルコンポーネント](../guide/single-file-component.html) のみに関連します。[`scoped` 属性](https://vue-loader.vuejs.org/en/features/scoped-css.html) の使用は必須_ではありません_。 スコープは [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html) や [BEM](http://getbem.com/) のようなクラスに基づいた戦略、または他のライブラリ/慣例を介して行うことができます。
 
 **ただしコンポーネントライブラリでは、 `scoped` 属性を使用するのではなく、クラスに基づいた戦略を優先すべきです**
 
@@ -514,7 +514,7 @@ components/
 
 ### 単一ファイルコンポーネントのファイル名の形式 <sup data-p="b">強く推奨</sup>
 
-**[単一ファイルコンポーネント](../guide/single-file-component.html)のファイル名は、すべてパスカルケース (PascalCase) にするか、すべてケバブケース (kebab-case) にするべきです。**
+**[単一ファイルコンポーネント](../guide/single-file-component.html) のファイル名は、すべてパスカルケース (PascalCase) にするか、すべてケバブケース (kebab-case) にするべきです。**
 
 パスカルケースは、JS(X) やテンプレートの中でコンポーネントを参照する方法と一致しているので、コードエディタ上でオートコンプリートが可能な場合はとてもうまく働きます。しかし、大文字と小文字が混ざったファイル名は、大文字と小文字を区別しないファイルシステム上で時々問題を起こす可能性があります。そのため、ケバブケースもまた完全に受け入れられています。
 
@@ -1016,7 +1016,7 @@ props: {
 
 **複数の属性をもつ要素は、1 行に 1 要素ずつ、複数の行にわたって書くべきです。**
 
-JavaScript では、複数のプロパティをもつ要素を複数の行に分けて書くことはよい慣習だと広く考えられています。なぜなら、その方がより読みやすいからです。Vue のテンプレートや [JSX](../guide/render-function.html#JSX)  も同じように考えることがふさわしいです。
+JavaScript では、複数のプロパティをもつ要素を複数の行に分けて書くことはよい慣習だと広く考えられています。なぜなら、その方がより読みやすいからです。Vue のテンプレートや [JSX](../guide/render-function.html#JSX) も同じように考えることがふさわしいです。
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
@@ -1427,7 +1427,7 @@ computed: {
 
 ### 単一ファイルコンポーネントのトップレベルの属性の順序 <sup data-p="c">推奨</sup>
 
-**[単一ファイルコンポーネント](../guide/single-file-components.html)では、 `<script>` 、 `<template>` 、 `<style>` タグを一貫した順序にし、 `<style>` は他の2つのうち少なくとも1つで常に必要となるため、順序を最後にするべきです。**
+**[単一ファイルコンポーネント](../guide/single-file-component.html) では、`<script>`、`<template>`、`<style>` タグを一貫した順序にし、 `<style>` は他の2つのうち少なくとも1つで常に必要となるため、順序を最後にするべきです。**
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>

From 4daf873df98c241443e5112b590a8d322e1c7253 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:08:50 +0900
Subject: [PATCH 05/12] fix: update broken links

https://github.com/vuejs/docs/commit/96d64039aa13770ab44f5c5ed46b387439014024
---
 src/style-guide/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 79b88614..a70772a0 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -980,7 +980,7 @@ components/
 
 ### プロパティ名の型式 <sup data-p="b">強く推奨</sup>
 
-**プロパティ名は、定義の時は常にキャメルケース(camelCase)にするべきですが、テンプレートや [JSX](../guide/render-function.html#JSX) ではケバブケース(kebab-case)にするべきです。**
+**プロパティ名は、定義の時は常にキャメルケース(camelCase)にするべきですが、テンプレートや [JSX](../guide/render-function.html#jsx) ではケバブケース(kebab-case)にするべきです。**
 
 私たちは単純にこの慣習に従っています。JavaScript の中ではキャメルケースがより自然で、HTML の中ではケバブケースが自然です。
 
@@ -1016,7 +1016,7 @@ props: {
 
 **複数の属性をもつ要素は、1 行に 1 要素ずつ、複数の行にわたって書くべきです。**
 
-JavaScript では、複数のプロパティをもつ要素を複数の行に分けて書くことはよい慣習だと広く考えられています。なぜなら、その方がより読みやすいからです。Vue のテンプレートや [JSX](../guide/render-function.html#JSX) も同じように考えることがふさわしいです。
+JavaScript では、複数のプロパティをもつ要素を複数の行に分けて書くことはよい慣習だと広く考えられています。なぜなら、その方がより読みやすいからです。Vue のテンプレートや [JSX](../guide/render-function.html#jsx) も同じように考えることがふさわしいです。
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>

From 825fc3df30c258e910513956ef32d206c32caa5e Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:20:26 +0900
Subject: [PATCH 06/12] fix: match the line in origin

---
 src/style-guide/README.md | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index a70772a0..b2713b34 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -55,7 +55,6 @@ export default {
   // ...
 }
 ```
-
 </div>
 
 <div class="style-example style-example-good">
@@ -734,7 +733,6 @@ components/
 
 また、 **何を「最高レベル」として尊重するかがアプリケーションの文脈になる** ことに注意してください。例えば、検索フォームを持ったアプリケーションを想像してください。こんなコンポーネントがあるかもしれません:
 
-
 ```
 components/
 |- ClearSearchButton.vue
@@ -1260,7 +1258,7 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 </div>
 
 
-## 優先度 C のルール: 推奨 (任意の選択肢と認知上のオーバーヘッドの最小化)
+## 優先度 C のルール: 推奨 <span class="hide-from-sidebar">(任意の選択肢と認知上のオーバーヘッドの最小化)</span>
 
 ### コンポーネント/インスタンス オプション順序 <sup data-p="c">推奨</sup>
 
@@ -1327,36 +1325,33 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 1. **定義** (コンポーネントオプションを提供)
     - `is`
 
-2. **テンプレートの修飾子** (テンプレートのコンパイル方法を変更)
-  - `delimiters`
-  
-3. **リスト描画** (同じ要素の複数のバリエーションを作成する)
+2. **リスト描画** (同じ要素の複数のバリエーションを作成する)
     - `v-for`
 
-4. **条件** (要素が描画/表示されているかどうか)
+3. **条件** (要素が描画/表示されているかどうか)
     - `v-if`
     - `v-else-if`
     - `v-else`
     - `v-show`
     - `v-cloak`
 
-5. **描画修飾子** (要素の描画方法を変更)
+4. **描画修飾子** (要素の描画方法を変更)
     - `v-pre`
     - `v-once`
 
-6. **グローバルな認識** (コンポーネントを超えた知識が必要)
+5. **グローバルな認識** (コンポーネントを超えた知識が必要)
     - `id`
 
-7. **一意の属性** (一意の値を必要とする属性)
+6. **一意の属性** (一意の値を必要とする属性)
     - `ref`
     - `key`
 
-8. **双方向バインディング** (バインディングとイベントの結合)
+7. **双方向バインディング** (バインディングとイベントの結合)
     - `v-model`
 
-9. **その他の属性** (すべての指定されていないバインドされた属性とバインドされていない属性)
+8. **その他の属性** (すべての指定されていないバインドされた属性とバインドされていない属性)
 
-10. **イベント** (コンポーネントのイベントリスナ)
+9. **イベント** (コンポーネントのイベントリスナ)
     - `v-on`
 
 10. **コンテンツ** (要素のコンテンツを上書きする)

From 5d633ebcf3463f81cd8b005716864d0d8bac5d30 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:23:28 +0900
Subject: [PATCH 07/12] [issue/627] Replace occurrences of links pointing to
 old docs

https://github.com/vuejs/docs/commit/b25f99bbe41cc76ed9373b02c8f133b9f20c0251
---
 src/style-guide/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index b2713b34..adf4d924 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -81,7 +81,7 @@ export default {
 コミットされたコードでは、prop の定義は常に可能な限り詳細にすべきで、少なくともタイプの指定をする必要があります。
 
 ::: details 詳細な説明
-詳細な [プロパティの定義](/guide/component-props.html#prop-validation) には 2 つの利点があります:
+詳細な [プロパティの定義](/guide/component-props.html#プロパティのバリデーション) には 2 つの利点があります:
 
 - コンポーネントの API が明文化されるため、そのコンポーネントの使用方法が簡単に確認できます。
 - 開発中、コンポーネントに対して誤った形式のプロパティが提供されると Vue は警告を通知するため、潜在的なエラー原因の検知に役立ちます。
@@ -1617,9 +1617,9 @@ app.component('TodoItem', {
 
 **[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.**
 
-Managing state on `this.$root` and/or using a [global event bus](https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but it is not appropriate for most applications.
+Managing state on `this.$root` and/or using a global event bus can be convenient for very simple cases, but it is not appropriate for most applications.
 
-Vuex is the [official flux-like implementation](https://vuejs.org/v2/guide/state-management.html#Official-Flux-Like-Implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](https://vuejs.org/v2/guide/installation.html#Vue-Devtools) support).
+Vuex is the [official flux-like implementation](/guide/state-management.html#official-flux-like-implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](/guide/installation.html#vue-devtools) support).
 
 <div class="style-example style-example-bad">
 <h4>Bad</h4>

From 692766e7a05742bb348b3a30d8e9e291d557dd6c Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:24:19 +0900
Subject: [PATCH 08/12] fix: update links to point at the Vuex 4 documentation

https://github.com/vuejs/docs/commit/0e5b6786d613eaa931f96310e6f5c48a2974a9cd
---
 src/style-guide/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index adf4d924..74415aa5 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1615,7 +1615,7 @@ app.component('TodoItem', {
 
 ### Non-flux state management <sup data-p="d">use with caution</sup>
 
-**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.**
+**[Vuex](https://next.vuex.vuejs.org/) should be preferred for global state management, instead of `this.$root` or a global event bus.**
 
 Managing state on `this.$root` and/or using a global event bus can be convenient for very simple cases, but it is not appropriate for most applications.
 

From d2862335ad1474737171db684f802c5f662c2910 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:25:12 +0900
Subject: [PATCH 09/12] fix: update broken link to the custom element spec

https://github.com/vuejs/docs/commit/eb8b24bb838406c4be930101df86f6928193b8fa
---
 src/style-guide/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 74415aa5..89527acd 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -38,7 +38,7 @@ Vue のいくつかの機能は、レアケースまたは従来のコードベ
 
 **ルートの `App` コンポーネントや、Vue が提供する `<transition>` や `<component>` のようなビルトインコンポーネントを除き、コンポーネント名は常に複数単語とするべきです。**
 
-全ての HTML 要素は 1 単語なので、このルールを守ることで既に存在する HTML 要素や将来定義される HTML 要素との [衝突を防止することができます](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name)。
+全ての HTML 要素は 1 単語なので、このルールを守ることで既に存在する HTML 要素や将来定義される HTML 要素との [衝突を防止することができます](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)。
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>

From f8831ccb39ee3b54be4ceb811aa70013f7cc3fd4 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:28:02 +0900
Subject: [PATCH 10/12] chore: remove spaces between triple backticks and the
 language

https://github.com/vuejs/docs/commit/0f25a8dbbb75d44c4b0466a2fd95d511b33b697f
---
 src/style-guide/README.md | 176 +++++++++++++++++++-------------------
 1 file changed, 88 insertions(+), 88 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 89527acd..2f7ea3d7 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -43,13 +43,13 @@ Vue のいくつかの機能は、レアケースまたは従来のコードベ
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` js
+```js
 app.component('todo', {
   // ...
 })
 ```
 
-``` js
+```js
 export default {
   name: 'Todo',
   // ...
@@ -60,13 +60,13 @@ export default {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` js
+```js
 app.component('todo-item', {
   // ...
 })
 ```
 
-``` js
+```js
 export default {
   name: 'TodoItem',
   // ...
@@ -90,7 +90,7 @@ export default {
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` js
+```js
 // プロトタイピングの時に限り OK
 props: ['status']
 ```
@@ -99,13 +99,13 @@ props: ['status']
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` js
+```js
 props: {
   status: String
 }
 ```
 
-``` js
+```js
 // さらに良いです!
 props: {
   status: {
@@ -134,7 +134,7 @@ props: {
 ::: details 詳細な説明
 TODO リストを持っているとしましょう:
 
-``` js
+```js
 data() {
   return {
     todos: [
@@ -161,7 +161,7 @@ data() {
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <ul>
   <li v-for="todo in todos">
     {{ todo.text }}
@@ -173,7 +173,7 @@ data() {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="todo in todos"
@@ -198,7 +198,7 @@ data() {
 ::: details 詳細な説明
 Vue がディレクティブを処理する場合、`v-if` は `v-for` よりも優先度が高いため、次のようなテンプレートは:
 
-``` html
+```html
 <ul>
   <li
     v-for="user in users"
@@ -214,7 +214,7 @@ Vue がディレクティブを処理する場合、`v-if` は `v-for` よりも
 
 これは、代わりに算出プロパティを元に反復処理をすることで修正できます。次のようになります:
 
-``` js
+```js
 computed: {
   activeUsers() {
     return this.users.filter(user => user.isActive)
@@ -222,7 +222,7 @@ computed: {
 }
 ```
 
-``` html
+```html
 <ul>
   <li
     v-for="user in activeUsers"
@@ -235,7 +235,7 @@ computed: {
 
 または、 `v-for` と一緒に `<template>` タグを使用して、 `<li>` 要素をラップすることもできます:
 
-``` html
+```html
 <ul>
   <template v-for="user in users" :key="user.id">
     <li v-if="user.isActive">
@@ -250,7 +250,7 @@ computed: {
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="user in users"
@@ -266,7 +266,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="user in activeUsers"
@@ -277,7 +277,7 @@ computed: {
 </ul>
 ```
 
-``` html
+```html
 <ul>
   <template v-for="user in users" :key="user.id">
     <li v-if="user.isActive">
@@ -307,7 +307,7 @@ computed: {
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <template>
   <button class="btn btn-close">×</button>
 </template>
@@ -323,7 +323,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <template>
   <button class="button button-close">×</button>
 </template>
@@ -341,7 +341,7 @@ computed: {
 </style>
 ```
 
-``` html
+```html
 <template>
   <button :class="[$style.button, $style.buttonClose]">×</button>
 </template>
@@ -359,7 +359,7 @@ computed: {
 </style>
 ```
 
-``` html
+```html
 <template>
   <button class="c-Button c-Button--close">×</button>
 </template>
@@ -393,7 +393,7 @@ Vue は `_` のプレフィックスを使用して独自のプライベート
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -404,7 +404,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -415,7 +415,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -426,7 +426,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -442,7 +442,7 @@ const myGreatMixin = {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -453,7 +453,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 // さらに良いです!
 const myGreatMixin = {
   // ...
@@ -484,7 +484,7 @@ export default myGreatMixin
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` js
+```js
 app.component('TodoList', {
   // ...
 })
@@ -568,7 +568,7 @@ components/
 
 - これらのコンポーネントはとても頻繁に使われるので、あらゆる場所で import するよりも単純にグローバルにしてしまいたいと思うかもしれません。プレフィックスを利用して、それを Webpack でできるようになります。
 
-  ``` js
+  ```js
   const requireComponent = require.context("./src", true, /Base[A-Z]\w+\.(vue|js)$/)
   requireComponent.keys().forEach(function (fileName) {
     let baseComponentConfig = requireComponent(fileName)
@@ -803,12 +803,12 @@ components/
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <!-- 単一ファイルコンポーネント、文字列テンプレート、JSX の中 -->
 <MyComponent></MyComponent>
 ```
 
-``` html
+```html
 <!-- DOM テンプレートの中 -->
 <my-component/>
 ```
@@ -817,12 +817,12 @@ components/
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <!-- 単一ファイルコンポーネント、文字列テンプレート、JSX の中 -->
 <MyComponent/>
 ```
 
-``` html
+```html
 <!-- DOM テンプレートの中 -->
 <my-component></my-component>
 ```
@@ -845,17 +845,17 @@ components/
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <!-- 単一ファイルコンポーネント、文字列テンプレートの中 -->
 <mycomponent/>
 ```
 
-``` html
+```html
 <!-- 単一ファイルコンポーネント、文字列テンプレートの中 -->
 <myComponent/>
 ```
 
-``` html
+```html
 <!-- DOM テンプレートの中 -->
 <MyComponent></MyComponent>
 ```
@@ -864,19 +864,19 @@ components/
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <!-- 単一ファイルコンポーネント、文字列テンプレートの中 -->
 <MyComponent/>
 ```
 
-``` html
+```html
 <!-- DOM テンプレートの中 -->
 <my-component></my-component>
 ```
 
 または
 
-``` html
+```html
 <!-- どこでも -->
 <my-component></my-component>
 ```
@@ -898,24 +898,24 @@ JavaScript では、クラスやプロトタイプのコンストラクタは -
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` js
+```js
 app.component('myComponent', {
   // ...
 })
 ```
 
-``` js
+```js
 import myComponent from './MyComponent.vue'
 ```
 
-``` js
+```js
 export default {
   name: 'myComponent',
   // ...
 }
 ```
 
-``` js
+```js
 export default {
   name: 'my-component',
   // ...
@@ -926,23 +926,23 @@ export default {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` js
+```js
 app.component('MyComponent', {
   // ...
 })
 ```
 
-``` js
+```js
 app.component('my-component', {
   // ...
 })
 ```
 
-``` js
+```js
 import MyComponent from './MyComponent.vue'
 ```
 
-``` js
+```js
 export default {
   name: 'MyComponent',
   // ...
@@ -985,13 +985,13 @@ components/
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` js
+```js
 props: {
   'greeting-text': String
 }
 ```
 
-``` html
+```html
 <WelcomeMessage greetingText="hi"/>
 ```
 </div>
@@ -999,13 +999,13 @@ props: {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` js
+```js
 props: {
   greetingText: String
 }
 ```
 
-``` html
+```html
 <WelcomeMessage greeting-text="hi"/>
 ```
 </div>
@@ -1019,11 +1019,11 @@ JavaScript では、複数のプロパティをもつ要素を複数の行に分
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
 ```
 
-``` html
+```html
 <MyComponent foo="a" bar="b" baz="c"/>
 ```
 </div>
@@ -1031,14 +1031,14 @@ JavaScript では、複数のプロパティをもつ要素を複数の行に分
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <img
   src="https://vuejs.org/images/logo.png"
   alt="Vue Logo"
 >
 ```
 
-``` html
+```html
 <MyComponent
   foo="a"
   bar="b"
@@ -1056,7 +1056,7 @@ JavaScript では、複数のプロパティをもつ要素を複数の行に分
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 {{
   fullName.split(' ').map((word) => {
     return word[0].toUpperCase() + word.slice(1)
@@ -1068,12 +1068,12 @@ JavaScript では、複数のプロパティをもつ要素を複数の行に分
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <!-- テンプレート内 -->
 {{ normalizedFullName }}
 ```
 
-``` js
+```js
 // 複雑な式を算出プロパティに移動
 computed: {
   normalizedFullName() {
@@ -1110,7 +1110,7 @@ computed: {
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` js
+```js
 computed: {
   price() {
     const basePrice = this.manufactureCost / (1 - this.profitMargin)
@@ -1126,7 +1126,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` js
+```js
 computed: {
   basePrice() {
     return this.manufactureCost / (1 - this.profitMargin)
@@ -1152,11 +1152,11 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <input type=text>
 ```
 
-``` html
+```html
 <AppSidebar :style={width:sidebarWidth+'px'}>
 ```
 </div>
@@ -1164,11 +1164,11 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <input type="text">
 ```
 
-``` html
+```html
 <AppSidebar :style="{ width: sidebarWidth + 'px' }">
 ```
 </div>
@@ -1180,21 +1180,21 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <input
   v-bind:value="newTodoText"
   :placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   v-on:input="onInput"
   @focus="onFocus"
 >
 ```
 
-``` html
+```html
 <template v-slot:header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1208,35 +1208,35 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <input
   :value="newTodoText"
   :placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   v-bind:value="newTodoText"
   v-bind:placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   @input="onInput"
   @focus="onFocus"
 >
 ```
 
-``` html
+```html
 <input
   v-on:input="onInput"
   v-on:focus="onFocus"
 >
 ```
 
-``` html
+```html
 <template v-slot:header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1246,7 +1246,7 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 </template>
 ```
 
-``` html
+```html
 <template #header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1367,7 +1367,7 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` js
+```js
 props: {
   value: {
     type: String,
@@ -1394,7 +1394,7 @@ computed: {
 }
 ```
 
-``` js
+```js
 // コンポーネントの読み取りや移動が容易であれば、
 // 空行がなくても大丈夫です。
 props: {
@@ -1427,13 +1427,13 @@ computed: {
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>
 
-``` html
+```html
 <style>/* ... */</style>
 <script>/* ... */</script>
 <template>...</template>
 ```
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <script>/* ... */</script>
 <template>...</template>
@@ -1449,7 +1449,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>良い例</h4>
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <script>/* ... */</script>
 <template>...</template>
@@ -1461,7 +1461,7 @@ computed: {
 <style>/* ... */</style>
 ```
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <template>...</template>
 <script>/* ... */</script>
@@ -1491,7 +1491,7 @@ The problem is that large numbers of [element-attribute selectors](http://steves
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <template>
   <button>×</button>
 </template>
@@ -1507,7 +1507,7 @@ button {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <template>
   <button class="btn btn-close">×</button>
 </template>
@@ -1531,7 +1531,7 @@ The problem is, there are also many _simple_ cases where these patterns may offe
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1544,7 +1544,7 @@ app.component('TodoItem', {
 })
 ```
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1574,7 +1574,7 @@ app.component('TodoItem', {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1592,7 +1592,7 @@ app.component('TodoItem', {
 })
 ```
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1624,7 +1624,7 @@ Vuex is the [official flux-like implementation](/guide/state-management.html#off
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 // main.js
 import { createApp } from 'vue'
 import mitt from 'mitt'
@@ -1653,7 +1653,7 @@ const app = createApp({
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 // store/modules/todos.js
 export default {
   state: {
@@ -1674,7 +1674,7 @@ export default {
 }
 ```
 
-``` html
+```html
 <!-- TodoItem.vue -->
 <template>
   <span>

From 07528913b4d0d466dc5d116282e6f7d015e299fb Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:29:18 +0900
Subject: [PATCH 11/12] chore: whitespace changes suggested by Prettier

https://github.com/vuejs/docs/commit/42f3656d2c10209c811013a5a5b2b9406c75b9fd
---
 src/style-guide/README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 2f7ea3d7..50e7abe2 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1257,7 +1257,6 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 ```
 </div>
 
-
 ## 優先度 C のルール: 推奨 <span class="hide-from-sidebar">(任意の選択肢と認知上のオーバーヘッドの最小化)</span>
 
 ### コンポーネント/インスタンス オプション順序 <sup data-p="c">推奨</sup>

From 3a7096fc8ac7eec4ee393ec14aec59b7cbf268ef Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 29 Jun 2021 21:33:53 +0900
Subject: [PATCH 12/12] 3.1 Updates

https://github.com/vuejs/docs/commit/c9e28e38abcff179ea80c98ea69d5bbcd0fadeda
---
 src/style-guide/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 50e7abe2..24d8f2b5 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1268,8 +1268,8 @@ HTML では、空白を含まない属性値は引用符でくくらなくても
 1. **グローバルな認識** (コンポーネントを超えた知識が必要)
     - `name`
 
-2. **テンプレート修飾子** (テンプレートのコンパイル方法の変更)
-    - `delimiters`
+2. **テンプレートのコンパイラオプション** (テンプレートのコンパイル方法の変更)
+    - `compilerOptions`
 
 3. **テンプレートの依存関係** (テンプレートで使用されるアセット)
     - `components`