vue-best-practices

Vue 3 のベストプラクティス、よくある落とし穴、パフォーマンス最適化。

リアクティビティ

• スクリプト内で .value を使わずに ref() の値にアクセスする → ref-value-access を参照
• reactive() オブジェクトを分割代入してリアクティビティを失う → reactive-destructuring を参照
• 状態管理に ref() と reactive() のどちらを使うか選ぶ → prefer-ref-over-reactive を参照
• 配列やコレクション内の ref にアクセスする → refs-in-collections-need-value を参照
• 大きなオブジェクトや外部ライブラリのデータによるオーバーヘッド → shallow-ref-for-performance を参照
• テンプレート式でネストされた ref を使う → template-ref-unwrapping-top-level を参照
• === 演算子でリアクティブオブジェクトを比較する → reactivity-proxy-identity-hazard を参照
• ライブラリのインスタンスがリアクティブな状態で正常に動作しない → reactivity-markraw-for-non-reactive を参照
• 状態が変わるたびにウォッチャーが実行されると思っている → reactivity-same-tick-batching を参照
• 外部の状態管理ライブラリを統合する → reactivity-external-state-integration を参照
• 予期しない再レンダリングや状態更新を追跡する → reactivity-debugging-hooks を参照
• computed の代わりに watchEffect で状態を派生させる → reactivity-computed-over-watcheffect-mutations を参照

算出プロパティ

• computed のゲッターで API 呼び出しやミューテーションを行う → computed-no-side-effects を参照
• computed の値を変更すると、変更が予期せず失われる → computed-return-value-readonly を参照
• computed プロパティが期待どおりに更新されない → computed-conditional-dependencies を参照
• 配列のソートや反転によって元のデータが破壊される → computed-array-mutation を参照
• コストの高い処理がレンダリングのたびに頻繁に実行される → computed-vs-methods-caching を参照
• computed プロパティに引数を渡そうとする → computed-no-parameters を参照
• 複雑な条件によってインラインのクラスバインディングが肥大化する → computed-properties-for-class-logic を参照

ウォッチャー

• リアクティブオブジェクトのプロパティを監視する必要がある → watch-reactive-property-getter を参照
• 大きくネストされたデータ構造によるパフォーマンスの問題 → watch-deep-performance を参照
• 非同期処理によって古いデータで上書きされる → watch-async-cleanup を参照
• 非同期コールバック内でウォッチャーを作成する → watch-async-creation-memory-leak を参照
• await の後にアクセスした依存関係が追跡されない → watcheffect-async-dependency-tracking を参照
• ウォッチャー内で更新後の DOM にアクセスする必要がある → watch-flush-timing を参照
• watch と watchEffect のどちらを使うべきか分からない → watch-vs-watcheffect を参照
• 初回の呼び出しとウォッチコールバックが重複する → watch-immediate-option を参照
• 古い値と新しい値を正しく比較できない → watch-deep-same-object-reference を参照
• テンプレート ref が null または古い値になる → watcheffect-flush-post-for-refs を参照

コンポーネント

• 子コンポーネントからプロパティ値が変更される → props-are-read-onlyを参照してください
• スクリプトセットアップで親から子の ref データにアクセスできない → component-ref-requires-defineexposeを参照してください
• 子コンポーネントで「component not found」エラーが発生する → local-components-not-in-descendantsを参照してください
• カスタムコンポーネントでクリックリスナーが発火しない → click-events-on-componentsを参照してください
• HTML テンプレートの解析によって Vue コンポーネントの構文が壊れる → in-dom-template-parsing-caveatsを参照してください
• 祖父母コンポーネントから孫コンポーネントが発行したイベントをリッスンできない → component-events-dont-bubbleを参照してください
• 名前の衝突により誤ったコンポーネントが描画される → component-naming-conflictsを参照してください
• Vue コンポーネントとネイティブ要素を区別する → component-naming-pascalcaseを参照してください
• 複数ルートのコンポーネントに親のスタイルが適用されない → multi-root-component-class-attrsを参照してください
• 再帰コンポーネントから自身を参照する必要がある → self-referencing-component-nameを参照してください
• バンドルに未使用のコンポーネントが含まれる → prefer-local-component-registrationを参照してください
• コンポーネント ref へのアクセスによって結合度が高くなる → prefer-props-emit-over-component-refsを参照してください

