VueCraft NPM

Установка ​

Требования ​

ОкружениеМинимальная версия
Vue3.3.0+
Node.js18+
@nuxt/kit3.0.0+ (опционально — только для модуля /nuxt)

Установка ​

bash
npm install @macrulez/vue-command-palette

Peer-зависимость:

bash
npm install vue@>=3.3

Быстрый старт ​

1. Установите плагин ​

ts
// main.ts
import { createApp } from 'vue'
import { VCommandPalettePlugin } from '@macrulez/vue-command-palette'
import '@macrulez/vue-command-palette/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(VCommandPalettePlugin, {
  hotkey: ['$mod', 'k'], // Cmd+K на macOS, Ctrl+K на Windows/Linux
  colorTheme: 'system', // 'light' | 'dark' | 'system'
  persistRecent: true,
  maxRecent: 5,
})

app.mount('#app')

2. Разместите CommandPalette в любом месте дерева компонентов ​

vue
<script setup lang="ts">
import { CommandPalette, useRegisterGroup } from '@macrulez/vue-command-palette'

useRegisterGroup({
  id: 'navigation',
  label: 'Navigation',
  priority: 100,
  commands: [
    {
      id: 'go-home',
      label: 'Go to Home',
      icon: '🏠',
      perform: () => router.push('/'),
    },
    {
      id: 'go-settings',
      label: 'Settings',
      icon: '⚙️',
      shortcut: ['$mod', ','],
      perform: () => router.push('/settings'),
    },
  ],
})
</script>

<template>
  <RouterView />
  <CommandPalette placeholder="Search commands…" :max-results="12" />
</template>

Нажмите Cmd+K / Ctrl+K, чтобы открыть.