A ready to use CommandPalette to add to your documentation.

Usage

Use the files and navigation props to provide the content to search through.

You can open the CommandPalette by pressing K or using the DocsSearchButton component. You can also do this manually with const { toggleDocsSearch } = useUIState().

You'll usually use this component in your app.vue:

app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })

const links = [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Playground',
  icon: 'i-simple-icons-stackblitz',
  to: '/playground'
}, {
  label: 'Roadmap',
  icon: 'i-heroicons-academic-cap',
  to: '/roadmap'
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: '/pro'
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]

provide('navigation', navigation)
provide('files', files)
</script>

<template>
  <Header :links="links" />

  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>

  <Footer />

  <ClientOnly>
    <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
  </ClientOnly>

  <UNotifications />
</template>

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

The files are fetched from the /api/search.json endpoint, to achieve the same thing you'll need to create a server route:

server/api/search.json.get.ts
import { serverQueryContent } from '#content/server'

export default eventHandler(async (event) => {
  return serverQueryContent(event).where({ _type: 'markdown', navigation: { $ne: false } }).find()
})

We recommend using this method instead of fetching the files directly, the performances will be better.

Props

files
ParsedContent[]
navigation
NavItem[]
links
Link[]
groups
Group[]
fuse
unknown
ui
unknown