プロパティとイベント

• Boolean プロパティが期待どおりに解析されない → prop-boolean-casting-orderを参照してください
• プロパティが変更されてもコンポーザブルが更新されない → prop-composable-reactivity-lossを参照してください
• defineProps で参照した変数によってエラーが発生する → prop-defineprops-scope-limitationを参照してください
• 分割代入したプロパティによってウォッチャーが更新されない → prop-destructured-watch-getterを参照してください
• プロパティの検証にコンポーネントインスタンスのデータが必要 → prop-validation-before-instanceを参照してください
• コンポーネントが未宣言のイベントを発行して警告が表示される → declare-emits-for-documentationを参照してください
• defineEmits が関数内または条件分岐内で使用されている → defineEmits-must-be-top-levelを参照してください
• defineEmits に型引数と実行時引数の両方が指定されている → defineEmits-no-runtime-and-type-mixedを参照してください
• テンプレートとスクリプトでイベント名が一致しない → emit-kebab-case-in-templatesを参照してください
• 開発時にイベントペイロードを検証する必要がある → emit-validation-for-complex-payloadsを参照してください
• ネイティブイベントリスナーがクリックに反応しない → native-event-collision-with-emitsを参照してください
• クリック時にコンポーネントイベントが二重に発火する → undeclared-emits-double-firingを参照してください

テンプレート

• 信頼できないユーザーコンテンツを HTML としてレンダリングする → v-html-xss-security を参照
• リスト項目をフィルタリングまたは条件付きで非表示にする → no-v-if-with-v-for を参照
• リスト項目が予期せず消えたり、状態が入れ替わったりする → v-for-key-attribute を参照
• 文を使うとテンプレートのコンパイルエラーが発生する → template-expressions-restrictions を参照
• 動的ディレクティブ引数が正しく機能しない → dynamic-argument-constraints を参照
• テンプレート内の関数が予期せずデータを変更する → template-functions-no-side-effects を参照
• v-else 要素が常に無条件でレンダリングされる → v-else-must-follow-v-if を参照
• ループ内の子コンポーネントでデータが undefined と表示される → v-for-component-props を参照
• 並べ替えや反転の後に配列の順序が変わる → v-for-computed-reverse-sort を参照
• 範囲の反復処理でオフバイワンエラーが発生する → v-for-range-starts-at-one を参照
• フィルタリングまたはソートされたリストでパフォーマンスの問題が発生する → v-for-use-computed-for-filtering を参照
• 実行時に「Cannot read property of undefined」エラーが発生する → v-if-null-check-order を参照
• 条件分岐で v-if と v-show のどちらを使うか判断する → v-if-vs-v-show-performance を参照
• template 要素で v-show または v-else が機能しない → v-show-template-limitation を参照

テンプレート参照

• 要素が条件付きで非表示になると参照が null になる → template-ref-null-with-v-if を参照
• ループ内で参照配列のインデックスがデータ配列と一致しない → template-ref-v-for-order を参照
• テンプレート参照名の変更がコード内で検出されずに問題を引き起こす → use-template-ref-vue35 を参照

フォームと v-model

