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.
useContentSearch composable: const { open } = useContentSearch().Use the shortcut prop to change the shortcut used in defineShortcuts to open the ContentSearch component. Defaults to meta_k ( K).
<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:
<script setup lang="ts">
definePageMeta({
colorMode: 'dark'
});
</script>
You can disable this behavior by setting the color-mode prop to false:
<template>
<PApp>
<ClientOnly>
<LazyUContentSearch
v-model:search-term="searchTerm"
:color-mode="false"
:files="files"
:navigation="navigation"
:fuse="{ resultLimit: 42 }"
/>
</ClientOnly>
</PApp>
</template>
app.vueUse the ContentSearch component in your app.vue or in a layout:
<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>
ContentSearch component in a ClientOnly component so it's not rendered on the server.| Prop | Default | Type |
|---|
| Slot | Type |
|---|
| Event | Type |
|---|
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
commandPaletteRef | Ref<InstanceType<typeof PCommandPalette> | null> |
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.
export default defineAppConfig({
pohon: {
contentSearch: {
slots: {
dialog: '',
input: ''
},
variants: {
fullscreen: {
false: {
dialog: ''
}
}
}
}
}
};
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: ''
}
}
}
}
}
};