Composable, Customizable Command K Component for Vue – Command Palette

Command Palette is a component for creating a fast and customizable Command + K interface in Vue applications.

It allows developers to build an intuitive command menu that users can access via a keyboard shortcut.

Key features of the Command Palette component include fuzzy search to easily find relevant commands, support for custom keyboard shortcuts, and a composable, unstyled design that is completely customizable.

The component uses Vue’s compound component pattern and namespaced sub-components for maximum flexibility.

How to use it:

1. Install and import the Command Palette component in your Vue project.

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Command } from 'vue-command-palette'
</script>

2. Create a basic Command + K interface that will be displayed in a modal dialog.

<Command.Dialog :visible="visible" theme="custom">
  <template #header>
    <Command.Input placeholder="Type a command or search..." />
  </template>
  <template #body>
    <Command.List>
      <Command.Empty>No results found.</Command.Empty>
      <Command.Group heading="Letters">
        <Command.Item>a</Command.Item>
        <Command.Item>b</Command.Item>
        <Command.Separator />
        <Command.Item>c</Command.Item>
      </Command.Group>
      <Command.Item>Apple</Command.Item>
    </Command.List>
  </template>
</Command.Dialog>

Preview:

Changelog:

v0.2.3 (09/20/2023)

• fix: fixed the debounce search bug

Download Details:

Author: xiaoluoboding

Live Demo: https://vue-command-palette.vercel.app/

Download Link: https://github.com/xiaoluoboding/vue-command-palette/archive/refs/heads/main.zip

Official Website: https://github.com/xiaoluoboding/vue-command-palette

Install & Download:

# Yarn
$ yarn vue-command-palette

# NPM
$ npm i vue-command-palette