nuxt-x-app
Command
A keyboard-driven command palette modal with grouped results, fuzzy search, and keyboard navigation.
Command
The Command category provides a single <XACommandPalette> component — a floating modal overlay that lets users search and execute commands via keyboard. It is opened by the configurable keyboard shortcut (default Meta+K) and supports full keyboard navigation with arrow keys and Enter.
Components
<XACommandPalette />
A modal command palette supporting grouped items, fuzzy text search, keyboard navigation (↑↓ + Enter), and route navigation via to. The open state can be controlled externally via v-model:open or managed internally. Keyboard shortcut registration is automatic.
<XACommandPalette
v-model:open="paletteOpen"
:items="[
{
group: 'Navigation',
items: [
{ label: 'Dashboard', icon: 'i-lucide-layout-dashboard', to: '/dashboard' },
{ label: 'Users', icon: 'i-lucide-users', to: '/users' },
],
},
{
group: 'Actions',
items: [
{ label: 'Create User', icon: 'i-lucide-user-plus', action: 'create-user', description: 'Add a new user account' },
{ label: 'Export Data', icon: 'i-lucide-download', action: 'export' },
],
},
]"
placeholder="Search or type a command..."
shortcut="meta+k"
@select="handleCommand"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state. When provided, the component operates in controlled mode and emits update:open. |
items | CommandGroup[] | [] | Grouped command definitions. Each group has a group: string label and an items array. |
placeholder | string | 'Search or type a command...' | Search input placeholder text. |
shortcut | string | 'meta+k' | Keyboard shortcut that opens the palette. |
CommandGroup shape:
interface CommandGroup {
group: string
items: CommandItem[]
}
CommandItem shape:
interface CommandItem {
label: string // Display label
icon?: string // Lucide icon name
to?: string // Route to push on selection
action?: string // Action identifier emitted with the select event
description?: string // Secondary description text
}
Emits
| Event | Payload | Description |
|---|---|---|
update:open | (value: boolean) | Emitted when open state changes (controlled mode). |
select | (item: CommandItem) | Emitted when the user selects an item. If item.to is set the router navigates automatically; otherwise use this event to dispatch the action. |
Keyboard shortcuts
| Key | Action |
|---|---|
Meta+K (default) | Open the palette |
↑ / ↓ | Move focus between results |
Enter | Select the focused item |
Esc | Close the palette |
AI Context
category: Command
package: "@xenterprises/nuxt-x-app"
components:
- XACommandPalette
use-when: >
Adding a global command palette to an app shell. Register it once in a
layout component, bind v-model:open to a reactive ref, and handle the
@select event to dispatch actions or let the built-in router navigation
handle `to` items.
patterns:
- Items with a `to` field navigate automatically via the Nuxt router on selection.
- Items with an `action` field are passed to the @select emit for custom handling.
- The shortcut prop accepts any keyboard combo supported by the underlying hook.
- Fuzzy search filters across label and description fields in all groups.