cmd-bar
v0.9.20
Published
Versatile Vue 3 command-bar component
Downloads
79
Maintainers
Readme
cmd-bar wip
Features
- 🎨 Unstyled - No styles included, you can style it as you want
- 🧩 Extensible - You can add your own Modal and components
- ⌨️ Key bindings - Usable with just a keyboard
- 🧙 Virtualized - It uses useVirtualList
Quick Setup
- Add
cmd-bar
dependency to your project
# Using pnpm
pnpm add -D cmd-bar
# Using yarn
yarn add --dev cmd-bar
# Using npm
npm install --save-dev cmd-bar
- Then you can import the
CmdBar
Compound Component in your project.
import { CmdBar } from 'cmd-bar'
<CmdBar :groups="groupedCommands" />
<CmdBarDialog>
<template #header>
<CmdBarInput placeholder="search fo anything />
</template>
<template #content>
<CmdBarList :config="listConfig">
<template #default="{ command }">
<div class="leading">
<img :src="command.leading" alt="icon" />
{{ command.label }}
</div>
<span v-if="command.shortcut" class="actions">
<kbd v-for="shortcut of formattedShortcuts(command.shortcut)" :key="shortcut">
{{ shortcut }}
</kbd>
</span>
</template>
</CmdBarList>
</template>
</CmdBarDialog>
</CmdBar>
That's it! ✨
Props to xiaoluoboding/vue-command-palette and CommandPalette - Nuxt UI, for the inspiration.