VueCraft NPM

CommandPalette ​

The root component. Renders a modal overlay with a search input, result list, and optional slots. Teleports to <body> by default.

Props ​

name ​

string · default: —

Target a specific named palette instance (default singleton when omitted).

placeholder ​

string · default: 'Search commands…'

Input placeholder text.

maxResults ​

number · default: 10

Maximum number of results shown.

emptyText ​

string · default: 'No commands found.'

Text shown when search returns nothing.

loadingText ​

string · default: 'Loading…'

Text shown while async groups are fetching.

teleportTo ​

string · default: 'body'

CSS selector for the <Teleport> target.

theme ​

'default' | 'compact' · default: 'default'

Compact uses a narrower, shorter dialog.

animationDuration ​

number · default: 150

Fade transition duration in ms.

labels ​

Partial<PaletteLabels> · default: —

Override built-in UI strings (i18n) — see Localization.

groupRecent ​

boolean · default: false

Cluster recent commands by their group with sub-headers.

modes ​

PaletteMode[] · default: —

Prefix-activated search scopes — see Modes / scopes.

selectable ​

boolean · default: false

Multi-select mode — see Multi-select.

preview ​

boolean · default: false

Show a preview pane for the active command — see Preview pane.

previewHotkey ​

string[] · default: ['$mod', 'i']

Key combo to toggle the preview pane ([] to disable).

Emits ​

submit-selection ​

Command[]

Emitted on $mod+Enter in multi-select mode.

Slots ​

#trigger ​

{ open, toggle }

Custom element that opens the palette.

Content inserted above the search input.

#input ​

{ query, onInput }

Replace the default <input> entirely.

#item ​

{ command, active, matches, parents, matchedText }

Replace the entire result row (parents = breadcrumb context; matchedText = matching keyword/alias).

#group-header ​

{ group }

Replace the group label row.

#empty ​

{ query }

Shown when the query returns no results.

#actions ​

{ command, run, activeIndex, close }

Replace the secondary-actions menu.

#preview ​

{ command }

Preview pane content for the active command (requires the preview prop).

Content below the result list.

Custom #item slot ​

vue
<CommandPalette>
  <template #item="{ command, active, matches }">
    <div :class="['my-item', { 'my-item--active': active }]">
      <span v-if="command.icon" class="my-item__icon">{{ command.icon }}</span>

      <span class="my-item__body">
        <component :is="highlightMatches(command.label, matches)" />
        <span v-if="command.description" class="my-item__desc">
          {{ command.description }}
        </span>
      </span>

      <span v-if="command.shortcut?.length" class="my-item__shortcut">
        <kbd v-for="k in command.shortcut" :key="k">{{ k }}</kbd>
      </span>

      <span v-if="command.subCommands?.length">›</span>
    </div>
  </template>
</CommandPalette>
vue
<CommandPalette>
  <template #footer>
    <div class="my-footer">
      <span><kbd>↑↓</kbd> navigate</span>
      <span><kbd>↵</kbd> select</span>
      <span><kbd>Esc</kbd> close</span>
    </div>
  </template>
</CommandPalette>

Programmatic trigger via #trigger slot ​

vue
<CommandPalette>
  <template #trigger="{ toggle }">
    <button @click="toggle">Open palette</button>
  </template>
</CommandPalette>