app.component() Register a Global Component
Last updated: 2026-10-22
app.component() Register a Global Component
app.component() registers a component globally, available to every template — for base components like buttons and icons.
| Group | Global API |
|---|---|
| Kind | API |
| Scope | Global |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
app.component("my-btn", { template: "<button><slot></slot></button>" })⚙️ Arguments
| name, component? | A name plus definition (passing only a name retrieves it) |
|---|
Returns：The app instance (chainable)
▶ Example
Edit the code below and see the live result:
Output：
Renders a button labelled 'Global button'.💡 Key Points
⚠️ Warning Globals cannot be tree-shaken — prefer local registration.
💡 Tip Reserve globals for base UI; register business components locally.
ℹ️ Note Register before mounting, usually in the entry file.
🏷️ Related Global API
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Global or local?
A Local keeps dependencies explicit and shakable.
Q Any naming rules?
A Use multi-word names to avoid native tag clashes.
Q What if I register a duplicate name?
A The latest registration wins with a dev warning.
