app.directive() ディレクティブのグローバル登録
最終更新：2026-10-22
app.directive() ディレクティブのグローバル登録
app.directive() はグローバルなカスタムディレクティブを登録します。どのコンポーネントテンプレートでも v-xxx として使えます。権限制御やクリックアウトサイドなどの共通挙動に向いています。
| グループ | グローバル API |
|---|---|
| 種類 | API |
| スコープ | グローバル |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
app.directive("focus", {
mounted(el) { el.focus() }
})⚙️ 引数
| name, directive? | ディレクティブ名（v- を使う場合は接頭辞を除く）+ ディレクティブ定義（mounted/updated などのフックを含む） |
|---|
戻り値：アプリインスタンス（チェーン可能）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The input receives focus automatically.💡 ポイント
ℹ️ 補足 ディレクティブのフックはライフサイクルと同じ名前です：created/beforeMount/mounted/beforeUpdate/updated/beforeUnmount/unmounted。
💡 ヒント コンポーザブルにできるものはコンポーザブルを優先してください。ディレクティブは「純粋な DOM 挙動」を広く再利用する場面に向いています。
⚠️ 注意 ディレクティブの引数と修飾子は binding オブジェクトに入ります。分割代入で取り出してください。
🏷️ 関連グローバル API
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q コンポーザブルとの使い分けは？
A 要素を直接操作し、広く再利用する → ディレクティブ。状態とロジックが必要 → コンポーザブル。
Q ディレクティブは引数を受け取れますか？
A 受け取れます。v-demo:arg.mod="value" のように書き、binding.arg/modifiers/value から読み取ります。
Q ローカルディレクティブはどう書きますか？
A コンポーネント内の directives オプションで宣言します。そのコンポーネントのテンプレートでのみ使えます。
