DocsSearch
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