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, so you can pass any property such as icon, placeholder, etc.

Use the files and navigation props with the files and navigation values you fetched using the queryCollectionSearchSections and queryCollectionNavigation composables from @nuxt/content.

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

Shortcut

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

app.vue

<template>
  <PApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        shortcut="meta_k"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </PApp>
</template>

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>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :color-mode="false"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </PApp>
</template>

Examples

Within `app.vue`

Use the ContentSearch component in your app.vue or in a layout:

app.vue

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'));
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
  server: false
});

const links = [{
  label: 'Docs',
  icon: 'i-lucide:book',
  to: '/docs/pohon/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide:box',
  to: '/docs/pohon/components'
}, {
  label: 'Showcase',
  icon: 'i-lucide:presentation',
  to: '/showcase'
}];

const searchTerm = ref('');
</script>

<template>
  <PApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :files="files"
        shortcut="meta_k"
        :navigation="navigation"
        :links="links"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </PApp>
</template>

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

API

Props

Prop	Default	Type
`icon`	`appConfig.pohon.icons.search`	`string \| object` The icon displayed in the input.
`placeholder`	`t('commandPalette.placeholder')`	`string` The placeholder text for the input.
`autofocus`	`true`	`boolean` Automatically focus the input when component is mounted.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`close`	`true`	`boolean \| Omit<PButtonProps, PLinkPropsKeys>` Display a close button in the input (useful when inside a Dialog for example). `{ size: 'md', color: 'neutral', variant: 'ghost' }`
`closeIcon`	`appConfig.pohon.icons.close`	`string \| object` The icon displayed in the close button.
`shortcut`	`'meta_k'`	`string` Keyboard shortcut to open the search (used by `defineShortcuts`)
`links`		`T[]` Links group displayed as the first group in the command palette.
`navigation`		`ContentNavigationItem[]`
`groups`		`PCommandPaletteGroup<PContentSearchItem>[]` Custom groups displayed between navigation and color mode group.
`files`		`PContentSearchFile[]`
`fuse`	`{ fuseOptions: { includeMatches: true } }`	`n<T>` Options for useFuse passed to the CommandPalette.
`colorMode`	`true`	`boolean` When `true`, the theme command will be added to the groups.
`title`		`string`
`description`		`string`
`overlay`	`true`	`boolean` Render an overlay behind the dialog.
`transition`	`true`	`boolean` Animate the dialog when opening or closing.
`content`		`ADialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>` The content of the dialog.
`dismissible`	`true`	`boolean` When `false`, the dialog will not close when clicking outside or pressing escape.
`fullscreen`	`false`	`boolean` When `true`, the dialog will take up the full screen.
`modal`		`boolean` The modality of the dialog When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the dialog in a portal.
`searchTerm`	`''`	`string`
`pohon`		{ dialog?: ClassValue; input?: ClassValue; } & { root?: ClassValue; input?: ClassValue; close?: ClassValue; back?: ClassValue; content?: ClassValue; footer?: ClassValue; viewport?: ClassValue; group?: ClassValue; empty?: ClassValue; label?: ClassValue; item?: ClassValue; itemLeadingIcon?: ClassValue; itemLeadingAvatar?: ClassValue; itemLeadingAvatarSize?: ClassValue; itemLeadingChip?: ClassValue; itemLeadingChipSize?: ClassValue; itemTrailing?: ClassValue; itemTrailingIcon?: ClassValue; itemTrailingHighlightedIcon?: ClassValue; itemTrailingKbds?: ClassValue; itemTrailingKbdsSize?: ClassValue; itemWrapper?: ClassValue; itemLabel?: ClassValue; itemDescription?: ClassValue; itemLabelBase?: ClassValue; itemLabelPrefix?: ClassValue; itemLabelSuffix?: ClassValue; }

Slots

Slot	Type
`empty`	`{ searchTerm?: string \| undefined; }`
`footer`	{ pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`back`	{ pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`close`	{ pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item`	{ item: PContentSearchItem; index: number; pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item-leading`	{ item: PContentSearchItem; index: number; pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item-label`	{ item: PContentSearchItem; index: number; pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item-description`	{ item: PContentSearchItem; index: number; pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item-trailing`	{ item: PContentSearchItem; index: number; pohon: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`content`	`{ close: () => void; }`

Emits

Event	Type
`update:searchTerm`	`[value: string]`

Expose

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

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

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PContentSearch. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    contentSearch: {
      slots: {
        dialog: '',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            dialog: ''
          }
        }
      }
    }
  }
};

vite.config.ts

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

export default defineAppConfig({
  pohon: {
    contentSearch: {
      slots: {
        dialog: '',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            dialog: ''
          }
        }
      }
    }
  }
};

Changelog

No recent changes

ContentNavigation

An accordion-style navigation component for organizing page links.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.