Command Palette
This is a Labs component. The API may change in future releases. Import from vuetify/labs/VCommandPalette.
Usage
<template>
<v-command-palette
v-model="open"
:items="items"
hotkey="meta+k"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VCommandPalette } from 'vuetify/labs/VCommandPalette'
const open = ref(false)
const items = ref([
{
type: 'item',
title: 'Go to Dashboard',
onClick: () => console.log('Navigate to dashboard')
},
{
type: 'item',
title: 'Settings',
subtitle: 'Manage preferences',
onClick: () => console.log('Open settings')
}
])
</script>
API
Props
Controls the visibility of the command palette.
items
VCommandPaletteItem[]
default:"[]"
Array of command items or subheaders.
The current search query.
Keyboard shortcut to open the palette (e.g., “meta+k”, “ctrl+k”).
placeholder
string
default:"$vuetify.command.search"
Placeholder text for the search input.
Icon displayed in the search input.
noDataText
string
default:"$vuetify.noDataText"
Text displayed when no results are found.
Props passed to the internal VList component.
filterKeys
string[]
default:"['title', 'subtitle']"
Keys used for filtering items.
maxWidth
number | string
default:"500"
Maximum width of the dialog.
Events
Emitted when the palette visibility changes.
Emitted when the search query changes.
click:item
(item: VCommandPaletteItem, event: Event) => void
Emitted when an item is clicked or selected.
Slots
Slot for custom activator button.
Content displayed before the input.
Content displayed after the items list.
Customize the search input.
Customize the no results message.
Customize individual item display.
Prepend content for items.
Append content for items (e.g., hotkey badges).
Item Types
Action Item
{
type: 'item',
title: 'Command Title',
subtitle: 'Optional description',
value: 'unique-id',
hotkey: 'ctrl+shift+x',
onClick: (event, value) => {
// Handle action
}
}
{
type: 'subheader',
title: 'Section Title'
}
Examples
With Categories
<template>
<v-command-palette
v-model="open"
:items="items"
hotkey="meta+k"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VCommandPalette } from 'vuetify/labs/VCommandPalette'
const open = ref(false)
const items = ref([
{ type: 'subheader', title: 'Navigation' },
{ type: 'item', title: 'Dashboard', onClick: () => {} },
{ type: 'item', title: 'Settings', onClick: () => {} },
{ type: 'subheader', title: 'Actions' },
{ type: 'item', title: 'Create New', hotkey: 'ctrl+n', onClick: () => {} },
{ type: 'item', title: 'Save', hotkey: 'ctrl+s', onClick: () => {} }
])
</script>
With Icons and Hotkeys
<template>
<v-command-palette v-model="open" :items="items">
<template #item.prepend="{ item }">
<v-icon :icon="item.icon" />
</template>
<template #item.append="{ item }">
<kbd v-if="item.hotkey">{{ item.hotkey }}</kbd>
</template>
</v-command-palette>
</template>
<script setup>
import { ref } from 'vue'
import { VCommandPalette } from 'vuetify/labs/VCommandPalette'
const open = ref(false)
const items = ref([
{
type: 'item',
title: 'New File',
icon: 'mdi-file-plus',
hotkey: 'Ctrl+N',
onClick: () => {}
},
{
type: 'item',
title: 'Search',
icon: 'mdi-magnify',
hotkey: 'Ctrl+F',
onClick: () => {}
}
])
</script>
Custom Activator
<template>
<v-command-palette v-model="open" :items="items">
<template #activator="{ props }">
<v-btn v-bind="props" prepend-icon="mdi-magnify">
Search Commands
</v-btn>
</template>
</v-command-palette>
</template>
Dynamic Items
<template>
<v-command-palette
v-model="open"
:items="filteredItems"
@update:search="onSearch"
/>
</template>
<script setup>
import { ref, computed } from 'vue'
import { VCommandPalette } from 'vuetify/labs/VCommandPalette'
const open = ref(false)
const searchQuery = ref('')
const allItems = ref([...])
const filteredItems = computed(() => {
// Custom filtering logic
return allItems.value.filter(item => {
return item.title.toLowerCase().includes(searchQuery.value.toLowerCase())
})
})
function onSearch(query) {
searchQuery.value = query
}
</script>