Best Practices: Integrating @nuxt/content and @nuxtjs/i18n

[WuChenDi]

Hello @farnabaz , I apologize for the intrusion.

Lately, I've noticed many people have questions regarding the integration of @nuxt/content and @nuxtjs/i18n. The official documentation lacks detailed guidance on this matter.

Therefore, I would like to ask if you could assist in writing a best practice guide. Ideally, it could be added to the project's examples directory.

[ineshbose]

Hey, I can't say about best practice but I had a solution like this that is still working well for me.

nuxt-modules/i18n#1872 (comment)

[iBobik]

This is what I use for collection where I want to have langcode in the filename:

const { data: products } = await useAsyncData('products', () => {
  return queryCollection('products').where('stem', 'LIKE', '%.' + locale.value).all()
})

Feature request

It would be nice if the module would support this convention, maybe as a configuration on the collection like this:

  products: defineCollection({
    type: 'page',
    source: 'products/*.md',
    schema: z.object({
      image: z.string(),
    }),
    localeStrategy: 'filename_suffix',
  }),

Then the parsed stem field will not include the langcode and there will be added locale field on the entity.

[shidaizaiweixiao]

i am a new to nuxt content3, could you teach me how to update blog in production environment

[thorge]

Same here. Previously I used queryContent. Since migrating to queryCollection I have some trouble to make my logic work. See below:

<template>
  <Cemetery v-if="data" :data="data.meta" />
</template>
<script setup>
import Cemetery from '~/components/Cemetery.vue';

const { locale, defaultLocale } = useI18n();
const route = useRoute();

const { data } = await useAsyncData(route.path, () => {
  return queryCollection('cemeteries').where('slug', '=', route.path).first()
})

// Below commented out code is not working anymore

// if (!data) {
//   throw createError({
//     statusCode: 404,
//     statusMessage: "Page Not Found",
//   });
// }

// const setI18nParams = useSetI18nParams()
// setI18nParams({
//   en: { slug: data.localeSlugs.en },
//   de: { slug: data.localeSlugs.de }
// })

// useContentHead(data);

</script>

[adrianrudnik]

@thorge Seems like data is a ref or something similar, it should work with something like

if (!data.value) {
    throw createError({statusCode: 404})
}

[thorge]

I also tried data.value but this is always null. I guess this is because I use useAsyncData. If I don't use it, I don't need to use value, and the code works.