Vue Utils

queryCollectionSearchSections

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

Type

function queryCollectionSearchSections(collection: keyof Collections, opts?: { ignoredTags: string[] }): Promise<Section[]>

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>

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>

queryCollectionItemSurroundings

The queryCollectionItemSurroundings composable looks for sibling contents of an specific path.

ContentRenderer

Takes your component from an AST to a wonderful template.