h() function signature for creating vnodes
The h() function creates virtual DOM nodes. Its full signature is: function h(type: string | Component, props?: object | null, children?: Children | Slot | Slots): VNode. A shorter form omits props: function h(type: string | Component, children?: Children | Slot): VNode. The first argument is either a string for native HTML elements or a Vue component definition. The second argument is props to pass, and the third is children. Children can be a string, number, boolean, VNode, null, or an array of these. A Slot is a function returning Children, and Slots is an object of slot functions.
h() examples creating native elements
Examples of creating native elements with h(): h('div'), h('div', { id: 'foo' }), h('div', { class: 'bar', innerHTML: 'hello' }), h('div', { class: [foo, { bar }], style: { color: 'red' } }), h('div', { onClick: () => {} }), h('div', { id: 'foo' }, 'hello'), h('div', 'hello'), h('div', [h('span', 'hello')]), h('div', ['hello', h('span', 'hello')]). Event listeners are passed as onXxx. Class and style support the same object/array syntax as in templates. Props can be omitted when there are no props.
h() examples creating components with slots
Examples of creating components with h(): h(Foo, { someProp: 'hello', onUpdate: () => {} }) passes props and event listeners. h(Foo, () => 'default slot') passes a single default slot. h(MyComponent, null, { default: () => 'default slot', foo: () => h('div', 'foo'), bar: () => [h('span', 'one'), h('span', 'two')] }) passes named slots with null required to avoid the slots object being treated as props.
mergeProps() function
mergeProps() merges multiple props objects with special handling. Signature: function mergeProps(...args: object[]): object. It supports merging class, style, and onXxx event listeners. Multiple listeners with the same name are merged into an array. For simple overwrites without special merge behavior, native object spread can be used instead.
mergeProps() example
Example of mergeProps(): const one = { class: 'foo', onClick: handlerA }, const two = { class: { bar: true }, onClick: handlerB }, const merged = mergeProps(one, two) results in { class: 'foo bar', onClick: [handlerA, handlerB] }.
cloneVNode() function
cloneVNode() clones a vnode. Signature: function cloneVNode(vnode: VNode, extraProps?: object): VNode. Returns a cloned vnode optionally with extra props merged with the original. Vnodes should be considered immutable once created and should not be mutated directly. Instead, clone them with different or extra props. cloneVNode() handles the internal logic that is not as simple as an object spread.
cloneVNode() example
Example of cloneVNode(): import { h, cloneVNode } from 'vue', const original = h('div'), const cloned = cloneVNode(original, { id: 'foo' }).
isVNode() function
isVNode() checks if a value is a vnode. Signature: function isVNode(value: unknown): boolean. It returns true if the value is a vnode, false otherwise.
resolveComponent() function
resolveComponent() manually resolves a registered component by name. Signature: function resolveComponent(name: string): Component | string. It must be called inside setup() or the render function to resolve from the correct component context. If the component is not found, a runtime warning is emitted and the name string is returned. This is not needed if you can import the component directly.
resolveComponent() example
Example of resolveComponent() in setup(): import { h, resolveComponent } from 'vue', export default { setup() { const ButtonCounter = resolveComponent('ButtonCounter'), return () => { return h(ButtonCounter) } } }.
resolveDirective() function
resolveDirective() manually resolves a registered directive by name. Signature: function resolveDirective(name: string): Directive | undefined. It must be called inside setup() or the render function to resolve from the correct component context. If the directive is not found, a runtime warning is emitted and the function returns undefined. This is not needed if you can import the directive directly.
withDirectives() function
withDirectives() adds custom directives to vnodes. Signature: function withDirectives(vnode: VNode, directives: DirectiveArguments): VNode. The second argument is an array of custom directives. Each custom directive is represented as an array in the form [Directive, value, argument, modifiers]. Tailing elements can be omitted if not needed. DirectiveArguments is Array<[Directive] | [Directive, any] | [Directive, any, string] | [Directive, any, string, DirectiveModifiers]>.
withDirectives() example
Example of withDirectives(): import { h, withDirectives } from 'vue', const pin = { mounted() { /* ... */ }, updated() { /* ... */ } }, const vnode = withDirectives(h('div'), [[pin, 200, 'top', { animate: true }]]). This is equivalent to <div v-pin:top.animate="200"></div>.
withModifiers() function
withModifiers() adds built-in v-on modifiers to an event handler function. Signature: function withModifiers(fn: Function, modifiers: ModifierGuardsKeys[]): Function. It wraps a function with modifier behavior for event handling.
withModifiers() example
Example of withModifiers(): import { h, withModifiers } from 'vue', const vnode = h('button', { onClick: withModifiers(() => { // ... }, ['stop', 'prevent']) }). This is equivalent to v-on:click.stop.prevent.