i18n - How I'm supposed to get the correct page linked to correct locale ?

[Pamavoc]

Environment

Classic nuxt 3 project with this as nuxt.config :

modules: ["@nuxt/content", "@nuxtjs/i18n", '@nuxt/devtools'],
  content: {
    locales:[
      'en', 'fr'
    ],
    defaultLocale: 'fr'
  },
  i18n: { 
    strategy: 'prefix',
    defaultLocale: 'fr',
    baseUrl: process.env.BASE_URL || 'https://localhost:3000',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',  // recommended
    },
    locales: [
      {
        code: 'en',
        iso: 'en-US'
      },
      {
        code: 'fr',
        iso: 'fr-FR'
      }
    ]
  }

This is the content folder :

Reproduction

Use a catchall page [...slug].vue in the pages directory with the same structure as me & same nuxt config

Try to fetch all pages :

const data = await queryContent().where({ _locale: locale.value }).find() 
console.log(data)

You'll get this :

But when you will use :

const { path } = useRoute()
const { locale } = useI18n()
const data = await queryContent().where({ _locale: locale.value, _path: path }).findOne()
console.log(data)

You will normally get this :

Describe the bug

where query parameter is maybe broken with multi lang. It won't fetch the correct page but will fetch correctly multiples pages in the folder.

I believe it is not linked to the module i18n.

Additional context

No response

Logs

No response

[farnabaz]

What is the value of path? Note that you should remove locale from path before passing it to queryContent.

Also do you ming creating a simple reproduction using Content Starter?

[learntheropes]

@Pamavoc I had some issues as well.
This works for me:

<template>
  <NuxtLayout>
    <h1>{{ data.title }}</h1>
    <div>{{ data.description }}</div>
    <ContentRenderer :key="data._id" :value="data.body">
      <ContentRendererMarkdown :value="data" />
    </ContentRenderer>
  </NuxtLayout>
</template>

<script setup>
const { locale: { value: localCode }} = useI18n()
const { data } = await useAsyncData(`/${localCode}`, () => queryContent(`/`).where({ _locale: localCode }).findOne())
</script>

But I'm not sure is the most elegant solution.

[CharlesBT]

Thanks for your insights, after a few try, I think I got it right working also with hierachy /locale/../.../page.md

<script setup lang="ts">
import type { ParsedContent } from "@nuxt/content/dist/runtime/types";

const {
  params: { slug },
} = useRoute();
const { locale } = useI18n();

function redirect404() {
  const router = useRouter();
  router.push("/404");
}

interface ContentError extends Error {
  statusCode: number;
}

const { data, pending, error, refresh } = await useAsyncData<
  ParsedContent,
  ContentError
>(`nuxt-content:${useRoute().fullPath}`, () =>
  queryContent("/")
    .where({ _locale: locale.value, _path: `/${(slug as string[]).join("/")}` })
    .findOne()
);

if (error.value && error.value.statusCode === 404) {
  redirect404();
}
</script>

<template>
  <pre>
    {{ data }}
  </pre>

  <main v-if="data">
    <ContentRenderer v-if="data" :value="data" />
  </main>
</template>

[kamding957]

@Pamavoc I had some issues as well. This works for me:

{{ data.title }}

{{ data.description }}

<script setup> const { locale: { value: localCode }} = useI18n() const { data } = await useAsyncData(`/${localCode}`, () => queryContent(`/`).where({ _locale: localCode }).findOne()) </script>

But I'm not sure is the most elegant solution.

Unfortunately, this approach doesn't work for me.

[farnabaz]

@kamding957 Could you provide a reproduction?

[Jones-S]

I am also struggling to fetch the right content.
In your examples you always make use of where.

How does this work?
Is it because inside your .md files you have fields like _locale or where is that locale coming from?

Or do I have to defined each language as a collection and then search within that lang collection?

[adrianrudnik]

I also struggled hard with this, I really would've loved a single working out-of-the-box solution for this.

A workaround I did for myself is to establish a hook that reformats everything so I can easily have a structure like

/pages/about-us.de.md => /de/pages/about-us
/pages/about-us.en.md => /en/pages/about-us
/pages/contact/index.de.md => /de/pages/contact
/pages/contact/index.en.md => /en/pages/contact

but keep all the magical wizards flying around somewhat working, there is so much stuff that just "breaks"" along the road, esp. once you get to the more advanced topics like queryCollectionNavigation and queryCollectionSearchSections and proper routing/navigation.

Not going to dump my whole stupid approach here, but just to give you a hint on how to make it your own:

Have a locale within your content schema

export default defineContentConfig({
  collections: {
    news: defineCollection({
      source: 'news/**/*.md',
      type: 'page',
      schema: z.object({
          _locale: z.string(),
          // ...
      })
    }),
  }
})

Create your own hook and prepare the information you want to work with within nuxt.config.ts:

  hooks: {
    'content:file:afterParse'(ctx: FileAfterParseHook) {
        // just to print the object you can work with, it will be printed on the node console
        // once a content file gets "changed"
        console.log(ctx.content)

        // unchecked code that tries to extract the locale from the content path you have
        const parts = ctx.content.path.split('/')
        const locale = parts[1]

        // reinject the new stuff back into the content
        // make sure that the field is defined within the collection, or the value will not be saved
        ctx.content._lcoale = locale
    }
  },

I would not recommend to fiddle with the ctx.content.path if the locale is part of your content folder structure.

After that, you should be able to query specific locale content like

const {locale} = useI18n()
const page = await useAsyncData(
    'news-list-' + locale.value,
    () => queryCollection('news').where('_locale_', '=', locale.value).first()
)

or even build a helper that queries all pages and delivers you a matching (or if available) a fallback page, where only the locale mismatches.