+ Kit command palette system

Vue

Vue Integration

@cmd-kit/vue provides a CommandPalette component plus a Vue composable for cases where you want to orchestrate state more directly.

Install

Package manager 
npm install @cmd-kit/vue

Basic usage

<script setup lang="ts">
import { CommandPalette } from "@cmd-kit/vue";

const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      { id: "dashboard", title: "Dashboard", href: "/dashboard" }
    ]
  }
];
</script>

<template>
  <CommandPalette :sections="sections" title="Project commands" />
</template>

What you can configure

Slots and icons

Vue customization is slot-based. Use the item slot to control icons and row layout.

<CommandPalette :sections="sections" title="Project commands">
  <template #item="{ item, active }">
    <div :class="['palette-row', { 'is-active': active }]">
      <MyIcon :name="item.id" />
      <div class="palette-row-copy">
        <strong>{{ item.title }}</strong>
        <span v-if="item.subtitle">{{ item.subtitle }}</span>
      </div>
    </div>
  </template>
</CommandPalette>

Messages example

<CommandPalette
  :messages="{
    searchPlaceholder: 'Search docs, pages, or actions',
    noResults: 'No matching command found.'
  }"
  :sections="sections"
  title="Project commands"
/>

Add a new command

Add a new option by appending a new item to your section data. shortcut is optional.

<script setup lang="ts">
const sections = [
  {
    id: "navigation",
    title: "Navigation",
    items: [
      { id: "dashboard", title: "Dashboard", href: "/dashboard" },
      { id: "billing", title: "Billing", href: "/billing", shortcut: "mod+b" },
      { id: "support", title: "Support", href: "/support" }
    ]
  }
];
</script>

Recent commands

recents is optional and off by default. Enable with :recents="true" or configure an object with limit and sectionTitle. Disable with :recents="false".

<CommandPalette
  :sections="sections"
  :recents="false"
  title="Project commands"
/>

FAQ

Do I need <script setup> to use the Vue adapter?

No. It works with regular Vue components too; <script setup> is only a convenience.

How do I customize the item row in Vue?

Use the item slot to render your own icon, layout, and metadata based on the current command item.

Can I sync palette visibility with parent state?

Yes. Bind v-model:open (or listen to open-change) to integrate with your app-level state.

How do I disable recent commands in Vue?

Keep recents unset (default off) or pass :recents="false".

How do I style it without rewriting everything?

Use theme for built-in tokens and classNames for slot-level CSS hooks.

When should I switch from the Vue component to Core?

Switch when slot-based customization is not enough and you need a fully custom rendering pipeline.