@cmd-kit/vue

Vue adapter for Cmd+kit with default UI, keyboard navigation, nested sections, async source, and slot customization.

Website: https://cmd-kit.vercel.app/
Docs: https://cmd-kit.vercel.app/docs/vue

🌐 Language

• Español
• English

🇪🇸 Español

⚡ Instalación

npm install @cmd-kit/vue vue

✅ Qué incluye

• CommandPalette (componente).
• useCommandPalette (composable).
• Atajo global (mod+k por defecto).
• Navegación por teclado y secciones anidadas.
• Soporte async (source).
• Recientes opcionales con deduplicación.
• Personalización por slots, theme y classNames.
• theme en modo simple o dual (light/dark).
• reducedMotion para desactivar animaciones de hover/movimiento.

🚀 Uso rápido

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

<template>
  <CommandPalette />
</template>

🧩 Ejemplo con secciones

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

const sections = [
  {
    id: "workspace",
    title: "Workspace",
    items: [
      { id: "overview", title: "Overview", shortcut: "mod+o" },
      { id: "projects", title: "Projects", shortcut: "mod+p" }
    ]
  }
];
</script>

<template>
  <CommandPalette :sections="sections" title="Command menu" />
</template>

🎨 Slots disponibles

• title
• section-title
• item
• empty-state

Ejemplo:

<CommandPalette :sections="sections">
  <template #item="{ item, active }">
    <div :style="{ opacity: active ? 1 : 0.8 }">{{ item.title }}</div>
  </template>
</CommandPalette>

Tema dual (claro/oscuro):

<CommandPalette
  :sections="sections"
  :theme="{
    light: { accentColor: '#0fa6d8', backgroundColor: '#ffffff' },
    dark: { accentColor: '#35d7ff', backgroundColor: '#0b1116' }
  }"
  title="Command menu"
/>

🛝 Integración desde Playground

1. Configura comandos en playground.
2. Exporta target Vue.
3. Copia sections/items + opcionales.
4. Pégalos en tu <CommandPalette />.

🤝 Contribuciones

Si encuentras un bug o mejora de integración Vue, abre issue/PR.

🇬🇧 English

⚡ Install

npm install @cmd-kit/vue vue

✅ What you get

• CommandPalette component.
• useCommandPalette composable.
• Global shortcut (mod+k by default).
• Keyboard + nested navigation.
• Async source support.
• Optional recents with dedupe.
• Slot-based customization + theme + classNames.
• theme in single mode or dual mode (light/dark).
• reducedMotion prop to disable hover/motion animations.

🚀 Quick start

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

<template>
  <CommandPalette />
</template>

🎨 Slots

• title
• section-title
• item
• empty-state

Dual theme example:

<CommandPalette
  :sections="sections"
  :theme="{
    light: { accentColor: '#0fa6d8', backgroundColor: '#ffffff' },
    dark: { accentColor: '#35d7ff', backgroundColor: '#0b1116' }
  }"
  title="Command menu"
/>

🛝 Playground integration

Use Vue export target and paste the generated config into your component integration.

🤝 Contributing

PRs are welcome for Vue adapter bugs and DX improvements.

Portfolio: Fr4n0m → https://codebyfran.es