app.component() コンポーネントのグローバル登録
最終更新：2026-10-22
app.component() コンポーネントのグローバル登録
app.component() はコンポーネントをグローバルに登録します。すべてのコンポーネントテンプレートで直接使えます。ボタンやアイコンなどのベースコンポーネントに向いています。
| グループ | グローバル API |
|---|---|
| 種類 | API |
| スコープ | グローバル |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
app.component("my-btn", { template: "<button><slot></slot></button>" })⚙️ 引数
| name, component? | コンポーネント名 + コンポーネント定義（名前だけ渡すと登録済みコンポーネントを返します） |
|---|
戻り値：アプリインスタンス（メソッドチェーン可能）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Renders a button labelled 'Global button'.💡 ポイント
⚠️ 注意 グローバル登録は tree-shaking で除去できません。大規模プロジェクトではローカル登録を優先してください。
💡 ヒント ベース UI（ボタン/アイコン/カード）だけに使い、業務コンポーネントは必ずローカル登録してください。
ℹ️ 補足 実際のプロジェクトでは通常、エントリーファイルでまとめて登録します。mount の前に行うことに注意してください。
🏷️ 関連グローバル API
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q ローカル登録との使い分けは？
A 使う場所で登録する（ローカル）方が明確で、tree-shaking も効きます。ベースコンポーネントだけグローバルにします。
Q コンポーネント名に決まりはありますか？
A 複数単語の kebab-case（DOM テンプレート）または PascalCase（SFC）を使い、単語 1 つでネイティブタグと衝突するのを避けてください。
Q 同名のコンポーネントを登録するとどうなりますか？
A 後に登録したものが先の同名コンポーネントを上書きします（開発環境では警告が出ます）。
