vuetifyjs/vuetify · error · Error

[Vuetify] useCommandPalette must be used within VCommandPale

Error message

[Vuetify] useCommandPalette must be used within VCommandPalette

What it means

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.

Source

Thrown at packages/vuetify/src/labs/VCommandPalette/shared.ts:22

// Types
import type { InjectionKey, Ref } from 'vue'
import type { VCommandPaletteItem } from './types'

export interface CommandPaletteProvide {
  items: Ref<VCommandPaletteItem[]>
  filteredItems: Ref<VCommandPaletteItem[]>
  selectedIndex: Ref<number>
  search: Ref<string>
  setSelectedIndex: (index: number) => void
}

export const VCommandPaletteSymbol: InjectionKey<CommandPaletteProvide> = Symbol.for('vuetify:command-palette')

export function useCommandPalette () {
  const commandPalette = inject(VCommandPaletteSymbol)

  if (!commandPalette) {
    throw new Error('[Vuetify] useCommandPalette must be used within VCommandPalette')
  }

  return commandPalette
}

View on GitHub (pinned to 8d153908df)

Solutions

1. Only render components that call useCommandPalette() as descendants of <v-command-palette>.
2. Pass state down via props instead of relying on the injection when reusing the child elsewhere.
3. In tests, wrap the component in <v-command-palette>.

Example fix

// before
<MyCommandList />

// after
<v-command-palette>
  <MyCommandList />
</v-command-palette>

import { inject } from 'vue'
import { VCommandPaletteSymbol } from 'vuetify/labs/VCommandPalette'
const cp = inject(VCommandPaletteSymbol, null)
if (!cp) {
  // not inside <v-command-palette>: render a standalone variant instead
}

import { inject } from 'vue'
import { VCommandPaletteSymbol } from 'vuetify/labs/VCommandPalette'
export function hasCommandPalette (): boolean {
  return inject(VCommandPaletteSymbol, null) != null
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Could not find Vuetify rules injection
• foo
• Missing group!
• Missing headers!
• Missing pagination!

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