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 Ctrl 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