---
title: Components
description: Props, events, slots and labels for CommandPalette and CommandPaletteDialog.
---

`<CommandPalette>` renders the palette inline. `<CommandPaletteDialog>` accepts the same props and adds modal behavior on top.

## Props

| prop            | default           |                                                            |
| --------------- | ----------------- | ---------------------------------------------------------- |
| `commands`      | required          | The root list. See [Commands](/guides/commands).           |
| `scopes`        | `[]`              | See [Scopes](/guides/scopes).                              |
| `group-order`   | declaration order | Heading order for an empty query.                          |
| `max-results`   | `40`              | The total number of rows drawn for a non-empty query.      |
| `filter`        | built-in          | See [Search](/guides/search#a-custom-matcher).             |
| `recents`       | `true`            | `false`, `true`, or `RecentsOptions`.                      |
| `quick-select`  | `true`            | ⌘/Ctrl+1-9.                                                |
| `show-detail`   | `false`           | The band below the list that describes the selected row.   |
| `labels`        | English           | Every built-in string. Pass any subset of `PaletteLabels`. |
| `navigate`      | `location.href`   | A router hook for `link` commands.                         |
| `chord`         | dialog: `hotkey`  | The chord printed in the footer. `false` hides it.         |
| `autofocus`     | `true`            | Focus the field on mount.                                  |
| `v-model:query` | `''`              | The text in the field.                                     |

### Dialog only

| prop            | default   |                                                     |
| --------------- | --------- | --------------------------------------------------- |
| `v-model:open`  | `false`   | Whether the dialog is open.                         |
| `hotkey`        | `'mod+k'` | `false` disables the global chord.                  |
| `open-on-slash` | `false`   | `/` opens the palette when focus is not in a field. |
| `dismissible`   | `true`    | A backdrop click closes the palette.                |
| `to`            | `'body'`  | The Teleport target, a selector or an element.      |
| `trap-focus`    | `true`    | Keep Tab inside the dialog while it's open.         |

## Events

| event          | payload          | when                                                     |
| -------------- | ---------------- | -------------------------------------------------------- |
| `select`       | `command, mode`  | An action or link was activated.                         |
| `error`        | `error, command` | `perform` or a page loader threw or rejected.            |
| `close`        |                  | Inline only: the palette asked to close (Escape, a run). |
| `no-results`   | `query, scope`   | A query matched nothing. See below.                      |
| `update:open`  | `boolean`        | Dialog only: the dialog opened or closed itself.         |
| `update:query` | `string`         | The query changed.                                       |

`mode` is `'primary'` or `'alternate'`.

`no-results` fires once a query that matches nothing has stayed unchanged for 500 ms, or right away if the palette closes before then. `query` has any scope prefix removed, and `scope` is the scope id in force or `null`. The same query and scope aren't reported twice in a row, so the handler can send straight to analytics:

```vue
<CommandPaletteDialog
  :commands="commands"
  @no-results="(query, scope) => track('palette_no_results', { query, scope })"
/>
```

## Exposed methods

Reach these through a template ref.

| component              | exposes                                                                                                                                         |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `CommandPalette`       | `focus()`, `reset()`, `back()`, `move(step)`, `activate(row)`, `forgetRecent(id)`, `clearRecents()`, and `palette`, the full composable return. |
| `CommandPaletteDialog` | `show()`, `hide()`, `toggle()`, `focus()`, `forgetRecent(id)`, `clearRecents()`.                                                                |

The dialog's recents methods work while it's closed too. They write straight to the configured storage, and the next open shows the result.

## Slots

See [Custom rows and slots](/guides/custom-rows#slots).

## Labels

| key           | default                                                       |
| ------------- | ------------------------------------------------------------- |
| `placeholder` | `Search commands…`                                            |
| `empty`       | `Nothing matches`                                             |
| `emptyHint`   | `Try a different word, or part of a description.`             |
| `loading`     | `Loading…`                                                    |
| `recent`      | `Recent`                                                      |
| `all`         | `All`                                                         |
| `dialog`      | `Command palette`                                             |
| `list`        | `Commands`                                                    |
| `move`        | `move`                                                        |
| `open`        | `open`                                                        |
| `run`         | `run`                                                         |
| `back`        | `back`                                                        |
| `forget`      | `remove`                                                      |
| `toggle`      | `open / close`                                                |
| `scope`       | `scope`                                                       |
| `clear`       | `Clear the search`                                            |
| `noSelection` | `Nothing is selected. Keep typing, or press Escape to close.` |
| `results`     | `{count} results`                                             |
| `resultsOne`  | `{count} result`                                              |
| `capped`      | `first {shown} of {matched}`                                  |
| `forgotten`   | `Removed {label} from recent`                                 |