app.provide() アプリケーションレベルの依存注入
最終更新：2026-10-22
app.provide() アプリケーションレベルの依存注入
app.provide() はアプリケーションレベルで依存を提供します。すべてのコンポーネントが inject できるため、グローバル設定や i18n インスタンスなどに向いています。
| グループ | グローバル API |
|---|---|
| 種類 | API |
| スコープ | グローバル |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
app.provide("i18n", i18nInstance)⚙️ 引数
| key, value | キー（文字列または Symbol）+ 値（ref/関数を含む任意のもの） |
|---|
戻り値：アプリインスタンス（チェーン可能）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows the provided config value.💡 ポイント
ℹ️ 補足 globalProperties より推奨されます。inject は明示的な宣言なので、出所が明確でテストしやすいです。
💡 ヒント よくある用途：i18n、テーマ設定、ログインスタンスなど、コンポーネント横断の基盤。
⚠️ 注意 普通のオブジェクトを渡すとスナップショットになります。リアクティブにしたい場合は ref/reactive を渡してください。
🏷️ 関連グローバル API
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q （コンポーネント内の）provide との違いは？
A スコープが異なります。アプリケーションレベルはすべてのコンポーネントから見えますが、コンポーネントレベルは子孫にだけ見えます。後者の方が推奨されます。
Q 関数を提供できますか？
A できます。API クライアントやユーティリティ関数の注入によく使われます。
Q 上書きされますか？
A コンポーネント内で同名の provide を使うと、子孫に対して上書きできます（近い方優先の原則）。
