queryCollectionNavigation(collection)

[south garnet]

Hi @rancid bramble. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

If you’re using Nuxt Content v3 with @nuxtjs/i18n, you need to query the navigation for the locale-specific collection name (e.g., content_en, content_fr) and re-fetch when the locale changes.

Key points:

• Build the collection name from the current locale.
• Use queryCollectionNavigation with that collection.
• Add watch: [locale] so it re-runs on locale change.
• If you call useAsyncData in <script setup>, remember that route/locale changes won’t trigger transform unless the fetcher re-runs; make sure your watch target is a ref/computed, not a nested reactive object.

Example:

<script setup lang="ts">
import type { Collections } from '@nuxt/content'
const { locale } = useI18n()

// Computed collection key, e.g. 'content_en'
const collection = computed(() => ('content_' + locale.value) as keyof Collections)

const { data: navigation, status, error, refresh } = await useAsyncData(
  () => 'navigation-' + collection.value, // unique key per locale
  () => queryCollectionNavigation(collection.value),
  {
    watch: [collection], // re-run when locale changes
  }
)
</script>

<template>
  <nav v-if="navigation">
    <ul>
      <li v-for="item in navigation" :key="item.path">
        <NuxtLink :to="item.path">{{ item.title }}</NuxtLink>
        <ul v-if="item.children?.length">
          <li v-for="child in item.children" :key="child.path">
            <NuxtLink :to="child.path">{{ child.title }}</NuxtLink>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

Notes and troubleshooting:

• queryCollectionNavigation returns a navigation tree (with title, path, and children). You can also include extra fields or add filters/order if needed. [queryCollectionNavigation; Examples]
• On the server (e.g., in server/api), pass event as the first argument. [Server usage]
• Ensure you’ve defined separate collections per locale in content.config.ts (content_en, content_fr, …) as shown in the i18n integration docs. [I18n module]
• For breadcrumb/headline/children helpers, you can use utilities like findPageBreadcrumb/findPageChildren on the navigation tree. [Extra utilities]
• If your watch doesn’t trigger: don’t watch a nested property of a reactive object directly; watch a ref/computed (like collection above). [useAsyncData watch] Also, when using route queries/objects, wrap them in a computed before passing to watch. [SO workaround]

If you still see an “object with locale path and filename as keys/values,” that usually means your collections or i18n strategy aren’t aligned. Verify:

• content.config.ts defines one collection per locale that points to the language folder (include: 'en/**', etc.). [I18n module]
• Your i18n strategy (e.g., prefix_except_default) matches your routes and content paths. [I18n module]

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: