vuetifyjs/vuetify · error · Error

[Vuetify] Could not find useGroup injection with symbol ${in

Error message

[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}

What it means

Thrown by useGroupItem() when inject(injectKey, null) returns null AND `required` is true (the default). The group provider (created by useGroup, e.g. VBtnToggle, VChipGroup, VItemGroup, VList) must be an ancestor providing injectKey. Without it the item has no group to register with.

Source

Thrown at packages/vuetify/src/composables/group.ts:117

): GroupItemProvide | null {
  const vm = getCurrentInstance('useGroupItem')

  if (!vm) {
    throw new Error(
      '[Vuetify] useGroupItem composable must be used inside a component setup function'
    )
  }

  const id = useId()

  provide(Symbol.for(`${injectKey.description}:id`), id)

  const group = inject(injectKey, null)

  if (!group) {
    if (!required) return group

    throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`)
  }

  const value = toRef(() => props.value)
  const disabled = computed(() => !!(group.disabled.value || props.disabled))

  function register () {
    group?.register({ id, value, disabled }, vm)
  }

  function unregister () {
    group?.unregister(id)
  }

  register()
  onBeforeUnmount(() => unregister())

  const isSelected = computed(() => {
    return group.isSelected(id)

View on GitHub (pinned to 8d153908df)

Solutions

1. Wrap the item in the matching group provider component (VBtnToggle, VChipGroup, VItemGroup, etc.).
2. If the item may legitimately stand alone, call useGroupItem(props, key, false) so a missing group returns null instead of throwing.
3. Ensure the injectKey matches the one provided by the ancestor group; avoid Teleport that breaks the chain.

Example fix

// before
<VBtn :value="1">One</VBtn> <!-- no toggle ancestor -->

// after
<VBtnToggle v-model="selected">
  <VBtn :value="1">One</VBtn>
</VBtnToggle>

// or, for a custom standalone item, make it optional:
useGroupItem(props, MyGroupKey, /* required */ false)

import { inject, type InjectionKey } from 'vue'
function groupExists(key: InjectionKey<unknown>): boolean {
  return inject(key, null) != null
}

import { inject, type InjectionKey } from 'vue'
function hasGroupProvider<T>(key: InjectionKey<T>): boolean {
  return inject(key, null) != null
}

try {
  useGroupItem(props, MyKey) // required by default
} catch (e) {
  if (e instanceof Error && /Could not find useGroup injection/.test(e.message)) {
    // fall back: render the item standalone
  } else throw e
}

When it happens

Trigger: Using a group-item component (VBtn inside a toggle, VChip in a group, VRadio/VListItem with a group key) without the corresponding group provider ancestor. Also when passing the wrong injectKey, or rendering the item in a teleport/portal that breaks the provide/inject chain.

Common situations: Rendering VBtn with `:value` expecting toggle behavior but no VBtnToggle/VItemGroup wrapping it; a Teleport that moves the child out of the provider's subtree; a custom item using the wrong symbol key; or duplicate Vuetify installs breaking Symbol identity.

Related errors

• [Vuetify] useGroupItem composable must be used inside a comp
• foo
• Missing group!
• Missing headers!
• Missing pagination!

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