Render Function APIs | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
Creates virtual DOM nodes (vnodes).
Types are simplified for readability.
The first argument can either be a string (for native elements) or a Vue component definition. The second argument is the props to be passed, and the third argument is the children.
When creating a component vnode, the children must be passed as slot functions. A single slot function can be passed if the component expects only the default slot. Otherwise, the slots must be passed as an object of slot functions.
For convenience, the props argument can be omitted when the children is not a slots object.
Creating native elements:
Creating components:
See also Guide - Render Functions - Creating VNodes
Merge multiple props objects with special handling for certain props.
mergeProps() supports merging multiple props objects with special handling for the following props:
If you do not need the merge behavior and want simple overwrites, native object spread can be used instead.
Returns a cloned vnode, optionally with extra props to merge with the original.
Vnodes should be considered immutable once created, and you should not mutate the props of an existing vnode. Instead, clone it with different / extra props.
Vnodes have special internal properties, so cloning them is not as simple as an object spread. cloneVNode() handles most of the internal logic.
Checks if a value is a vnode.
For manually resolving a registered component by name.
Note: you do not need this if you can import the component directly.
resolveComponent() must be called inside either setup() or the render function in order to resolve from the correct component context.
If the component is not found, a runtime warning will be emitted, and the name string is returned.
See also Guide - Render Functions - Components
For manually resolving a registered directive by name.
Note: you do not need this if you can import the directive directly.
resolveDirective() must be called inside either setup() or the render function in order to resolve from the correct component context.
If the directive is not found, a runtime warning will be emitted, and the function returns undefined.
See also Guide - Render Functions - Custom Directives
For adding custom directives to vnodes.
Wraps an existing vnode with custom directives. The second argument is an array of custom directives. Each custom directive is also represented as an array in the form of [Directive, value, argument, modifiers]. Tailing elements of the array can be omitted if not needed.
See also Guide - Render Functions - Custom Directives
For adding built-in v-on modifiers to an event handler function.
See also Guide - Render Functions - Event Modifiers
Edit this page on GitHub