Registering Commands

useRegisterCommands()

Registers commands when the component mounts and automatically unregisters them when it unmounts. Commands registered this way have no group header.

function useRegisterCommands<T = unknown>(commands: Command<T>[], name?: string): void

Pass name to target a named instance instead of the default palette.

import { useRegisterCommands } from '@macrulez/vue-command-palette'

// In any component setup()
useRegisterCommands([
  {
    id: 'format-doc',
    label: 'Format Document',
    icon: '✨',
    perform: () => formatDocument(),
  },
  {
    id: 'toggle-sidebar',
    label: 'Toggle Sidebar',
    shortcut: ['$mod', 'b'],
    perform: () => sidebar.toggle(),
  },
])

useRegisterGroup()

Registers a full command group with a label and priority on mount, unregisters on unmount.

function useRegisterGroup<T = unknown>(group: CommandGroup<T>, name?: string): void

Pass name to target a named instance instead of the default palette.

import { useRegisterGroup } from '@macrulez/vue-command-palette'

useRegisterGroup({
  id: 'editor',
  label: 'Editor',
  priority: 80,
  commands: [
    {
      id: 'editor-format',
      label: 'Format Document',
      description: 'Run Prettier on the current file',
      icon: '✨',
      perform: () => format(),
    },
    {
      id: 'editor-lint',
      label: 'Lint File',
      description: 'Run ESLint and show errors',
      icon: '🔍',
      enabled: () => isFileOpen.value,
      perform: () => lint(),
    },
  ],
})