Home / Function/ createComponent() — vue Function Reference

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

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