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 in content.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"
}