#content i18n

1 messages · Page 1 of 1 (latest)

soft sequoia
#

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()
    })
  })

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
  })
hollow frigateBOT
#

Hi @soft sequoia. 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()
  })
})

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
})

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()
      })
    })
  }
})

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
})

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:

#

@soft sequoia Kapa.ai is still learning and improving, please let me know how I did by reacting below.

reef cosmos
soft sequoia