vuetifyjs/vuetify · error · Error

[Vuetify] Could not determine component name

Error message

[Vuetify] Could not determine component name

What it means

Thrown by internalUseDefaults() when the current component instance has neither `name` nor `__name` on its type. The composable needs a name to look up component-specific defaults. SFCs compiled with name inference set __name; an anonymous component (e.g. a render function or defineComponent without name) has neither.

Source

Thrown at packages/vuetify/src/composables/defaults.ts:103

  return newDefaults
}

function propIsDefined (vnode: VNode, prop: string) {
  return vnode.props && (typeof vnode.props[prop] !== 'undefined' ||
    typeof vnode.props[toKebabCase(prop)] !== 'undefined')
}

export function internalUseDefaults (
  props: Record<string, any> = {},
  name?: string,
  defaults = injectDefaults()
) {
  const vm = getCurrentInstance('useDefaults')

  name = name ?? vm.type.name ?? vm.type.__name
  if (!name) {
    throw new Error('[Vuetify] Could not determine component name')
  }

  const componentDefaults = computed(() => defaults.value?.[props._as ?? name])
  const _props = new Proxy(props, {
    get (target, prop: string) {
      const propValue = Reflect.get(target, prop)
      if (prop === 'class' || prop === 'style') {
        return [componentDefaults.value?.[prop], propValue].filter(v => v != null)
      }
      if (propIsDefined(vm.vnode, prop)) return propValue
      const _componentDefault = componentDefaults.value?.[prop]
      if (_componentDefault !== undefined) return _componentDefault
      const _globalDefault = defaults.value?.global?.[prop]
      if (_globalDefault !== undefined) return _globalDefault
      return propValue
    },
  })

View on GitHub (pinned to 8d153908df)

Solutions

1. Give the component an explicit `name` in its options (defineComponent({ name: 'MyComp', ... })).
2. Pass the name explicitly as the second argument to useDefaults(props, 'MyComp').
3. For SFCs, ensure the vue compiler emits __name (default in modern @vitejs/plugin-vue).

Example fix

// before
export default defineComponent({
  setup () {
    const defaults = useDefaults() // throws: no name
    return {}
  },
})

// after
export default defineComponent({
  name: 'MyCard',
  setup () {
    const defaults = useDefaults()
    return {}
  },
})
// or pass it explicitly:
useDefaults({}, 'MyCard')

import { getCurrentInstance } from 'vue'

function ensureComponentName(explicit?: string): string {
  const vm = getCurrentInstance()
  const name = explicit ?? vm?.type.name ?? vm?.type.__name
  if (!name) throw new TypeError('Component using useDefaults needs a name')
  return name
}

import { getCurrentInstance } from 'vue'
function componentHasName(): boolean {
  const vm = getCurrentInstance()
  return !!(vm?.type.name ?? vm?.type.__name)
}

When it happens

Trigger: Calling useDefaults() inside an anonymous component — a plain object component without a `name` field, an inline functional/render component, or an SFC whose compiler did not emit __name.

Common situations: Custom components that adopt Vuetify's defaults system but were authored without a name; components created via h()/render functions; or a bundler/loader config that strips the name inference.

Related errors

• [Vuetify] Could not find defaults instance
• foo
• Missing group!
• Missing headers!
• Missing pagination!

AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12). Data as JSON: /api/errors/63a6dfaf84a91231. Report an issue: GitHub.