queryCollectionItemSurroundings

Type

function queryCollectionItemSurroundings<T extends keyof PageCollections>(collection: T, path: string, opts?: SurroundOptions<keyof PageCollections[T]>): Promise<ContentNavigationItem[]>

Usage

Use the auto-imported queryCollectionItemSurroundings to find the previous and next items relative to a specific content item in a collection. This is particularly useful for creating navigation between related content pages.

<script setup lang="ts">
const { data } = await useAsyncData('surround', () => {
  return queryCollectionItemSurroundings('docs', '/foo')
})
</script>

API

queryCollectionItemSurroundings(collection: CollectionName, path: string, opts?: SurroundOptions)

Find the surrounding items (previous and next) for a specific content item in a collection.

• Parameters:
  • collection: The key of the defined collection in content.config.ts.
  • path: The path of the current content item.
  • opts: (Optional) An object with the following properties:
    • before: (Optional) The number of items to fetch before the current item. Default is 1.
    • after: (Optional) The number of items to fetch after the current item. Default is 1.
    • fields: (Optional) An array of additional fields to include in the surrounding items.
• Returns: A Promise that resolves to an array containing the surrounding items. The array will have the following structure:
  • [previousItem, nextItem] if using default options.
  • [...previousItems, ...nextItems] if using custom before and after values.

Each item in the array is of type ContentNavigationItem or null if there is no item in that position.

Example

Here's an example of how to use queryCollectionItemSurroundings to create a simple navigation between content pages:

<script setup lang="ts">
const { data } = await useAsyncData('surround', () => {
  return queryCollectionItemSurroundings('docs', '/foo', {
    before: 1,
    after: 1,
    fields: ['badge', 'description']
  })
})
</script>