Query Utils
queryCollectionSearchSections
The queryCollectionSearchSections composable generates searchable sections from a collection for enhanced content discovery.
Type
function queryCollectionSearchSections(collection: keyof Collections, opts?: { ignoredTags: string[] }): ChainablePromise<T, Section[]>
interface ChainablePromise<T extends keyof PageCollections, R> extends Promise<R> {
where(field: keyof PageCollections[T] | string, operator: SQLOperator, value?: unknown): ChainablePromise<T, R>
andWhere(groupFactory: QueryGroupFunction<PageCollections[T]>): ChainablePromise<T, R>
orWhere(groupFactory: QueryGroupFunction<PageCollections[T]>): ChainablePromise<T, R>
order(field: keyof PageCollections[T], direction: 'ASC' | 'DESC'): ChainablePromise<T, R>
}
Usage
Use the auto-imported queryCollectionSearchSections
to generate searchable sections from a specific collection. This is particularly useful for creating advanced search functionality or content discovery features in your application.
app.vue
<script>
const { data: sections } = await useAsyncData('search-sections', () => {
return queryCollectionSearchSections('docs')
})
</script>
The
queryCollectionSearchSections
utility is available in both Vue and Nitro. Checkout Server Usage for more details on how to use it on the server side.API
queryCollectionSearchSections(collection: CollectionName, options?: SearchSectionsOptions)
Generate searchable sections from the specified collection.
- Parameters:
collection
: The key of the defined collection incontent.config.ts
.options
: (Optional) An object with the following properties:ignoredTags
: An array of tag names to ignore when generating sections. Default is an empty array.
- Returns: A Promise that resolves to an array of searchable sections. Each section is an object with the following properties:
id
: A unique identifier for the section.title
: The title of the section (usually the heading text).titles
: An array of parent section titles, representing the hierarchy.content
: The textual content of the section.level
: The heading level (1-6) of the section, where 1 is the highest level.
Example
Here's an example of how to use queryCollectionSearchSections
to create searchable sections from the 'docs' collection:
pages/[...slug].vue
<script>
const { data: surround } = await useAsyncData('foo-surround', () => {
return queryCollectionSearchSections('docs', {
ignoredTags: ['code']
})
})
</script>
Server Usage
Nuxt Content provides a similar utility to query collections on the server side. The only difference is that you need to pass event
as the first argument to the queryCollectionSearchSections
function.
server/api/search-sections.ts
export default eventHandler(async (event) => {
const sections = await queryCollectionSearchSections(event, 'docs')
return sections
})
Make sure to create
server/tsconfig.json
file with the following content to avoid type error.{
"extends": "../.nuxt/tsconfig.server.json"
}