VCommandPalette API

Props

name	type	default
`absolute`	boolean	false
Applies position: absolute to the content element.
`activator`	Element \| (string & {}) \| 'parent' \| ComponentPublicInstance	undefined
Explicitly sets the overlay’s activator.
`activator-props`	unknown	{}
Apply custom properties to the activator.
`attach`	string \| boolean \| Element	false
Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default.
`capture-focus`	boolean	true
When enabled, focus will be trapped within the component’s content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility.
`close-delay`	string \| number	undefined
Milliseconds to wait before closing component. Only applies to hover and focus events.
`close-on-back`	boolean	true
Closes the overlay content when the browser’s back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing.
`close-on-content-click`	boolean	false
Closes component when you click on its content.
`close-on-select`	boolean	true
Controls whether the palette closes automatically after selecting an actionable item. Set to false to keep it open for external drill-in and nested navigation flows.
`contained`	boolean	false
Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.).
`content-class`	any	undefined
Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the attach prop is provided) and is not targetable by classes passed directly on the component.
`content-props`	any	undefined
Apply custom properties to the content.
`custom-filter`	FilterFunction	undefined
Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.
`custom-key-filter`	unknown	undefined
Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`eager`	boolean	false
Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
`filter-keys`	string \| string[]	['title', 'subtitle']
Array of specific keys to filter on the item.
`filter-mode`	'every' \| 'some' \| 'union' \| 'intersection'	'intersection'
Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`. some: There is at least one match from either the custom filter or the custom key filter. every: All columns match either the custom filter or the custom key filter. union: There is at least one match from the custom filter, or all columns match the custom key filters. intersection: There is at least one match from the custom filter, and all columns match the custom key filters.
`fullscreen`	boolean	false
Changes layout for fullscreen display.
`height`	string \| number	undefined
Sets the height for the component.
`hotkey`	string	undefined
Global keyboard shortcut to toggle the palette. Accepts hotkey strings like `'ctrl+shift+p'` or `'meta+j'`. The shortcut is automatically registered on mount and cleaned up on unmount.
`input-icon`	string	'$search'
Icon to display at the start of the search input field.
`items`	( \| { type: 'item' onClick: (event: MouseEvent \| KeyboardEvent, value: any) => void value: any hotkey: string title: string subtitle: string prependIcon: string appendIcon: string prependAvatar: string appendAvatar: string to: string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric href: string } \| { type: 'subheader'; title: string; inset: boolean } \| { type: 'divider'; inset: boolean } )[]	[]
Array of command palette items. Objects should have title and optionally subtitle, prependIcon, appendIcon, prependAvatar, appendAvatar, hotkey, onClick, to, href, and value properties. Use `type: 'subheader'` with a title for section headers, or `type: 'divider'` for visual separators between groups.
`list-props`	unknown	undefined
Pass props through to the `v-list` component. Accepts an object with anything from v-list props, camelCase keys are recommended.
`location`	Anchor	'bottom'
Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both…
`location-strategy`	'static' \| 'connected' \| LocationStrategyFunction	'static'
A function used to specifies how the component should position relative to its activator.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	500
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`model-value`	boolean	false
Controls the visibility of the command palette dialog. Use `v-model` for two-way binding.
`no-click-animation`	boolean	false
Disables the bounce effect when clicking outside of the content element when using the persistent prop.
`no-data-text`	string	'$vuetify.noDataText'
Text displayed when no items match the current search query.
`no-filter`	boolean	false
Disables all item filtering.
`offset`	string \| number \| number[]	undefined
Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target.
`opacity`	string \| number	undefined
Sets the opacity of the scrim element. Only applies if `scrim` is enabled.
`open-delay`	string \| number	undefined
Milliseconds to wait before opening component. Only applies to hover and focus events.
`open-on-click`	boolean	undefined
Activate the component when the activator is clicked.
`open-on-focus`	boolean	undefined
Activate the component when the activator is focused.
`open-on-hover`	boolean	false
Activate the component when the activator is hovered.
`origin`	Anchor \| 'auto' \| 'overlap'	'center center'
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
`persistent`	boolean	false
Clicking outside of the element or pressing esc key will not deactivate it.
`placeholder`	string	'$vuetify.command.search'
Placeholder text displayed in the search input.
`retain-focus`	boolean	true
Captures and keeps focus within the content element when using Tab and Shift+Tab. Recommended to be `false` when using external tools that require focus such as TinyMCE or vue-clipboard.
`scrim`	string \| boolean	true
Accepts true/false to enable background, and string to define color.
`scrollable`	boolean	false
When set to true, expects a `v-card` and a `v-card-text` component with a designated height. For more information, check out the scrollable example.
`scroll-strategy`	'close' \| 'block' \| 'none' \| 'reposition' \| ScrollStrategyFunction	'block'
Strategy used when the component is activate and user scrolls.
`search`	string	undefined
The current search query. Use `v-model:search` to control or monitor the search input value.
`stick-to-target`	boolean	false
Enables the overlay content to go off-screen when scrolling.
`target`	\| Element \| (string & {}) \| 'parent' \| 'cursor' \| ComponentPublicInstance \| [number, number]	undefined
For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`transition`	\| string \| boolean \| (TransitionProps & { component: Component }) \| { component: ComponentPublicInstanceConstructor< CreateComponentPublicInstanceWithMixins< {} & { target?: HTMLElement \| [x: number, y: number] \| undefined } & { $children?: \| VNodeChild \| { $stable?: boolean \| undefined } \| (() => VNodeChild) \| { default?: (() => VNodeChild) \| undefined } 'v-slots'?: \| { default?: false \| (() => VNodeChild) \| undefined } \| undefined } & { 'v-slot:default'?: false \| (() => VNodeChild) \| undefined }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, PublicProps, {}, true, {}, SlotsType<Partial<MakeSlots<{ default: never }>>>, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, OptionTypesType<{}, {}, {}, {}, {}, {}>, {} & { target?: HTMLElement \| [x: number, y: number] \| undefined } & { $children?: \| VNodeChild \| { $stable?: boolean \| undefined } \| (() => VNodeChild) \| { default?: (() => VNodeChild) \| undefined } 'v-slots'?: \| { default?: false \| (() => VNodeChild) \| undefined } \| undefined } & { 'v-slot:default'?: false \| (() => VNodeChild) \| undefined }, () => JSX.Element, {}, {}, {}, {} >, any, any, any, ComputedOptions, MethodOptions > & ComponentOptionsBase< {} & { target?: HTMLElement \| [x: number, y: number] \| undefined } & { $children?: \| VNodeChild \| { $stable?: boolean \| undefined } \| (() => VNodeChild) \| { default?: (() => VNodeChild) \| undefined } 'v-slots'?: \| { default?: false \| (() => VNodeChild) \| undefined } \| undefined } & { 'v-slot:default'?: false \| (() => VNodeChild) \| undefined }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, {}, {}, string, SlotsType<Partial<MakeSlots<{ default: never }>>>, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions > & VNodeProps & AllowedComponentProps & ComponentCustomProps & { filterProps: (props: T) => Partial<Pick<T, U>> } }	{component: {name: 'VDialogTransition'}}
Sets the component transition. Can be one of the built in or custom transition.
`viewport-margin`	string \| number	12
Sets custom viewport margin for the overlay content
`width`	string \| number	undefined
Sets the width for the component.
`z-index`	string \| number	2400
The z-index used for the component.

Events

name	type
`before-select`	[ { item: \| { type: 'item' onClick: (event: MouseEvent \| KeyboardEvent, value: any) => void value: any hotkey: string title: string subtitle: string prependIcon: string appendIcon: string prependAvatar: string appendAvatar: string to: \| string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric href: string } \| { type: 'subheader'; title: string; inset: boolean } \| { type: 'divider'; inset: boolean } event: MouseEvent \| KeyboardEvent preventDefault: () => void }, ]
Emitted before the default auto-close behavior for actionable item selection. The payload includes the selected item, the triggering event, and a preventDefault callback. Call preventDefault() to keep the palette open.
`click:item`	[ ( \| { type: 'item' onClick: (event: MouseEvent \| KeyboardEvent, value: any) => void value: any hotkey: string title: string subtitle: string prependIcon: string appendIcon: string prependAvatar: string appendAvatar: string to: string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric href: string } \| { type: 'subheader'; title: string; inset: boolean } \| { type: 'divider'; inset: boolean } ), MouseEvent \| KeyboardEvent, ]
Emitted when an item is clicked or activated via Enter key. The payload includes the selected item object and the triggering event (MouseEvent or KeyboardEvent).
`update:modelValue`	[boolean]
Emitted when the dialog visibility changes.
`update:search`	[string]
Emitted when the search query changes.

Slots

{
  isActive: boolean
  props: Record<string, any>
  targetRef: TemplateRef
}

never

never

never

never

{
  item:
    | {
        type: 'item'
        onClick: (event: MouseEvent | KeyboardEvent, value: any) => void
        value: any
        hotkey: string
        title: string
        subtitle: string
        prependIcon: string
        appendIcon: string
        prependAvatar: string
        appendAvatar: string
        to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
        href: string
      }
    | { type: 'subheader'; title: string; inset: boolean }
    | { type: 'divider'; inset: boolean }
  index: number
}

{
  item:
    | {
        type: 'item'
        onClick: (event: MouseEvent | KeyboardEvent, value: any) => void
        value: any
        hotkey: string
        title: string
        subtitle: string
        prependIcon: string
        appendIcon: string
        prependAvatar: string
        appendAvatar: string
        to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
        href: string
      }
    | { type: 'subheader'; title: string; inset: boolean }
    | { type: 'divider'; inset: boolean }
  index: number
}

{
  item:
    | {
        type: 'item'
        onClick: (event: MouseEvent | KeyboardEvent, value: any) => void
        value: any
        hotkey: string
        title: string
        subtitle: string
        prependIcon: string
        appendIcon: string
        prependAvatar: string
        appendAvatar: string
        to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
        href: string
      }
    | { type: 'subheader'; title: string; inset: boolean }
    | { type: 'divider'; inset: boolean }
  index: number
}

{
  item:
    | {
        type: 'item'
        onClick: (event: MouseEvent | KeyboardEvent, value: any) => void
        value: any
        hotkey: string
        title: string
        subtitle: string
        prependIcon: string
        appendIcon: string
        prependAvatar: string
        appendAvatar: string
        to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
        href: string
      }
    | { type: 'subheader'; title: string; inset: boolean }
    | { type: 'divider'; inset: boolean }
  index: number
}

never

{ props: { title: string; value: any; [string]: any } }

never

never

`activator`
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.
`append`
Content to render below the items list, inside the command palette card. Useful for footers, keyboard shortcut hints, or additional actions.
`default`
The default Vue slot.
`input`
Custom search input field. Replaces the default v-text-field. Useful for providing a completely custom search implementation.
`input.append-inner`
Content appended inside the search input field. Useful for adding icons or buttons within the input.
`item`
Define a custom item appearance.
`item.append`
Content to display after each item’s title, replaces hotkey (if provided).
`item.prepend`
Content to display before each item’s title.
`item.title`
Slot for customizing the title of each item.
`list.prepend`
Content to prepend to the list component.
`list.subheader`
Slot for customizing the rendering of subheader items in the list.
`no-data`
Custom content to display when no items match the search query. Replaces the default no-data message.
`prepend`
Content to render above the search input, inside the command palette card. Useful for headers, breadcrumbs, or instructions.

#VCommandPalette API

VCommandPalette API