1---
2title: Use resolveComponent for String Component Names in Render Functions
3impact: HIGH
4impactDescription: String component names don't work in Vue 3 render functions; causes silent failures or runtime errors
5type: gotcha
6tags: [vue3, render-function, components, resolveComponent, migration]
7---
8 
9# Use resolveComponent for String Component Names in Render Functions
10 
11**Impact: HIGH** - In Vue 2, render functions could use string names for globally or locally registered components. In Vue 3, you must either import components directly or use `resolveComponent()`. Using string names causes components to render as HTML elements or fail silently.
12 
13## Task Checklist
14 
15- [ ] Import components directly when possible (preferred)
16- [ ] Use `resolveComponent()` for dynamically registered components
17- [ ] Use `resolveDynamicComponent()` for `<component :is="">` equivalent
18- [ ] Call `resolveComponent()` inside `setup()` or the render function
19- [ ] Handle the case when component is not found
20 
21**Incorrect:**
22```js
23import { h } from 'vue'
24 
25export default {
26  render() {
27    // WRONG: String names don't resolve to components
28    return h('div', [
29      h('my-component', { value: 1 }),  // Renders <my-component> HTML element!
30      h('router-link', { to: '/' }, 'Home')  // Also fails
31    ])
32  }
33}
34```
35 
36**Correct (Direct Import - Preferred):**
37```js
38import { h } from 'vue'
39import MyComponent from './MyComponent.vue'
40import { RouterLink } from 'vue-router'
41 
42export default {
43  render() {
44    return h('div', [
45      h(MyComponent, { value: 1 }),
46      h(RouterLink, { to: '/' }, () => 'Home')
47    ])
48  }
49}
50```
51 
52**Correct (resolveComponent for Registered Components):**
53```js
54import { h, resolveComponent } from 'vue'
55 
56export default {
57  components: {
58    MyComponent: () => import('./MyComponent.vue')
59  },
60 
61  setup() {
62    // Resolve inside setup - component context is available
63    const MyComponent = resolveComponent('MyComponent')
64 
65    return () => h('div', [
66      h(MyComponent, { value: 1 })
67    ])
68  }
69}
70 
71// Or resolve inside render function
72export default {
73  render() {
74    const MyComponent = resolveComponent('MyComponent')
75    const RouterLink = resolveComponent('RouterLink')
76 
77    return h('div', [
78      h(MyComponent, { value: 1 }),
79      h(RouterLink, { to: '/' }, () => 'Home')
80    ])
81  }
82}
83```
84 
85## When to Use Each Approach
86 
87| Approach | Use When |
88|----------|----------|
89| Direct Import | Component is known at build time (most common) |
90| `resolveComponent()` | Component is registered globally or locally by name |
91| `resolveComponent()` | Dynamic component selection from registered set |
92 
93## Handling Missing Components
94 
95```js
96import { h, resolveComponent } from 'vue'
97 
98export default {
99  setup() {
100    // resolveComponent returns the component or the string name if not found
101    const DynamicComponent = resolveComponent('MaybeRegistered')
102 
103    // Check if resolution succeeded
104    if (typeof DynamicComponent === 'string') {
105      console.warn(`Component "${DynamicComponent}" not found`)
106    }
107 
108    return () => h(DynamicComponent, { value: 1 })
109  }
110}
111```
112 
113## Dynamic Component Selection
114 
115```js
116import { h, resolveComponent, computed } from 'vue'
117 
118export default {
119  props: ['componentName'],
120 
121  setup(props) {
122    // For truly dynamic components, resolve in render function
123    return () => {
124      const Component = resolveComponent(props.componentName)
125      return h(Component, { /* props */ })
126    }
127  }
128}
129```
130 
131For the equivalent of `<component :is="componentName">`, use `resolveDynamicComponent`:
132 
133```js
134import { h, resolveDynamicComponent } from 'vue'
135 
136export default {
137  props: ['componentType'],
138  setup(props) {
139    return () => {
140      // Resolves string names, component objects, or built-in elements
141      const component = resolveDynamicComponent(props.componentType)
142      return h(component, { /* props */ })
143    }
144  }
145}
146```
147 
148## Practical Example: Tab Component
149 
150```js
151import { h, resolveComponent, ref } from 'vue'
152 
153export default {
154  setup() {
155    const currentTab = ref('TabA')
156    const tabs = ['TabA', 'TabB', 'TabC']
157 
158    return () => h('div', [
159      // Tab buttons
160      h('div', { class: 'tabs' },
161        tabs.map(tab =>
162          h('button', {
163            key: tab,
164            class: { active: currentTab.value === tab },
165            onClick: () => currentTab.value = tab
166          }, tab)
167        )
168      ),
169 
170      // Dynamic component based on current tab
171      h(resolveComponent(currentTab.value))
172    ])
173  }
174}
175```
176 
177## Resolving Built-in Components
178 
179For built-in components like `<Transition>` or `<KeepAlive>`, import them directly from Vue:
180 
181```js
182import { h, Transition, KeepAlive, Teleport, Suspense } from 'vue'
183 
184export default {
185  setup() {
186    return () => h(Transition, { name: 'fade' }, () =>
187      h('div', 'Content')
188    )
189  }
190}
191```
192 
193## Resolving Directives
194 
195Similar pattern for custom directives:
196 
197```js
198import { h, resolveDirective, withDirectives } from 'vue'
199 
200export default {
201  render() {
202    const vFocus = resolveDirective('focus')
203 
204    return withDirectives(
205      h('input', { type: 'text' }),
206      [[vFocus]]
207    )
208  }
209}
210```
211 
212## Migration from Vue 2
213 
214```js
215// Vue 2 (worked with registered components)
216render(h) {
217  return h('my-component', { props: { value: 1 } })
218}
219 
220// Vue 3 (must resolve or import)
221import { h, resolveComponent } from 'vue'
222 
223render() {
224  const MyComponent = resolveComponent('my-component')
225  return h(MyComponent, { value: 1 })  // Note: props go directly, not in 'props' key
226}
227```
228 
229## Reference
230- [Vue 3 Migration - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)
231- [Vue.js Render Function API - resolveComponent](https://vuejs.org/api/render-function.html#resolvecomponent)
232