ContentSearch

A ready-to-use CommandPalette to add to your documentation.

This component is only available when the @nuxt/content module is installed.

Usage

The ContentSearch component extends the CommandPalette component with built-in @nuxt/content search support, navigation grouping and color mode commands. It supports both client-side Fuse.js filtering and server-side FTS5 full-text search. You can pass any CommandPalette property such as icon, placeholder, etc.

You can open the CommandPalette by pressing ⌘CtrlK, by using the ContentSearchButton component or by using the useContentSearch composable: const { open } = useContentSearch().

It is recommended to wrap the ContentSearch component in a ClientOnly component so it's not rendered on the server.

Navigation

Use the navigation prop with queryCollectionNavigation to group search results by section:

app.vue

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'));
</script>

<template>
  <PApp>
    <ClientOnly>
      <LazyPContentSearch
        :navigation="navigation"
      />
    </ClientOnly>
  </PApp>
</template>

Files

Use the files prop with queryCollectionSearchSections to load all search sections upfront and use client-side Fuse.js filtering:

app.vue

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'));

const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs', {
  ignoredTags: ['style']
}), {
  server: false
});
</script>

<template>
  <PApp>
    <ClientOnly>
      <LazyPContentSearch
        :navigation="navigation"
        :files="files"
        :fuse="{ resultLimit: 20, fuseOptions: { threshold: 0.2 } }"
      />
    </ClientOnly>
  </PApp>
</template>

Use the fuse prop to configure useFuse options passed to the underlying CommandPalette such as resultLimit (default 12) and fuseOptions.threshold (default 0.1).

Search

Use the search prop with useSearchCollection for server-side FTS5 full-text search with highlighted snippets instead of client-side filtering:

Requires @nuxt/content v3.14+.

app.vue

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'));

const { search, status, init } = useSearchCollection('content', {
  immediate: false,
  ignoredTags: ['style']
});

const { open } = useContentSearch();

// Defer index initialization until the user opens the palette when using `immediate: false`
watch(open, (value) => {
  if (value && status.value === 'idle') {
    init();
  }
});
</script>

<template>
  <PApp>
    <ClientOnly>
      <LazyPContentSearch
        :navigation="navigation"
        :search="search"
        :search-status="status"
      />
    </ClientOnly>
  </PApp>
</template>

Pass search-status so the component can automatically re-trigger the search once the index becomes ready. Use search-delay (default 100ms) to control how long typing must pause before the search fires. The fuse.resultLimit option caps the total results returned across all groups (search results, links, theme, etc.).

When using the search prop, you don't need to pass files. The component calls the async search function on each keystroke instead of Fuse.js. Results are automatically mapped and grouped by navigation with highlighted snippets. Unlike the files approach which loads all search sections upfront and lets you browse navigation items before typing, the search prop only returns results after a query is entered.

Shortcut

Use the shortcut prop to change the shortcut used in defineShortcuts to open the ContentSearch component. Defaults to meta_k (⌘Ctrl K).

app.vue

<template>
  <PApp>
    <ClientOnly>
      <LazyPContentSearch
        shortcut="meta_k"
      />
    </ClientOnly>
  </PApp>
</template>

Links

Use the links prop to add a group of quick-access links at the top of the command palette:

app.vue

<script setup lang="ts">
const links = [{
  label: 'Docs',
  icon: 'i-lucide-book',
  to: '/pohon/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/pohon/components'
}, {
  label: 'Showcase',
  icon: 'i-lucide-presentation',
  to: '/showcase'
}];
</script>

<template>
  <PApp>
    <ClientOnly>
      <LazyPContentSearch
        :links="links"
      />
    </ClientOnly>
  </PApp>
</template>

Color Mode

By default, a group of commands will be added to the command palette so you can switch between light and dark mode. This will only take effect if the colorMode is not forced in a specific page which can be achieved through definePageMeta:

pages/index.vue

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
});
</script>

You can disable this behavior by setting the color-mode prop to false:

app.vue

<template>
  <PApp>
    <ClientOnly>
      <LazyPContentSearch
        :color-mode="false"
      />
    </ClientOnly>
  </PApp>
</template>

API

Props

Prop	Default	Type

Slots

Slot	Type

Emits

Event	Type

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
`commandPaletteRef`	`Ref<InstanceType<typeof PCommandPalette> \| null>`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    contentSearch: {
      slots: {
        modal: '',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
          }
        },
        size: {
          xs: {},
          sm: {},
          md: {},
          lg: {},
          xl: {}
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        contentSearch: {
          slots: {
            modal: '',
            input: ''
          },
          variants: {
            fullscreen: {
              false: {
                modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
              }
            },
            size: {
              xs: {},
              sm: {},
              md: {},
              lg: {},
              xl: {}
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

ContentNavigation

An accordion-style navigation component for organizing page links.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.