---
title: "queryCollectionSearchSections"
description: "The queryCollectionSearchSections composable generates searchable sections from a collection for enhanced content discovery."
canonical_url: "https://content.nuxt.com/docs/utils/query-collection-search-sections"
---
# queryCollectionSearchSections

> The queryCollectionSearchSections composable generates searchable sections from a collection for enhanced content discovery.

## 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.

```vue [app.vue]
<script>
const { data: sections } = await useAsyncData('search-sections', () => {
  return queryCollectionSearchSections('docs')
})
</script>
```

<tip>

The `queryCollectionSearchSections` utility is available in both Vue and Nitro. Checkout [Server Usage](#server-usage) for more details on how to use it on the server side.

</tip>

## Type

```ts
function queryCollectionSearchSections<T extends keyof PageCollections>(collection: T, opts?: { ignoredTags?: string[], minHeading?: string, maxHeading?: string, extraFields?: Array<keyof PageCollections[T]> }): 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>
}
```

## 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.
    - `minHeading`: Minimum heading level to split on (e.g., `'h2'`). Default is `'h1'`.
    - `maxHeading`: Maximum heading level to split on (e.g., `'h3'`). Default is `'h6'`.
    - `extraFields`: An array of additional fields from the collection items to include in the section objects.
- 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:

```vue [pages/[...slug].vue]
<script>
const { data: surround } = await useAsyncData('foo-surround', () => {
  return queryCollectionSearchSections('docs', {
    ignoredTags: ['code'],
    minHeading: 'h2',
    maxHeading: 'h3',
    extraFields: ['author', 'date'],
  })
})
</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.

```ts [server/api/search-sections.ts]
export default eventHandler(async (event) => {
  const sections = await queryCollectionSearchSections(event, 'docs')
  return sections
})
```

<note>

Make sure to create `server/tsconfig.json` file with the following content to avoid type error.

```json
{
  "extends": "../.nuxt/tsconfig.server.json"
}
```

</note>


## Sitemap

See the full [sitemap](https://content.nuxt.com/sitemap.md) for all pages.