Skip to content

Nuxt ​

Add the module to nuxt.config.ts:

ts
export default defineNuxtConfig({
  modules: ['@macrulez/vue-command-palette/nuxt'],
})

The module installs the plugin automatically, registers <CommandPalette>, <CommandItem>, <CommandGroup>, and <VirtualList> as components (no manual import needed in any SFC), auto-imports every composable and factory function the package exports — useCommandPalette, useRegisterCommands, useRegisterGroup, resolvePaletteContext, createCommandPalette, installPalette, createCommandStore, createKeyboardManager, fuzzySearch, highlightMatches, getMatchRanges — and adds the default stylesheet to nuxt.options.css.

Only one palette instance can be installed through the module. For a second named instance, add a hand-written Nuxt plugin that calls app.use(createCommandPalette({ name: '…' })) directly.

Options ​

Configure the module under its own vCommandPalette key — same shape as PaletteOptions:

ts
export default defineNuxtConfig({
  modules: ['@macrulez/vue-command-palette/nuxt'],
  vCommandPalette: {
    hotkey: ['$mod', 'k'],
    persistRecent: true,
    maxRecent: 5,
  },
})

Function-valued options aren't supported in nuxt.config.ts ​

vCommandPalette is written into Nuxt's runtimeConfig.public, which gets serialized and shipped to the client — and functions can't survive that boundary. If you set onOpen, onClose, onError, onHighlight, search, or onSearch here, the module strips them before writing runtimeConfig.public and prints a build-time warning naming the affected option(s), so server and client agree on the (absent) value instead of silently disagreeing after hydration.

Set callback options in a hand-written Nuxt plugin instead:

ts
// plugins/command-palette.ts
import { VCommandPalettePlugin } from '@macrulez/vue-command-palette'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VCommandPalettePlugin, {
    onOpen: () => analytics.track('palette_opened'),
  })
})

Non-function options (hotkey, persistRecent, maxRecent, colorTheme, etc.) work fine through nuxt.config.ts and don't need this workaround.