• v-model を使うとフォームの初期値が表示されない → v-model-ignores-html-attributes を参照
• textarea の内容を変更しても参照が更新されない → textarea-no-interpolation を参照
• iOS ユーザーがドロップダウンの最初の項目を選択できない → select-initial-value-ios-bug を参照
• 親コンポーネントと子コンポーネントで値が異なる → define-model-default-value-sync を参照
• 子コンポーネントで v-model の修飾子を処理する必要がある → definemodel-hidden-modifier-props を参照
• オブジェクトのプロパティの変更が親コンポーネントと同期されない → definemodel-object-mutation-no-emit を参照
• 変更後すぐに更新された値を使う必要がある → definemodel-value-next-tick を参照
• 中国語／日本語入力でリアルタイム検索や検証が機能しない → v-model-ime-composition を参照
• 数値入力が 0 ではなく空文字列を返す → v-model-number-modifier-behavior を参照
• Vue 2 のコンポーネントを Vue 3 に移行する → v-model-vue3-breaking-changes を参照
• カスタムチェックボックスの値がフォーム送信時に送信されない → checkbox-true-false-value-form-submission を参照

イベントと修飾子

• 複数のイベント修飾子を連結すると、予期しない結果になる → event-modifier-order-mattersを参照してください
• 同じイベントを1回だけ処理する必要がある → event-once-modifier-for-single-useを参照してください
• キーボードショートカットが意図しない修飾キーの組み合わせで発火する → exact-modifier-for-precise-shortcutsを参照してください
• システム修飾キーを使ったキーボードショートカットが発火しない → keyup-modifier-timingを参照してください
• 左利き用マウスや標準以外の入力デバイスを使用する → mouse-button-modifiers-intentを参照してください
• ブラウザーの既定の動作の防止とスクロールのパフォーマンスを両立する → no-passive-with-preventを参照してください

ライフサイクル

• ライフサイクルフックは非同期では実行されない → lifecycle-hooks-synchronous-registrationを参照してください
• コンポーネントのマウント前にDOMへアクセスすると失敗する → lifecycle-dom-access-timingを参照してください
• イベントリスナーを削除しないことでメモリーリークが発生する → cleanup-side-effectsを参照してください
• SSRのレンダリング結果がクライアントのハイドレーションと異なる → lifecycle-ssr-awarenessを参照してください
• コストの高い処理によってパフォーマンスが大幅に低下する → updated-hook-performanceを参照してください
• 状態変更後にDOMを読み取ると古い値が返される → dom-update-timing-nexttickを参照してください

スロット

• スロットコンテンツから子コンポーネントのデータにアクセスする → slot-render-scope-parent-onlyを参照してください
• 名前付きスロットとスコープ付きスロットを併用する → slot-named-scoped-explicit-defaultを参照してください
• ネイティブHTML要素でv-slotを使用する → slot-v-slot-on-components-or-templates-onlyを参照してください
• 空のラッパー要素が不要にレンダリングされる → slot-conditional-rendering-with-slotsを参照してください
• スコープ付きスロットのpropsにTypeScriptの型安全性がない → slot-define-slots-for-typescriptを参照してください
• デフォルトのない空のコンポーネントスロットをレンダリングする → slot-fallback-content-default-valuesを参照してください
• ラッパーコンポーネントによって子のスロット機能が損なわれる → slot-forwarding-to-child-componentsを参照してください
• どのスロットコンテンツがどこに配置されるか分からない → slot-implicit-default-contentを参照してください
• スコープ付きスロットのpropsにnameプロパティがあることを期待する → slot-name-reserved-propを参照してください
• レンダーレスコンポーネントとコンポーザブルのどちらを選ぶか迷っている → slot-renderless-components-vs-composablesを参照してください

Provide/Inject

• プロバイダーの変更後も注入された値が更新されない → provide-inject-reactivity-not-automaticを参照してください
• 非同期処理の後に provide を呼び出すと、何も通知されずに失敗する → provide-inject-synchronous-setupを参照してください
• 大規模なアプリケーションで文字列キーが衝突する → provide-inject-symbol-keysを参照してください
• 提供された値の由来をたどる → provide-inject-debugging-challengesを参照してください
• 複数のコンポーネントが同じデフォルトオブジェクトを共有する → provide-inject-default-value-factoryを参照してください
• 状態の変更処理が複数のコンポーネントに分散している → provide-inject-mutations-in-providerを参照してください
• 多数のコンポーネント階層を通して props を渡す → avoid-prop-drilling-use-provide-injectを参照してください

