vuetifyjs/vuetify · error · Error

[Vuetify] useGroupItem composable must be used inside a comp

Error message

[Vuetify] useGroupItem composable must be used inside a component setup function

What it means

Thrown by useGroupItem() when getCurrentInstance('useGroupItem') returns null. Vue's getCurrentInstance() is only non-null during a component's setup function synchronous execution. Calling the composable outside setup (e.g. in an async callback, event handler, module scope, or after an `await`) yields null.

Source

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

export function useGroupItem (
  props: GroupItemProps,
  injectKey: InjectionKey<GroupProvide>,
  required?: true,
): GroupItemProvide
export function useGroupItem (
  props: GroupItemProps,
  injectKey: InjectionKey<GroupProvide>,
  required: false,
): GroupItemProvide | null
export function useGroupItem (
  props: GroupItemProps,
  injectKey: InjectionKey<GroupProvide>,
  required = true,
): 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))

View on GitHub (pinned to 8d153908df)

Solutions

Call useGroupItem() synchronously at the top of your setup (or <script setup>) before any await.
Hoist the call above async boundaries so getCurrentInstance() is still bound.
If you need the group item later, capture the returned handle synchronously and reference it async.

Example fix

// before
const items = await fetchItems()      // suspends
useGroupItem(props, MyGroupKey)        // throws: instance is null

// after
useGroupItem(props, MyGroupKey)        // call first, synchronously
const items = await fetchItems()

Defensive patterns

Strategy: validation

Validate before calling

import { getCurrentInstance } from 'vue'

function assertInSetup(hook = 'useGroupItem') {
  if (!getCurrentInstance()) {
    throw new Error(`${hook} must be called synchronously inside setup()`)
  }
}

Type guard

import { getCurrentInstance } from 'vue'
function inSetup(): boolean {
  return !!getCurrentInstance()
}

Prevention

Call composables at the top of setup, before any await.
Never call composables inside onMounted/watchers/event handlers.
Capture handles synchronously and reuse them in async code.

When it happens

Trigger: Calling useGroupItem() inside an async setup after the first `await`, in a lifecycle hook callback, in a watcher/effect body, or at module/standalone scope rather than at the top of setup().

Common situations: Top-level `await` in <script setup> suspending before the composable call; refactoring that moved the call into a function; calling the composable inside onMounted; or invoking it from plain TS.

Related errors

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