N
Nuxt•2mo ago
David

Get the category of surroundings

Hey everyone 👋 I’m using Nuxt Content v3, and I have a question about getting the category (or parent folder) of a document when using queryCollectionItemSurroundings(). My current code looks like this: 
const { data: surroundings } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('docs', route.path)
})
const { data: surroundings } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('docs', route.path)
})
This gives me the previous and next documents, but I’d like to also show their category — for example, the folder name under /content/docs/, like guide or api.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @David. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To display the category (i.e., the parent folder name under /content/docs/, such as guide or api) for the previous and next documents returned by queryCollectionItemSurroundings, you can use the findPageHeadline utility from @nuxt/content/utils. This function extracts the parent folder name (headline) for a given path within a navigation tree. Here's how you can do it: 1. Fetch the navigation tree for your collection using queryCollectionNavigation. 2. Use findPageHeadline to get the parent folder (category) for each surrounding item. Example: 
<script setup lang="ts">
const route = useRoute()

// Fetch surroundings and navigation tree in parallel
const { data } = await useAsyncData(route.path, () =>
  Promise.all([
    queryCollectionItemSurroundings('docs', route.path),
    queryCollectionNavigation('docs')
  ]),
  {
    transform: ([surroundings, navigation]) => ({ surroundings, navigation }),
  }
)

import { findPageHeadline } from '@nuxt/content/utils'

const prevCategory = computed(() =>
  data.value?.surroundings?.[0]
    ? findPageHeadline(data.value.navigation, data.value.surroundings[0].path)
    : null
)
const nextCategory = computed(() =>
  data.value?.surroundings?.[1]
    ? findPageHeadline(data.value.navigation, data.value.surroundings[1].path)
    : null
)
</script>
<script setup lang="ts">
const route = useRoute()

// Fetch surroundings and navigation tree in parallel
const { data } = await useAsyncData(route.path, () =>
  Promise.all([
    queryCollectionItemSurroundings('docs', route.path),
    queryCollectionNavigation('docs')
  ]),
  {
    transform: ([surroundings, navigation]) => ({ surroundings, navigation }),
  }
)

import { findPageHeadline } from '@nuxt/content/utils'

const prevCategory = computed(() =>
  data.value?.surroundings?.[0]
    ? findPageHeadline(data.value.navigation, data.value.surroundings[0].path)
    : null
)
const nextCategory = computed(() =>
  data.value?.surroundings?.[1]
    ? findPageHeadline(data.value.navigation, data.value.surroundings[1].path)
    : null
)
</script>
You can then display prevCategory and nextCategory alongside your navigation links. References:
- Extra utilities to work with navigation - queryCollectionItemSurroundings usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@556083802628161546> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?