ContentSearch

CommandPaletteGitHub
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>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        shortcut="meta_k"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</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>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :color-mode="false"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</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/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/docs/components'
}, {
  label: 'Showcase',
  icon: 'i-lucide-presentation',
  to: '/showcase'
}]

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

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :files="files"
        shortcut="meta_k"
        :navigation="navigation"
        :links="links"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</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.ui.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.ui.icons.loading

string | object

The icon when the loading prop is true.

close

true

boolean | Partial<ButtonProps>

Display a close button in the input (useful when inside a Modal for example). { size: 'md', color: 'neutral', variant: 'ghost' }

closeIcon

appConfig.ui.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

ContentSearchLink[]

Links group displayed as the first group in the command palette.

navigation

ContentNavigationItem[]

groups

CommandPaletteGroup<ContentSearchItem>[]

Custom groups displayed between navigation and color mode group.

files

ContentSearchFile[]

fuse

{ fuseOptions: { includeMatches: true } }

UseFuseOptions<ContentSearchLink>

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 modal.

transition

true

boolean

Animate the modal when opening or closing.

content

DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>

The content of the modal.

dismissible

true

boolean

When false, the modal will not close when clicking outside or pressing escape.

fullscreen

false

boolean

When true, the modal 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 modal in a portal.

searchTerm

''

string

ui

{ modal?: ClassNameValue; input?: ClassNameValue; } & { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; back?: ClassNameValue; content?: ClassNameValue; footer?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemTrailingHighlightedIcon?: ClassNameValue; itemTrailingKbds?: ClassNameValue; itemTrailingKbdsSize?: ClassNameValue; itemLabel?: ClassNameValue; itemLabelBase?: ClassNameValue; itemLabelPrefix?: ClassNameValue; itemLabelSuffix?: ClassNameValue; }

Slots

Slot Type
empty

{ searchTerm?: string | undefined; }

footer

{ ui: { 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; itemLabel: (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

{ ui: { 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; itemLabel: (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

{ ui: { 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; itemLabel: (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: ContentSearchItem; index: number; ui: { 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; itemLabel: (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: ContentSearchItem; index: number; ui: { 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; itemLabel: (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: ContentSearchItem; index: number; ui: { 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; itemLabel: (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: ContentSearchItem; index: number; ui: { 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; itemLabel: (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]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    contentSearch: {
      slots: {
        modal: '',
        input: '[&>input]:text-base/5'
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-3xl sm:h-[28rem]'
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        contentSearch: {
          slots: {
            modal: '',
            input: '[&>input]:text-base/5'
          },
          variants: {
            fullscreen: {
              false: {
                modal: 'sm:max-w-3xl sm:h-[28rem]'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

8a259 — fix: de-duplicate description and suffix

63c0a — feat: expose ui in slot props where used (#5207)

095a0 — fix: proxy modal props to support fullscreen

3173b — fix: proxySlots reactivity (#4969)

61b60 — feat: allow passing a component instead of a name (#4766)

946c2 — fix: make ui.modal work

5cb65 — feat: import @nuxt/ui-pro components

ContentNavigation

An accordion-style navigation component for organizing page links.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.