Component

Command palette

<DomCommandPalette>

A keyboard-first launcher composed from dialog, filtering, and list selection patterns.

Demo

Launcher

Open the palette from the button or Cmd+K, type to filter, use arrow keys, and press Enter to select.

Selected: none

Launcher.vuevue

<script setup>
import { ref } from 'vue';
import { DomButton, DomCommandPalette } from '@getdom/studio/vue';

const open = ref(false);
const selected = ref('none');
const commands = [
	{ value: 'new-project', label: 'New project', description: 'Create a blank project.' },
	{ value: 'invite-team', label: 'Invite team', description: 'Send invitations to collaborators.' },
	{ value: 'open-billing', label: 'Open billing', description: 'Manage plan and invoices.' },
	{ value: 'toggle-theme', label: 'Toggle theme', description: 'Switch between light and dark.' },
];

function onSelect(event) {
	selected.value = event.value;
}
</script>

<template>
	<div class="grid gap-3">
		<div class="flex flex-wrap items-center gap-2">
			<DomButton variant="secondary" @click="open = true">Open command palette (Cmd+K)</DomButton>
			<p class="text-xs text-muted-fg">Selected: <code class="text-fg">{{ selected }}</code></p>
		</div>
		<DomCommandPalette v-model="open" :commands="commands" @select="onSelect" />
	</div>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	boolean	boolean	false	Whether the palette is open.
`commands`*	array	Array<unknown>	—	Commands shown in the palette.
`placeholder`	string	string	'Search commands...'	Input placeholder.
`shortcut`	string	string	'mod+k'	Global keyboard shortcut. Use mod for Cmd on Mac and Ctrl elsewhere. Set empty string to disable.

Auto-generated from Command palette.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	(open `open: boolean;` : boolean)	Emitted when the palette opens or closes.
@select	({ command, value })	Emitted when a command is selected.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.