Custom rows and slots

Replace parts of the palette's markup without losing keyboard support.

Every visible part of the palette has a slot. The row wrapper still owns selection, ARIA attributes, and clicks, so a custom item can’t break keyboard use.

<CommandPaletteDialog :commands="people">
  <template #item="{ command, label, selected }">
    <span class="avatar" :data-on="selected">{{ command.meta?.initials }}</span>
    <CommandHighlight :segments="label" />
  </template>
</CommandPaletteDialog>

#item replaces the whole inside of the row, including the icon, shortcut and badge. If only some rows need custom content, render the rest yourself too, or give those commands their own palette.

Slots

slot	props
`item`	`row, command, label, selected, disabled, reason, digit`
`group-heading`	`group, heading, count`
`empty`	`query, labels`
`loading`
`detail`	`row, verb` (rendered only with `show-detail`)
`footer`	`list, selected, verb`
`breadcrumb`	`trail`
`input-prefix`

In the item slot, reason is the disabled reason (an empty string for a plain disabled: true, null when enabled), and digit is the quick-select number, or null.

Labels

Every built-in string can be replaced through labels. Pass only the ones you want to change:

<CommandPaletteDialog
  :commands="commands"
  :labels="{ placeholder: 'Befehl suchen…', empty: 'Keine Treffer', results: '{count} Treffer' }"
/>

results, resultsOne and capped are templates: {count}, {shown} and {matched} are filled in. The full list is in the reference.