{"record":{"id":"f39daeac837d57c2","repo":"vuetifyjs/vuetify","slug":"vuetify-usecommandpalette-must-be-used-within-vc","errorCode":null,"errorMessage":"[Vuetify] useCommandPalette must be used within VCommandPalette","messagePattern":"\\[Vuetify\\] useCommandPalette must be used within VCommandPalette","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/vuetify/src/labs/VCommandPalette/shared.ts","lineNumber":22,"sourceCode":"// Types\nimport type { InjectionKey, Ref } from 'vue'\nimport type { VCommandPaletteItem } from './types'\n\nexport interface CommandPaletteProvide {\n  items: Ref<VCommandPaletteItem[]>\n  filteredItems: Ref<VCommandPaletteItem[]>\n  selectedIndex: Ref<number>\n  search: Ref<string>\n  setSelectedIndex: (index: number) => void\n}\n\nexport const VCommandPaletteSymbol: InjectionKey<CommandPaletteProvide> = Symbol.for('vuetify:command-palette')\n\nexport function useCommandPalette () {\n  const commandPalette = inject(VCommandPaletteSymbol)\n\n  if (!commandPalette) {\n    throw new Error('[Vuetify] useCommandPalette must be used within VCommandPalette')\n  }\n\n  return commandPalette\n}\n","sourceCodeStart":4,"sourceCodeEnd":27,"githubUrl":"https://github.com/vuetifyjs/vuetify/blob/8d153908dffb7592eb389ddbfbab955a0ccc977f/packages/vuetify/src/labs/VCommandPalette/shared.ts#L4-L27","documentation":"useCommandPalette() injects VCommandPaletteSymbol, provided only by <v-command-palette>. It throws when a component calling it (e.g. a custom slot/child) is rendered outside a <v-command-palette>, because there is no command-palette state to bind to.","triggerScenarios":"Calling useCommandPalette() in a component used outside <v-command-palette>; extracting a command-palette child into a standalone component and rendering it on its own.","commonSituations":"Building custom command-palette list/item slots and reusing that component elsewhere; copy-paste of a slot component into another view; testing the child in isolation.","solutions":["Only render components that call useCommandPalette() as descendants of <v-command-palette>.","Pass state down via props instead of relying on the injection when reusing the child elsewhere.","In tests, wrap the component in <v-command-palette>."],"exampleFix":"// before\n<MyCommandList />\n\n// after\n<v-command-palette>\n  <MyCommandList />\n</v-command-palette>","handlingStrategy":"type-guard","validationCode":"import { inject } from 'vue'\nimport { VCommandPaletteSymbol } from 'vuetify/labs/VCommandPalette'\nconst cp = inject(VCommandPaletteSymbol, null)\nif (!cp) {\n  // not inside <v-command-palette>: render a standalone variant instead\n}","typeGuard":"import { inject } from 'vue'\nimport { VCommandPaletteSymbol } from 'vuetify/labs/VCommandPalette'\nexport function hasCommandPalette (): boolean {\n  return inject(VCommandPaletteSymbol, null) != null\n}","tryCatchPattern":null,"preventionTips":["Only render command-palette children inside <v-command-palette>.","Pass state via props when reusing such children elsewhere.","Wrap children in <v-command-palette> for tests."],"tags":["injection","command-palette","labs"],"backgroundTag":null,"analyzedSha":"8d153908dffb7592eb389ddbfbab955a0ccc977f","analyzedAt":"2026-08-12T21:54:20.596Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}