formatComponentName() — vue Function Reference

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

Function typescript ServerRenderer SSROptimizer calls 3 called by 1

Entity Profile

ServerRenderer→ SSROptimizer→ formatComponentName() — vue Function Reference

Dependency Diagram

graph TD
  8d5fd9dd_3c22_737f_cb3e_509698d89d76["formatComponentName()"]
  73c89571_1794_e614_730a_f2e51e73ac21["generateComponentTrace()"]
  73c89571_1794_e614_730a_f2e51e73ac21 -->|calls| 8d5fd9dd_3c22_737f_cb3e_509698d89d76
  5af21a52_5316_e857_22eb_dce69bb60268["isFunction()"]
  8d5fd9dd_3c22_737f_cb3e_509698d89d76 -->|calls| 5af21a52_5316_e857_22eb_dce69bb60268
  b6fb05fd_b015_6b22_977c_6534594c61d5["getComponentName()"]
  8d5fd9dd_3c22_737f_cb3e_509698d89d76 -->|calls| b6fb05fd_b015_6b22_977c_6534594c61d5
  97d65536_1e3f_415e_ccc2_a701a049026a["classify()"]
  8d5fd9dd_3c22_737f_cb3e_509698d89d76 -->|calls| 97d65536_1e3f_415e_ccc2_a701a049026a
  style 8d5fd9dd_3c22_737f_cb3e_509698d89d76 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}` : '')
    )
  }