Reference
Accessibility
| Feature | Implementation |
|---|---|
role="dialog" + aria-modal="true" | Applied to the palette dialog element |
role="combobox" | Applied to the search <input> |
aria-expanded="true" | Set on the input while the palette is open |
aria-controls | Input points to the role="listbox" result list |
aria-activedescendant | Updated as the keyboard-active item changes |
role="listbox" | Applied to the result list container |
role="option" | Applied to each CommandItem |
aria-selected | Set to true on the currently active item |
aria-disabled | Set when disabled: true or enabled() returns false |
aria-live="polite" | Breadcrumb — screen readers announce sub-palette navigation; a visually-hidden region also announces the result count (labels.resultsCount) |
| Focus trap | Tab is intercepted to keep focus inside the dialog |
| Scroll lock | document.body.style.overflow is set to hidden while open |
| Reduced motion | @media (prefers-reduced-motion: reduce) disables the fade transition |
SSR compatibility
All browser-only APIs are guarded before use:
ts
// KeyboardManager — skips addEventListener on the server
if (typeof document === 'undefined') return
// Recent commands — skips localStorage on the server
if (typeof localStorage === 'undefined') return
// CommandItem — platform detection for ⌘ vs Ctrl label
typeof navigator !== 'undefined' && navigator.platform.includes('Mac')VirtualList (used for result sets > 50 items) renders an empty placeholder on the server and hydrates on the client. All slot content and command registration are fully SSR-safe.
Bundle size & peer dependencies
| Entry point | Peer deps | Notes |
|---|---|---|
@macrulez/vue-command-palette | vue ^3.3 | Components, composables, fuzzy engine, keyboard manager |
@macrulez/vue-command-palette/style.css | — | Default styles; ~3 KB |
@macrulez/vue-command-palette/testing | vue ^3.3 | createPaletteContext + PaletteProvider; dev/test only |
@macrulez/vue-command-palette/nuxt | @nuxt/kit >=3.0 (optional), vue ^3.3 | Nuxt module — auto-installs the plugin, registers composable auto-imports, adds the default stylesheet |
Ships as tree-shakeable ESM (dist/vue-command-palette.js) + CJS (dist/vue-command-palette.cjs). Core bundle without styles is ~12 KB gzip; the stylesheet is ~2 KB gzip.
License
MIT