Attrs

• 内部とフォールスルーの両方のイベントハンドラーが実行される → attrs-event-listener-mergingを参照してください
• JavaScript コードでハイフン付き属性にアクセスする → attrs-hyphenated-property-accessを参照してください
• watch() でフォールスルー属性の変更を監視する → attrs-not-reactiveを参照してください
• 明示的に指定した属性がフォールスルー値で上書きされる → fallthrough-attrs-overwrite-vue3を参照してください
• ラッパー内で属性が誤った要素に適用される → inheritattrs-false-for-wrapper-componentsを参照してください

Composables

• コンポーザブルに予期しない副作用があり、外部の状態に影響する → composable-avoid-hidden-side-effectsを参照してください
• セットアップコンテキストの外、または非同期にコンポーザブルを呼び出している → composable-call-location-restrictionsを参照してください
• 小さく役割を絞ったコンポーザブルから複雑なロジックを構築する → composable-composition-patternを参照してください
• コンポーザブルの命名に一貫性がない、または分割代入によってリアクティビティが失われる → composable-naming-return-patternを参照してください
• コンポーザブルのオプション引数が多い、または引数の順序がわかりにくい → composable-options-object-patternを参照してください
• コンポーザブルの状態が無制御に変更されないようにする → composable-readonly-stateを参照してください
• 入力が変わってもコンポーザブルのリアクティブな依存関係が更新されない → composable-tovalue-inside-watcheffectを参照してください
• ロジックをコンポーザブルとユーティリティ関数のどちらに置くべきか判断できない → composable-vs-utility-functionsを参照してください

Composition API

• 本番バンドルのサイズとパフォーマンスを最適化する → composition-api-bundle-size-minificationを参照してください
• Composition API のコードが散在し、保守しにくくなる → composition-api-code-organizationを参照してください
• mixin の命名の競合やデータの出どころが不明瞭な問題を解決する → composition-api-mixins-replacementを参照してください
• Vue の状態管理に関数型パターンを誤って適用する → composition-api-not-functional-programmingを参照してください
• 大規模な Options API のコードベースを段階的に移行する → composition-api-options-api-coexistenceを参照してください
• 非同期処理の後にライフサイクルフックが何も通知せず失敗する → composition-api-script-setup-async-contextを参照してください
• React から移行してきて、Vue のパターンを不必要に複雑化してしまう → composition-api-vs-react-hooks-differencesを参照してください
• 親コンポーネントの ref から公開されたプロパティにアクセスできない → define-expose-before-awaitを参照してください

ディレクティブ

• ディレクティブのフック間で状態を保持する → directive-arguments-read-onlyを参照してください
• Vue コンポーネントにカスタムディレクティブを適用する → directive-avoid-on-componentsを参照してください
• ディレクティブ内でインターバルやイベントリスナーを作成する → directive-cleanup-in-unmountedを参照してください
• 動作が同じディレクティブを簡潔にする → directive-function-shorthandを参照してください
• script setup でカスタムディレクティブを使用する → directive-naming-v-prefixを参照してください
• カスタムディレクティブと組み込みディレクティブのどちらを選ぶか → directive-prefer-declarative-templatingを参照してください
• ディレクティブとコンポーネントのどちらを使うか判断する → directive-vs-component-decisionを参照してください
• Vue 2 のディレクティブを Vue 3 に移行する → directive-vue2-migration-hooksを参照してください

トランジション

