1---
2title: Import h Globally in Vue 3 Render Functions
3impact: HIGH
4impactDescription: Vue 3 requires explicit h import; using Vue 2 patterns causes runtime errors
5type: gotcha
6tags: [vue3, render-function, migration, h, vnode, breaking-change]
7---
8 
9# Import h Globally in Vue 3 Render Functions
10 
11**Impact: HIGH** - In Vue 2, the `h` function (createElement) was passed as an argument to render functions. In Vue 3, `h` must be explicitly imported from 'vue'. Using Vue 2 patterns causes runtime errors.
12 
13## Task Checklist
14 
15- [ ] Import `h` from 'vue' at the top of files using render functions
16- [ ] Remove the `h` parameter from render function signatures
17- [ ] Update all render functions when migrating from Vue 2
18 
19**Incorrect (Vue 2 pattern - broken in Vue 3):**
20```js
21// WRONG: Vue 2 pattern - h is not passed as argument in Vue 3
22export default {
23  render(h) {  // h is undefined in Vue 3!
24    return h('div', [
25      h('span', 'Hello')
26    ])
27  }
28}
29 
30// WRONG: Using createElement alias from Vue 2
31export default {
32  render(createElement) {  // Also undefined
33    return createElement('div', 'Hello')
34  }
35}
36```
37 
38**Correct (Vue 3 pattern):**
39```js
40// CORRECT: Import h from vue
41import { h } from 'vue'
42 
43export default {
44  render() {
45    return h('div', [
46      h('span', 'Hello')
47    ])
48  }
49}
50```
51 
52## With Composition API
53 
54```js
55import { h, ref } from 'vue'
56 
57export default {
58  setup() {
59    const count = ref(0)
60 
61    // Return a render function from setup
62    return () => h('div', [
63      h('button', { onClick: () => count.value++ }, `Count: ${count.value}`)
64    ])
65  }
66}
67```
68 
69## With script setup (Not Recommended)
70 
71```vue
72<script setup>
73import { h, ref } from 'vue'
74 
75const count = ref(0)
76 
77// Cannot return render function from script setup
78// Must use a separate render option or template
79</script>
80 
81<!-- script setup typically uses templates, not render functions -->
82<template>
83  <div>
84    <button @click="count++">Count: {{ count }}</button>
85  </div>
86</template>
87```
88 
89If you need render functions with `<script setup>`, use the `render` option:
90 
91```vue
92<script>
93import { h, ref } from 'vue'
94 
95export default {
96  setup() {
97    const count = ref(0)
98    return () => h('button', { onClick: () => count.value++ }, count.value)
99  }
100}
101</script>
102```
103 
104## Component Resolution Change
105 
106In Vue 3, you must also explicitly resolve components:
107 
108**Incorrect:**
109```js
110// Vue 2: Could use string names for registered components
111render(h) {
112  return h('my-component', { props: { value: 1 } })
113}
114```
115 
116**Correct:**
117```js
118import { h, resolveComponent } from 'vue'
119 
120export default {
121  render() {
122    // Must resolve component by name
123    const MyComponent = resolveComponent('my-component')
124    return h(MyComponent, { value: 1 })
125  }
126}
127 
128// Or import the component directly (preferred)
129import { h } from 'vue'
130import MyComponent from './MyComponent.vue'
131 
132export default {
133  render() {
134    return h(MyComponent, { value: 1 })
135  }
136}
137```
138 
139## Why This Changed
140 
141Vue 3's `h` is globally importable to:
1421. Enable tree-shaking (unused features can be removed)
1432. Support better TypeScript inference
1443. Allow use outside of component context
145 
146## Reference
147- [Vue 3 Migration Guide - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)
148- [Vue.js Render Functions & JSX](https://vuejs.org/guide/extras/render-function.html)
149