formatComponentName() — vue Function Reference

Architecture documentation for the formatComponentName() function in debug.ts from the vue codebase.

Function typescript VueCore Instance calls 2 called by 1

Entity Profile

VueCore→ Instance→ formatComponentName() — vue Function Reference

Dependency Diagram

graph TD
  f9fc3444_e4f6_0de8_4a6b_dea19c134650["formatComponentName()"]
  4be43750_5259_d6e1_902d_9b3e2df2b9c4["debug.ts"]
  f9fc3444_e4f6_0de8_4a6b_dea19c134650 -->|defined in| 4be43750_5259_d6e1_902d_9b3e2df2b9c4
  09627f77_a9f0_d54c_8a26_ee951d89dfbc["generateComponentTrace()"]
  09627f77_a9f0_d54c_8a26_ee951d89dfbc -->|calls| f9fc3444_e4f6_0de8_4a6b_dea19c134650
  07237020_2f32_55be_02ad_e77197985632["getComponentName()"]
  f9fc3444_e4f6_0de8_4a6b_dea19c134650 -->|calls| 07237020_2f32_55be_02ad_e77197985632
  ab07e051_9ed2_c0d3_8069_589d5203881c["classify()"]
  f9fc3444_e4f6_0de8_4a6b_dea19c134650 -->|calls| ab07e051_9ed2_c0d3_8069_589d5203881c
  style f9fc3444_e4f6_0de8_4a6b_dea19c134650 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/util/debug.ts lines 34–55

  formatComponentName = (vm, includeFile) => {
    if (vm.$root === vm) {
      return '<Root>'
    }
    const options =
      isFunction(vm) && (vm as any).cid != null
        ? (vm as any).options
        : vm._isVue
        ? vm.$options || (vm.constructor as any).options
        : vm
    let name = getComponentName(options)
    const file = options.__file
    if (!name && file) {
      const match = file.match(/([^/\\]+)\.vue$/)
      name = match && match[1]
    }

    return (
      (name ? `<${classify(name)}>` : `<Anonymous>`) +
      (file && includeFile !== false ? ` at ${file}` : '')
    )
  }