N
Nuxt•7d ago
Mike

content i18n

Nuxt Content vs i18n! Hola amigos! 🙂 I am on the nuxt content3 and I want to pull a document from dir content/es at the url '/es/docs' when I change locale to 'es'. url for 'en' is simply '/docs', but how do i pull the right document for the locale? config: 
docs: defineCollection({
    type: 'page',
    source: '1.docs/**/*',
    schema: z.object({
      title: z.string().nonempty(),
      description: z.string().nonempty()
    })
  })
docs: defineCollection({
    type: 'page',
    source: '1.docs/**/*',
    schema: z.object({
      title: z.string().nonempty(),
      description: z.string().nonempty()
    })
  })
slug page: 
const { data: page } = await useAsyncData(route.path, async () => {
    let content = await queryCollection('docs')
      .where('path', 'LIKE', route.path)
      .first()

    if (!content) {
      console.warn(
        `No content found for ${route.path}, falling back to navigation.`
      )
      content = await queryCollection('docs').path(route.path).first()
    }

    return content
  })
const { data: page } = await useAsyncData(route.path, async () => {
    let content = await queryCollection('docs')
      .where('path', 'LIKE', route.path)
      .first()

    if (!content) {
      console.warn(
        `No content found for ${route.path}, falling back to navigation.`
      )
      content = await queryCollection('docs').path(route.path).first()
    }

    return content
  })
