+ Kit command palette system

Vue

Integración con Vue

@cmd-kit/vue ofrece un componente CommandPalette y una API composable para los casos donde quieres controlar más directamente el estado de la palette.

Instalación

Gestor de paquetes 
npm install @cmd-kit/vue

Uso básico

<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="Comandos del proyecto" />
</template>

Qué puedes configurar

Slots e iconos

La personalización en Vue se hace con slots. Usa el slot item cuando quieras cambiar iconos o la estructura de la fila.

<CommandPalette :sections="sections" title="Comandos del proyecto">
  <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>

Ejemplo de mensajes

<CommandPalette
  :messages="{
    searchPlaceholder: 'Busca docs, páginas o acciones',
    noResults: 'No se ha encontrado ningún comando.'
  }"
  :sections="sections"
  title="Comandos del proyecto"
/>

Añadir un comando nuevo

Para añadir una opción nueva, agrega un nuevo ítem en tus datos de sección. shortcut es opcional.

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

Comandos recientes

recents es opcional y está apagado por defecto. Actívalo con :recents="true" o pasando un objeto con limit y sectionTitle. Desactívalo con :recents="false".

<CommandPalette
  :sections="sections"
  :recents="false"
  title="Comandos del proyecto"
/>

FAQ

¿Necesito <script setup> para usar el adaptador de Vue?

No. También funciona con componentes Vue tradicionales; <script setup> es solo una comodidad.

¿Cómo personalizo la fila de resultados en Vue?

Usa el slot item para renderizar tus iconos, layout y metadatos según cada comando.

¿Puedo sincronizar el estado abierto/cerrado con un estado padre?

Sí. Vincula v-model:open (o escucha open-change) para integrarlo con tu estado global.

¿Cómo desactivo recientes en Vue?

Deja recents sin pasar (apagado por defecto) o usa :recents="false".

¿Cómo lo estilizo sin rehacer todo el componente?

Usa theme para tokens base y classNames para hooks CSS por slot.

¿Cuándo conviene ir de Vue a Core?

Cuando la personalización por slots ya no sea suficiente y necesites un pipeline de render completamente propio.