• 複数の要素やコンポーネントをトランジションでラップする → transition-single-element-slotを参照
• アニメーションなしで同じ要素タイプ間をトランジションする → transition-key-for-same-elementを参照
• done コールバックを呼び出さずに JavaScript アニメーションを使用する → transition-js-hooks-done-callbackを参照
• 一意のキーなしで TransitionGroup を使ってリストをアニメーションする → transition-group-key-requirementを参照
• リストアニメーションがカクつくパフォーマンスの問題 → transition-animate-transform-opacityを参照
• インラインのリスト要素で移動アニメーションが機能しない → transition-group-flip-inline-elementsを参照
• リスト項目が滑らかにアニメーションせず、飛び跳ねる → transition-group-move-animation-position-absoluteを参照
• Vue 2 から Vue 3 への移行でトランジションのレイアウトが予期せず崩れる → transition-group-no-default-wrapper-vue3を参照
• mode prop でリストアニメーションの順序を制御しようとする → transition-group-no-mode-propを参照
• リスト項目のアニメーションに段階的な遅延を設定する → transition-group-staggered-animationsを参照
• トランジション中に要素が重なったり、レイアウトが跳ねたりする → transition-mode-out-inを参照
• ネストされたトランジションのアニメーションが途中で終了する → transition-nested-durationを参照
• スコープ付きスタイルを使った再利用可能なトランジションコンポーネントが機能しない → transition-reusable-scoped-styleを参照
• ページ読み込み時に RouterView のトランジションが予期せず実行される → transition-router-view-appearを参照
• CSS トランジションとアニメーションを組み合わせるとタイミングに問題が生じる → transition-type-when-mixedを参照
• トランジションの置き換えが速いとコンポーネントのクリーンアップが実行されない → transition-unmount-hook-timingを参照

アニメーション

• DOM に残る要素をアニメーションする → animation-class-based-techniqueを参照
• コンテンツが変更されてもアニメーションが実行されない → animation-key-for-rerenderを参照
• ユーザー入力に応じたインタラクティブなアニメーションを構築する → animation-state-driven-techniqueを参照
• リストの変更をアニメーションすると目立った遅延が発生する → animation-transitiongroup-performanceを参照

KeepAlive

• 適切なキャッシュ制限やクリーンアップなしで KeepAlive を使用する → keepalive-memory-managementを参照
• KeepAlive の include/exclude props がキャッシュされたコンポーネントに一致しない → keepalive-component-name-requirementを参照
• KeepAlive キャッシュからコンポーネントをプログラムで削除する → keepalive-no-cache-removal-vue3を参照
• ページデータが更新されているはずなのに、ユーザーに古いキャッシュ済みコンテンツが表示される → keepalive-router-fresh-vs-cachedを参照
• ネストされた Vue Router のルートで子コンポーネントが 2 回マウントされる → keepalive-router-nested-double-mountを参照
• KeepAlive と Transition アニメーションを組み合わせるとメモリ使用量が増加する → keepalive-transition-memory-leakを参照
• 動的コンポーネントを切り替えると状態がリセットされる → dynamic-components-with-keepaliveを参照

非同期コンポーネント

• Vue Router のルートコンポーネントの読み込み設定 → async-component-vue-router を参照してください
• 親の Suspense によって非同期コンポーネントのオプションが無視される → async-component-suspense-control を参照してください
• コンポーネントの読み込み時にネットワークエラーやタイムアウトが発生する → async-component-error-handling を参照してください
• SSR アプリの Time to Interactive の改善 → async-component-hydration-strategies を参照してください
• コンポーネントの再アクティブ化後にテンプレート ref が undefined になる → async-component-keepalive-ref-issue を参照してください
• ネットワークが速いときにローディングスピナーがちらつく → async-component-loading-delay を参照してください

レンダー関数

