CommandMenu

The CommandMenu component provides a powerful command palette interface (similar to VS Code's command palette) that allows users to search documentation, navigate pages, and execute commands quickly.

Copy<script setup lang="ts">
const tree = {
  title: "Docs",
  path: "/docs",
  children: [
    {
      title: "Getting Started",
      path: "/docs/getting-started",
      type: "group" as const,
      children: [
        {
          title: "Introduction",
          path: "/docs/getting-started/introduction",
          type: "page" as const,
        },
        {
          title: "Installation",
          path: "/docs/getting-started/installation",
          type: "page" as const,
        },
      ],
    },
  ],
};

const navItems = [{ href: "/docs", name: "Docs" }];
</script>

<template>
  <CommandMenu :tree="tree" :nav-items="navItems" />
</template>

Usage

Copy<script setup lang="ts">
import { CommandMenu } from '@/components/CommandMenu'

const tree = {
  children: [
    {
      title: "Getting Started",
      type: "group",
      children: [
        {
          title: "Introduction",
          path: "/docs/getting-started/introduction",
          type: "page",
        },
      ],
    },
  ],
}

const navItems = [
  { href: "/docs", label: "Docs" },
]
</script>

<template>
  <CommandMenu :tree="tree" :nav-items="navItems" />
</template>

Features

Search Documentation

The built-in search allows for instantaneous querying across all documentation files using server/api/search.get.ts and the useSearch composable.

• Fast & Debounced: Queries are debounced by 300ms for responsiveness.
• Full-Text Retrieval: Searches titles, descriptions, paths, and raw body content.
• Smart Excerpts: Generates relevant text snippets for each match.
• Versioned Caching: Deterministic invalidation using content-based hashes; 24-hour persistence with instant updates on new deployments.

Keyboard Shortcuts

• ⌘ K (Mac) or Ctrl K (Windows/Linux) - Open command menu
• / - Alternative shortcut to open command menu
• ⌘ C or Ctrl C - Copy selected item when a copy payload is available
• Enter - Select highlighted item
• Esc - Close command menu

Navigation

The command menu displays:

• Pages: Main navigation items
• Documentation Tree: Auto-generated from your content structure
• Search Results: Results from markdown file search
• Actions: Quick actions like "click to copy"

Examples

Basic Usage

Copy<script setup lang="ts">
const tree = {
  title: "Docs",
  path: "/docs",
  children: [
    {
      title: "Getting Started",
      path: "/docs/getting-started",
      type: "group" as const,
      children: [
        {
          title: "Introduction",
          path: "/docs/getting-started/introduction",
          type: "page" as const,
        },
        {
          title: "Installation",
          path: "/docs/getting-started/installation",
          type: "page" as const,
        },
      ],
    },
  ],
};

const navItems = [{ href: "/docs", name: "Docs" }];
</script>

<template>
  <CommandMenu :tree="tree" :nav-items="navItems" />
</template>

With Blocks

You can add blocks to the command menu:

Copy<script setup lang="ts">
const blocks = [
  {
    name: "hero",
    description: "Hero section block",
    categories: ["marketing"],
  },
]
</script>

<template>
  <CommandMenu :tree="tree" :nav-items="navItems" :blocks="blocks" />
</template>

API Reference

CommandMenu

NavigationItem

Customization

Search Integration

The search functionality is powered by the useSearch composable (app/composables/useSearch.ts) and the server-side endpoint (server/api/search.get.ts):

• API Endpoint: server/api/search.get.ts handles the SQL querying via Nuxt Content.
• Composable: app/composables/useSearch.ts provides a reactive interface with useMemoize and deterministic TTL cache.
• Deterministic Invalidation: The client detects content changes via /api/docs-version and automatically purges stale results.
• Limit: Matches are capped at the 20 most relevant items.

Styling

The command menu uses the shadcn-vue Dialog and Command components, which can be customized through CSS variables and Tailwind classes.