Navigation content returns default language instead of specified language

[jxk-developer]

Environment

---

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.10.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, modules, extends, app, runtimeConfig, router, routeRules, content, imports, pinia, site, sitemap, robots, i18n, vite
• Runtime Modules: @nuxtjs/sitemap@5.1.0, nuxt-simple-robots@4.0.0-rc.14, @pinia/nuxt@0.5.1, @nuxt/content@2.12.0
• Build Modules: -

---

Reproduction

Vue component file: [...slug].vue

Code snippet attempting to fetch French navigation content:

const { data: navigation } = await useAsyncData('nav', () =>
  fetchContentNavigation({ locale: 'fr' })
);

Expected Outcome: The navigation data should be in French.
Actual Outcome: The navigation data is returned in the default language (English).

Link to reproduce: https://stackblitz.com/edit/nuxt-starter-aww5hu?file=pages%2F%5B...slug%5D.vue

Describe the bug

Configuration

• File: nuxt.config.ts
• Relevant Configuration:

  content: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  }

Problem Description

When attempting to fetch navigation content in the French language from a Vue component, the expected result should be content returned in French (fr). However, the content is being returned in the default language (English) instead of the specified French language.

Additional context

It would be greatly appreciated if you could provide documentation on integrating @nuxt/i18n with @nuxt/content. This guidance would be invaluable for developers looking to leverage both modules effectively in their projects.

Logs

No response

[deetz99]

Try this:

const { locale } = useI18n()

const { data: navigation } = await useAsyncData(
  'navigation',
  () => fetchContentNavigation(
    queryContent()
      .where({ _locale: locale.value })
  ), {
    watch: [locale]
  })