• setup のレンダー関数がリアクティブに更新されない → rendering-render-function-return-from-setup を参照してください
• 同じ vnode がツリー内に複数回現れる → render-function-vnodes-must-be-unique を参照してください
• キーなしでレンダー関数内にリストを描画する → render-function-v-for-keys-required を参照してください
• レンダー関数で .stop、.prevent を実装する → render-function-event-modifiers を参照してください
• レンダー関数内のコンポーネントで双方向バインディングを行う → render-function-v-model-implementation を参照してください
• レンダー関数でコンポーネントに文字列名を使用する → rendering-resolve-component-for-string-names を参照してください
• el や shapeFlag などの vnode 内部プロパティにアクセスする → render-function-avoid-internal-vnode-properties を参照してください
• シンプルなステートレスのプレゼンテーションコンポーネントを作成する → render-function-functional-components を参照してください
• レンダー関数でカスタムディレクティブを適用する → render-function-custom-directives を参照してください
• ウォッチャーやディープウォッチャーによる過剰な再レンダリング → rendering-excessive-rerenders-watch-vs-computed を参照してください
• テンプレートよりレンダー関数を選ぶ → rendering-prefer-templates-over-render-functions を参照してください
• Vue 2 のレンダー関数を Vue 3 に移行する → rendering-render-function-h-import-vue3 を参照してください
• h() にスロットコンテンツを誤って渡す → rendering-render-function-slots-as-functions を参照してください
• Vue の vdom 最適化ブロックを理解する → rendering-understand-vdom-block-structure を参照してください

Teleport

• Teleport のターゲット要素が DOM 内に見つからない → teleport-target-must-exist を参照してください
• Teleport されたコンテンツによって SSR のハイドレーションが壊れる → teleport-ssr-hydration を参照してください
• 親の CSS transform によってモーダルが壊れる → teleport-css-positioning-issues を参照してください
• モバイルでは異なるレイアウトが必要 → teleport-disabled-for-responsive を参照してください
• Teleport 経由で props やイベントが機能するか分からない → teleport-logical-hierarchy-preserved を参照してください
• 複数のモーダルが同じコンテナをターゲットにする → teleport-multiple-to-same-target を参照してください
• スコープ付きスタイルが Teleport されたコンテンツに適用されない → teleport-scoped-styles-limitation を参照してください

Suspense

• Suspense コンポーネントの非同期エラーを処理する必要がある場合 → suspense-no-builtin-error-handlingを参照
• Suspense の読み込み状態をプログラムで追跡したい場合 → suspense-events-for-state-trackingを参照
• 本番アプリケーションでの Suspense の使用を検討している場合 → suspense-experimental-api-stabilityを参照
• コンテンツが変わってもフォールバックが表示されない場合 → suspense-fallback-not-immediate-on-revertを参照
• Suspense コンポーネントをネストする場合 → suspense-nested-suspensible-propを参照
• Suspense を Router、Transition、KeepAlive と組み合わせる場合 → suspense-nesting-order-with-routerを参照
• ネストされた非同期コンポーネントに読み込みインジケーターが表示されない場合 → suspense-revert-only-on-root-changeを参照
• 1 つの Suspense に複数の非同期コンポーネントを配置する場合 → suspense-single-child-requirementを参照
• サーバーサイドレンダリングで Suspense を使用する場合 → suspense-ssr-hydration-issuesを参照

TypeScript

• Composition API コンポーネントで TypeScript を使って props を宣言する場合 → ts-defineprops-type-based-declarationを参照
• 可変の prop 型にデフォルト値を設定する場合 → ts-withdefaults-mutable-factory-functionを参照
• ref のアンラップに関する懸念があるリアクティブな状態に型を付ける場合 → ts-reactive-no-generic-argumentを参照
• コンポーネントのマウント後に DOM 要素へアクセスする場合 → ts-template-ref-null-handlingを参照
• 子 Vue コンポーネントへの ref に型を付ける場合 → ts-component-ref-typeof-instancetypeを参照
• TypeScript サポート付きでカスタムディレクティブを使用する場合 → ts-custom-directive-type-augmentationを参照
• コンポーネントのイベントを完全な型安全性で宣言する場合 → ts-defineemits-type-based-syntaxを参照
• TypeScript でオプショナルな boolean props を処理する場合 → ts-defineprops-boolean-default-falseを参照
• defineProps でインポートした型を安全に使用する場合 → ts-defineprops-imported-types-limitationsを参照
• 厳密な TypeScript の型チェックで DOM イベントを処理する場合 → ts-event-handler-explicit-typingを参照
• 型安全性を保ちながらコンポーネント間でデータを共有する場合 → ts-provide-inject-injection-keyを参照
• リアクティブな状態に Vue コンポーネントを格納する場合 → ts-shallowref-for-dynamic-componentsを参照
• Vue テンプレートでユニオン型を扱う場合 → ts-template-type-castingを参照