5 Replies
kapa.ai
kapa.ai•7d ago
Hi @mikestoys. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- ¡Hola! Para manejar contenido multilingüe con Nuxt Content v3, necesitas adaptar tu configuración y la forma en que consultas los documentos según el idioma actual. En Nuxt Content v3, no hay una integración directa con i18n como tal, pero puedes estructurar tus colecciones y consultas para soportar múltiples idiomas. Hay varias formas de abordar esto: Opción 1: Usar prefijos de ruta en la configuración de colecciones Puedes modificar tu configuración de colecciones para incluir el prefijo de idioma: 
docs: defineCollection({
  type: 'page',
  source: {
    include: '1.docs/**/*',
    // Añadir un prefijo a las rutas
    prefix: `/${locale}`
  },
  schema: z.object({
    title: z.string().nonempty(),
    description: z.string().nonempty()
  })
})
docs: defineCollection({
  type: 'page',
  source: {
    include: '1.docs/**/*',
    // Añadir un prefijo a las rutas
    prefix: `/${locale}`
  },
  schema: z.object({
    title: z.string().nonempty(),
    description: z.string().nonempty()
  })
})
Sin embargo, esto requeriría definir colecciones dinámicamente según el idioma actual. Opción 2: Modificar tu consulta para incluir el idioma Una solución más práctica sería modificar tu consulta para buscar el documento correcto basado en el idioma actual: 
const { locale } = useI18n() // Asumiendo que estás usando @nuxtjs/i18n
const { data: page } = await useAsyncData(route.path, async () => {
  // Construir la ruta basada en el idioma actual
  const localePath = locale.value === 'en' 
    ? route.path 
    : route.path.replace(/^\/docs/, `/${locale.value}/docs`)
  
  let content = await queryCollection('docs')
    .where('path', 'LIKE', localePath)
    .first()

  if (!content) {
    console.warn(
      `No content found for ${localePath}, falling back to navigation.`
    )
    content = await queryCollection('docs').path(localePath).first()
  }

  return content
})
const { locale } = useI18n() // Asumiendo que estás usando @nuxtjs/i18n
const { data: page } = await useAsyncData(route.path, async () => {
  // Construir la ruta basada en el idioma actual
  const localePath = locale.value === 'en' 
    ? route.path 
    : route.path.replace(/^\/docs/, `/${locale.value}/docs`)
  
  let content = await queryCollection('docs')
    .where('path', 'LIKE', localePath)
    .first()

  if (!content) {
    console.warn(
      `No content found for ${localePath}, falling back to navigation.`
    )
    content = await queryCollection('docs').path(localePath).first()
  }

  return content
})
Opción 3: Estructura de archivos por idioma Otra opción es estructurar tus archivos de contenido por idioma y definir colecciones separadas: 
// content.config.ts
export default defineContentConfig({
  collections: {
    'docs-en': defineCollection({
      type: 'page',
      source: '1.docs/en/**/*',
      schema: z.object({
        title: z.string().nonempty(),
        description: z.string().nonempty()
      })
    }),
    'docs-es': defineCollection({
      type: 'page',
      source: '1.docs/es/**/*',
      schema: z.object({
        title: z.string().nonempty(),
        description: z.string().nonempty()
      })
    })
  }
})
// content.config.ts
export default defineContentConfig({
  collections: {
    'docs-en': defineCollection({
      type: 'page',
      source: '1.docs/en/**/*',
      schema: z.object({
        title: z.string().nonempty(),
        description: z.string().nonempty()
      })
    }),
    'docs-es': defineCollection({
      type: 'page',
      source: '1.docs/es/**/*',
      schema: z.object({
        title: z.string().nonempty(),
        description: z.string().nonempty()
      })
    })
  }
})
Y luego en tu página: 
const { locale } = useI18n()
const collectionName = `docs-${locale.value}`
const { data: page } = await useAsyncData(route.path, async () => {
  // Ajustar la ruta para quitar el prefijo de idioma si existe
  const pathWithoutLocale = locale.value === 'en' 
    ? route.path 
    : route.path.replace(new RegExp(`^/${locale.value}`), '')
  
  let content = await queryCollection(collectionName)
    .where('path', 'LIKE', pathWithoutLocale)
    .first()

  if (!content) {
    console.warn(
      `No content found for ${pathWithoutLocale} in ${collectionName}, falling back.`
    )
    content = await queryCollection(collectionName).path(pathWithoutLocale).first()
  }

  return content
})
const { locale } = useI18n()
const collectionName = `docs-${locale.value}`
const { data: page } = await useAsyncData(route.path, async () => {
  // Ajustar la ruta para quitar el prefijo de idioma si existe
  const pathWithoutLocale = locale.value === 'en' 
    ? route.path 
    : route.path.replace(new RegExp(`^/${locale.value}`), '')
  
  let content = await queryCollection(collectionName)
    .where('path', 'LIKE', pathWithoutLocale)
    .first()

  if (!content) {
    console.warn(
      `No content found for ${pathWithoutLocale} in ${collectionName}, falling back.`
    )
    content = await queryCollection(collectionName).path(pathWithoutLocale).first()
  }

  return content
})
Esta implementación de Document Driven Mode con i18n es similar a lo que se describe en la documentación para implementar Document Driven Mode en v3, pero adaptada para manejar múltiples idiomas. Recuerda que necesitarás ajustar estas soluciones según la estructura exacta de tu proyecto y cómo estés implementando i18n en tu aplicación Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•7d ago
<@657584859052638218> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
HugoRCD
HugoRCD•7d ago
@mikestoys You can have a look at this repo if you like, which is one of the Nuxt Content templates in which intertionalization has been well managed! https://github.com/HugoRCD/canvas
GitHub
GitHub - HugoRCD/canvas: Portfolio template made with Nuxt 3, Nuxt ...
Portfolio template made with Nuxt 3, Nuxt Content v3, NuxtUI v3 and TailwindCSS v4 - HugoRCD/canvas
Mike
MikeOP•5d ago
Thanks @HugoRCD , I managed to translate some pages but for nested content files i.e. docs or blog I will go for a speperate PR. Here is the repo https://github.com/michaelwybraniec/yogamos
GitHub
GitHub - michaelwybraniec/yogamos: Yoga delivery to the world.
Yoga delivery to the world. Contribute to michaelwybraniec/yogamos development by creating an account on GitHub.
Mike
MikeOP•5d ago
https://www.yogamos.es/
Yogamos
YOGAMOS? - Yoga for Mind & Body
YOGAMOS? is a sanctuary for yoga practitioners of all levels. Connect with a supportive community, access guided yoga sessions, and cultivate mindfulness through movement.

Did you find this page helpful?