Command Palettes
The v-command-palette component provides a keyboard-driven command interface that allows users to quickly search and execute commands. It’s commonly used for quick navigation, command execution, and power-user workflows.
This feature was introduced in v4.0, is a labs component and is available for testing and feedback.
Installation
Labs components require manual import and registration with the Vuetify instance.
import { VCommandPalette } from 'vuetify/labs/VCommandPalette'
export default createVuetify({
components: {
VCommandPalette,
},
})
Usage
The command palette displays a searchable list of commands in a dialog. Users can type to filter items and press Enter or click to execute commands.
<v-command-palette
v-model:search="search"
:items="items"
placeholder="Search commands..."
hotkey="ctrl+shift+k"
@click:item="onItemClick"
>
<template v-slot:activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps">Open Command Palette</v-btn>
</template>
</v-command-palette><script setup>
import { shallowRef } from 'vue'
const search = shallowRef('')
const items = [
{
"title": "Find File",
"subtitle": "Open general search",
"prependIcon": "mdi-file-find",
"value": "find-file"
},
{
"title": "Open Project",
"subtitle": "Open an existing project",
"prependIcon": "mdi-folder-open",
"value": "open-project"
},
{
"type": "divider"
},
{
"type": "subheader",
"title": "Settings"
},
{
"title": "Help",
"subtitle": "View documentation",
"prependIcon": "mdi-help-circle-outline",
"value": "help"
}
]
function onItemClick (item) {
console.log('selected item:', item)
}
</script>API
| Component | Description |
|---|---|
| v-command-palette | Primary Component |
| v-dialog | Base Component |
Examples
Below is a collection of simple to complex examples.
Props
Items
The items prop accepts an array of command palette items. Items support action items (interactive commands), subheaders (section labels), and dividers (visual separators).
Hotkey
Use the hotkey prop to register a global keyboard shortcut that toggles the command palette. Individual items can also have their own hotkey property for quick access.
Controlled close behavior
By default, selecting an actionable item closes the palette. Use close-on-select to disable that behavior, or handle @before-select and call preventDefault() to keep the palette open for external drill-in flows.
Slots
The command palette provides several slots for customizing the display of items and other elements.
Item prepend
Use the #item.prepend slot to customize the prepend area of each item. This slot receives the current item and index as slot props.
Item append
Similarly #item.append slot and allows you to include supplemental information (replaces hotkey).
Filtering
The search input automatically filters items based on their title and subtitle properties. Use v-model:search to control or monitor the search query. The filter-keys prop can customize which item properties are searched.
The placeholder prop customizes the search input’s placeholder text, while no-data-text customizes the message shown when no items match the search query.
Accessibility
The v-command-palette component follows accessibility best practices:
- Uses semantic ARIA roles (
listboxfor the list,optionfor items) - Provides descriptive labels for screen readers
- Implements
aria-activedescendantfor proper focus announcement - Maintains focus within the dialog while open
- Returns focus to the previously focused element on close
- Supports full keyboard navigation without mouse interaction