SSR

• サーバーリクエスト間でユーザーデータが漏洩する場合 → state-ssr-cross-request-pollutionを参照
• サーバーとクライアントのレンダリング結果で HTML が異なる場合 → ssr-hydration-mismatch-causesを参照
• サーバー環境とブラウザー環境の両方でコードが実行される場合 → ssr-platform-specific-apisを参照
• カスタムディレクティブがサーバーレンダリングされた HTML に表示されない場合 → ssr-custom-directive-getssrpropsを参照

パフォーマンス

• 状態の変更中に多くのリスト項目が不要に再レンダリングされる → perf-props-stability-update-optimizationを参照してください
• 数百、数千の項目をレンダリングすると DOM のパフォーマンスに問題が生じる → perf-virtualize-large-listsを参照してください
• 親コンポーネントの更新ごとに静的コンテンツが再評価される → perf-v-once-v-memo-directivesを参照してください
• コンポーネントが深くネストされた構造のため、リストのパフォーマンスが低下する → perf-avoid-component-abstraction-in-listsを参照してください
• オブジェクトを返す算出プロパティによって、予期せずエフェクトが発生する → perf-computed-object-stabilityを参照してください
• クライアント側の JavaScript 実行の遅延によって、ページ読み込みの指標が悪化する → perf-ssr-ssg-for-page-loadを参照してください

SFC（単一ファイルコンポーネント）

• コンポーネントのスクリプトブロックから名前付きエクスポートを使用しようとしている → sfc-named-exports-forbiddenを参照してください
• ビルド環境で Vue プロジェクトを開始する → sfc-recommended-for-build-projectsを参照してください
• スコープ付き CSS で子コンポーネントの要素をスタイリングする → sfc-scoped-css-child-component-stylingを参照してください
• v-html で動的に追加されたコンテンツをスタイリングする → sfc-scoped-css-dynamic-contentを参照してください
• スコープ付き CSS のセレクターのパフォーマンスを最適化する → sfc-scoped-css-performanceを参照してください
• コンポーネントのスロット経由で渡されたコンテンツをスタイリングする → sfc-scoped-css-slot-contentを参照してください
• 変更後にテンプレート内の変数が更新されない → sfc-script-setup-reactivityを参照してください
• コンポーネントのテンプレート、ロジック、スタイルを整理する → sfc-separation-of-concerns-colocateを参照してください
• プロパティ名を使ってインラインスタイルをバインドする → style-binding-camelcaseを参照してください
• 文字列連結で Tailwind クラスを組み立てる → tailwind-dynamic-class-generationを参照してください

プラグイン

• グローバルプロパティが名前の競合を引き起こす理由をデバッグする → plugin-global-properties-sparinglyを参照してください
• プラグインが動作しない、または inject が undefined を返す → plugin-install-before-mountを参照してください
• グローバルプロパティを setup 関数で利用できない → plugin-prefer-provide-inject-over-global-propertiesを参照してください
• Vue プラグインを一から作成する → plugin-structure-install-methodを参照してください
• 複数のプラグイン間での衝突を防ぐ → plugin-symbol-injection-keysを参照してください
• グローバルプロパティで TypeScript の自動補完が利用できない → plugin-typescript-type-augmentationを参照してください

アプリケーションの設定

• mount 呼び出し後にアプリケーションの設定メソッドが動作しない → configure-app-before-mountを参照してください
• mount の後にアプリケーションの設定メソッドをチェーンする必要がある → mount-return-valueを参照してください
• Vue の制御対象をページの特定のセクションだけにする → multiple-app-instancesを参照してください
• 動的なコンポーネント登録を Vite に移行する → dynamic-component-registration-viteを参照してください