Command Palette for Vue

A fast, composable, unstyled command + k interface (Command Palette) for Vue.

Preview

Features

• 🧩 Compound Component Design
• 💄 Completely unstyled, but more customizable
• 🔍 Fuzzy search support to find relevant command
• ⌨️ keyboard shortcut support to bind custom keybindings to your command

Install

yarn add vue-command-palette
//
pnpm add vue-command-palette

Usage

Then you can import the Command Compound Component in your project.

<template>
  <Command theme="custom">
    <Command.Input placeholder="Type a command or search..." />
    <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>
  </Command>
</template>

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

<style>
// import your custom css
@import '~/assets/css/custom.css';
</style>

or in a dialog:

<template>
  <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>
</template>

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

const visible = ref(false)
</script>

<style>
// import your custom css
@import '~/assets/css/custom.css';
</style>

Events

Styling

Animation

Compound components

Command

Command.Dialog

Command.Input

Command.List

Command.Group

Command.Item

Command.Separator

Command.Empty

Command.Loading

Inspiration

• cmdk - Fast, unstyled command menu React component.
• kbar - fast, portable, and extensible cmd+k interface for your site.

License

MIT @xiaoluoboding