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().

GroupRender Functions & SSR
KindAPI
ScopeComponent
Vue Version3.0+
SSR SupportYes

📝 Syntax

const Comp = resolveComponent("my-button")
return h(Comp, null, "Click")

⚙️ Arguments

nameThe 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.
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.
Web-Tutorial.com

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站,几个人的小团队,精力有限。页面虽经检查,难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