[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]
npm install vue-command-palette[![NPM][npmBadge]][npmUrl]
[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]
[![NPM Download][npmDtBadge]][npmDtUrl]
[npmBadge]: https://img.shields.io/npm/v/vue-command-palette.svg?maxAge=2592000
[npmUrl]: https://www.npmjs.com/package/vue-command-palette
[npmDtBadge]: https://img.shields.io/npm/dt/vue-command-palette.svg
[npmDtUrl]: https://www.npmjs.com/package/vue-command-palette
[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/vue-command-palette
[bundlePhobiaUrl]: https://bundlephobia.com/package/vue-command-palette@latest
> A fast, composable, unstyled Command + K interface (Command Palette) for Vue.
Command palette interfaces are used to create a web experience where users can quickly get in charge with keyboard shortcuts, rather than using the mouse.
With macOS's Spotlight and Raycast's command palette experience in mind, vue-command-palette is designed to provide a fast, composable, unstyled command palette to your site.
- Command Palette for Vue
- Preview
- Concepts
- Table of Contents
- Features
- Install
- Usage
- Command + K or ?
- Events
- Styling
- Animation
- Command.Dialog
- List Item Height
- Namespaced components
- [Command [command-root=""]](#command-command-root)
- [Command.Dialog [command-dialog=""]](#commanddialog-command-dialog)
- [Command.Input [command-input=""]](#commandinput-command-input)
- [Command.List [command-list=""]](#commandlist-command-list)
- [Command.Group [command-group=""]](#commandgroup-command-group)
- [Command.Item [command-item=""]](#commanditem-command-item)
- [Command.Separator [command-separator=""]](#commandseparator-command-separator)
- [Command.Empty [command-empty=""]](#commandempty-command-empty)
- [Command.Loading [command-loading=""]](#commandloading-command-loading)
- Inspiration
- License
- 🧩 Compound Component + Namespaced Components Design
- 💄 Completely unstyled, but more customizable
- 🔍 Fuzzy search support to find relevant command
- ⌨️ keyboard shortcut support to bind custom keybindings to your command
``bash`
yarn add vue-command-paletteor
pnpm add vue-command-palette
Then you can import the Command Compound Component in your project.
`vue
`
or in a dialog:
`vue
`
Do I have to use command + K? No, it's just a convention that you can use any key binding to perform the Command Palette.
> Tips, we use @vueuse/core to bind the keybindings
`html`
| Name | Description | Parameters |
| :-----------: | --------------------------------------------------------------------- | :--------------- |
| select-item | Every time an item is being selected in Command or Command.Dialog | (item) => void |
All namespaced components have a specific data-attribute starting with command- that can be used for styling.
eg:
`css`
div[command-root=''] {
background: #ffffff;
}
#### Command.Dialog
Command.Dialog wraped by built-in components Transition, you can customize the animation using the name command-dialog .
#### List Item Height
Animate height using the --command-list-height CSS variable.
With Namespaced components, You can use component tags with dots like to refer to components nested under object properties. This is useful when you import multiple components from a single file.
The root component, Passes the theme props to set your own style.
`vue`
The root component with a dialog interface, Teleport dialog to body tag. Passes the theme props to set your own style, and visible props control whether render it.
`vue`
data-attribute within dialog
- [command-dialog-mask] - the mask is always rendered.[command-dialog-wrapper]
- - the wrapper on top of mask.[command-dialog-header]
- - the parent of dialog header slot.[command-dialog-body]
- - the parent of dialog body slot.[command-dialog-footer]
- - the parent of dialog footer slot.
Usually we need a input in the command palette to search sth.
`vue`
v-model:value="inputValue"
/>
Contains items and groups. Animate height using the --command-list-height CSS variable.
`css`
[command-list] {
min-height: 300px;
height: var(--command-list-height);
max-height: 500px;
transition: height 100ms ease;
}
`vue`
Group items ([command-group-items]) together with the given heading ([command-group-heading])
`vue`
Passed the data-value, we use data-value to fetch the value.
`vuedata-value
:data-value="item.label"
:shortcut="item.shortcut"
:perform="item.perform"
@select="(itemInfo) => console.log('selected', itemInfo)"
// the itemInfo.value is some as `
>
{{ item.label }}
Usually used to distinguish between different groups
Automatically renders when there are no results for the search query.
Your should manually control loading`
- cmdk - Fast, unstyled command menu React component.
- kbar - fast, portable, and extensible cmd+k interface for your site.
MIT @xiaoluoboding