{"record":{"id":"e069a5968106c8b2","repo":"vuetifyjs/vuetify","slug":"vuetify-usegroupitem-composable-must-be-used-ins","errorCode":null,"errorMessage":"[Vuetify] useGroupItem composable must be used inside a component setup function","messagePattern":"\\[Vuetify\\] useGroupItem composable must be used inside a component setup function","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/vuetify/src/composables/group.ts","lineNumber":103,"sourceCode":"export function useGroupItem (\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required?: true,\n): GroupItemProvide\nexport function useGroupItem (\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required: false,\n): GroupItemProvide | null\nexport function useGroupItem (\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required = true,\n): GroupItemProvide | null {\n  const vm = getCurrentInstance('useGroupItem')\n\n  if (!vm) {\n    throw new Error(\n      '[Vuetify] useGroupItem composable must be used inside a component setup function'\n    )\n  }\n\n  const id = useId()\n\n  provide(Symbol.for(`${injectKey.description}:id`), id)\n\n  const group = inject(injectKey, null)\n\n  if (!group) {\n    if (!required) return group\n\n    throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`)\n  }\n\n  const value = toRef(() => props.value)\n  const disabled = computed(() => !!(group.disabled.value || props.disabled))","sourceCodeStart":85,"sourceCodeEnd":121,"githubUrl":"https://github.com/vuetifyjs/vuetify/blob/8d153908dffb7592eb389ddbfbab955a0ccc977f/packages/vuetify/src/composables/group.ts#L85-L121","documentation":"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.","triggerScenarios":"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().","commonSituations":"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.","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."],"exampleFix":"// before\nconst items = await fetchItems()      // suspends\nuseGroupItem(props, MyGroupKey)        // throws: instance is null\n\n// after\nuseGroupItem(props, MyGroupKey)        // call first, synchronously\nconst items = await fetchItems()","handlingStrategy":"validation","validationCode":"import { getCurrentInstance } from 'vue'\n\nfunction assertInSetup(hook = 'useGroupItem') {\n  if (!getCurrentInstance()) {\n    throw new Error(`${hook} must be called synchronously inside setup()`)\n  }\n}","typeGuard":"import { getCurrentInstance } from 'vue'\nfunction inSetup(): boolean {\n  return !!getCurrentInstance()\n}","tryCatchPattern":null,"preventionTips":["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."],"tags":["vuetify","group","composable-misuse","vue-setup"],"backgroundTag":null,"analyzedSha":"8d153908dffb7592eb389ddbfbab955a0ccc977f","analyzedAt":"2026-08-12T21:54:20.596Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}