createComponent() — vue Function Reference
Architecture documentation for the createComponent() function in create-component.ts from the vue codebase.
Entity Profile
Dependency Diagram
graph TD 9f53d048_e9bd_bd7d_3ea7_71affe1529d8["createComponent()"] dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7["renderAsyncComponent()"] dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7 -->|calls| 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 7716a396_9ff2_1c13_0212_ab7b31aad036["_createElement()"] 7716a396_9ff2_1c13_0212_ab7b31aad036 -->|calls| 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 ede91bbf_a756_b9f6_cf8b_d5c2bb618503["resolveConstructorOptions()"] 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 -->|calls| ede91bbf_a756_b9f6_cf8b_d5c2bb618503 eae37f21_596b_91f3_5635_c38e314bc310["transformModel()"] 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 -->|calls| eae37f21_596b_91f3_5635_c38e314bc310 c4732d15_fd52_2b9b_6d6d_65e127972dda["createFunctionalComponent()"] 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 -->|calls| c4732d15_fd52_2b9b_6d6d_65e127972dda d3d33260_a133_3fcf_4b95_204484fe4cc9["installComponentHooks()"] 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 -->|calls| d3d33260_a133_3fcf_4b95_204484fe4cc9 b6fb05fd_b015_6b22_977c_6534594c61d5["getComponentName()"] 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 -->|calls| b6fb05fd_b015_6b22_977c_6534594c61d5 style 9f53d048_e9bd_bd7d_3ea7_71affe1529d8 fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
src/core/vdom/create-component.ts lines 101–210
export function createComponent(
Ctor: typeof Component | Function | ComponentOptions | void,
data: VNodeData | undefined,
context: Component,
children?: Array<VNode>,
tag?: string
): VNode | Array<VNode> | void {
if (isUndef(Ctor)) {
return
}
const baseCtor = context.$options._base
// plain options object: turn it into a constructor
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor as typeof Component)
}
// if at this stage it's not a constructor or an async component factory,
// reject.
if (typeof Ctor !== 'function') {
if (__DEV__) {
warn(`Invalid Component definition: ${String(Ctor)}`, context)
}
return
}
// async component
let asyncFactory
// @ts-expect-error
if (isUndef(Ctor.cid)) {
asyncFactory = Ctor
Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
if (Ctor === undefined) {
// return a placeholder node for async component, which is rendered
// as a comment node but preserves all the raw information for the node.
// the information will be used for async server-rendering and hydration.
return createAsyncPlaceholder(asyncFactory, data, context, children, tag)
}
}
data = data || {}
// resolve constructor options in case global mixins are applied after
// component constructor creation
resolveConstructorOptions(Ctor as typeof Component)
// transform component v-model data into props & events
if (isDef(data.model)) {
// @ts-expect-error
transformModel(Ctor.options, data)
}
// extract props
// @ts-expect-error
const propsData = extractPropsFromVNodeData(data, Ctor, tag)
// functional component
// @ts-expect-error
if (isTrue(Ctor.options.functional)) {
return createFunctionalComponent(
Ctor as typeof Component,
propsData,
data,
context,
children
)
}
// extract listeners, since these needs to be treated as
// child component listeners instead of DOM listeners
const listeners = data.on
// replace with listeners with .native modifier
// so it gets processed during parent component patch.
data.on = data.nativeOn
// @ts-expect-error
if (isTrue(Ctor.options.abstract)) {
// abstract components do not keep anything
// other than props & listeners & slot
// work around flow
const slot = data.slot
data = {}
if (slot) {
data.slot = slot
}
}
// install component management hooks onto the placeholder node
installComponentHooks(data)
// return a placeholder vnode
// @ts-expect-error
const name = getComponentName(Ctor.options) || tag
const vnode = new VNode(
// @ts-expect-error
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data,
undefined,
undefined,
undefined,
context,
// @ts-expect-error
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
return vnode
}
Domain
Subdomains
Calls
Called By
Source
Frequently Asked Questions
What does createComponent() do?
createComponent() is a function in the vue codebase.
What does createComponent() call?
createComponent() calls 5 function(s): createFunctionalComponent, getComponentName, installComponentHooks, resolveConstructorOptions, transformModel.
What calls createComponent()?
createComponent() is called by 2 function(s): _createElement, renderAsyncComponent.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free