https://github.com/wobsoriano/v-command-palette
A cmd+k component for Vuetify
https://github.com/wobsoriano/v-command-palette
command-palette vue vuetify
Last synced: 6 months ago
JSON representation
A cmd+k component for Vuetify
- Host: GitHub
- URL: https://github.com/wobsoriano/v-command-palette
- Owner: wobsoriano
- License: mit
- Created: 2023-12-20T21:04:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-14T15:37:29.000Z (over 1 year ago)
- Last Synced: 2025-03-28T14:05:18.561Z (6 months ago)
- Topics: command-palette, vue, vuetify
- Language: Vue
- Homepage: https://v-command-palette.vercel.app
- Size: 210 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-command-palette
A command palette for [Vuetify](https://next.vuetifyjs.com).
https://github.com/wobsoriano/v-command-palette/assets/13049130/f99bccff-acde-422c-a30b-1a53bac0ffa0
## Installation
```bash
npm install v-command-palette
```
## Usage
Import the component at the root of your app
```vue
import { VCommandPalette, createCommand } from 'v-command-palette'
const commands = [
createCommand({
title: 'Home',
icon: 'mdi-home',
command() { /** do something */ },
section: 'Navigation',
shortcut: ['h'],
}),
createCommand({
title: 'Docs',
icon: 'mdi-book',
command() { /** do something */ },
section: 'Navigation',
shortcut: ['g', 'd'],
}),
]
```
## Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| commands | `array` | `[]` | The list of commands to display. See the [`Command`](https://github.com/wobsoriano/v-command-palette/blob/e1ed365d227caeb6c1fa6222ebbb98f80cc8fff8/lib/useSearch.ts#L6) interface. |
| textFieldProps | `object` | `{}` | [VTextField props](https://vuetifyjs.com/en/api/v-text-field/#props) |
| dialogProps | `object` | `{}` | [VDIalog props](https://vuetifyjs.com/en/api/v-dialog/#props) |
| cardProps | `object` | `{}` | [VCard props](https://vuetifyjs.com/en/api/v-card/#props) |
| cardTextProps | `object` | `{}` | [VCardText props](https://vuetifyjs.com/en/api/v-card-text/#props) |
| fuseOptions | `object` | `{}` | [Fuse.js options](https://www.fusejs.io/api/options.html) |
## Composables
- `useCommandPalette` - Programmaticaly open or close the dialog.
## License
MIT