resolveComponent() Resolve a Component by Name
Last updated: 2026-10-22
resolveComponent() Resolve a Component by Name
resolveComponent() looks up a registered component by name inside render functions, ready for h().
| Group | Render Functions & SSR |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const Comp = resolveComponent("my-button")
return h(Comp, null, "Click")
⚙️ Arguments
| name | The registered name (case-sensitive) |
|---|
Returns:The component definition (or the string with a warning)
▶ Example
Edit the code below and see the live result:
Output:
Renders a button labelled 'button from render'.
💡 Key Points
ℹ️ Note Render-function-only; templates resolve names automatically.
💡 Tip Direct imports are clearer; name lookup suits dynamic or global cases.
⚠️ Warning Unregistered names fall back to native tags.
🏷️ Related Render Functions & SSR
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why not import directly?
A Dynamic names cannot be statically imported.
Q Case-sensitive?
A Yes — match the registration exactly.
Q Does it work under SSR?
A Yes — resolution is synchronous.