How to extend Nuxt I18n translations?

[caiotarifa]

Description

I recently updated to the v3, which now uses Nuxt I18n for its own component translations. Since this update, my existing i18n configuration no longer works as expected. It seems the framework’s new i18n setup conflicts with or overrides my own translations, and I’m unable to figure out how to properly extend its default localization to include my own.

Could you please provide guidance on how to configure or extend the new i18n setup so that my existing translations remain functional?

[benjamincanac]

Have you checked https://ui3.nuxt.dev/getting-started/i18n/nuxt?

[caiotarifa]

Have you checked https://ui3.nuxt.dev/getting-started/i18n/nuxt?

Yes. I had a bit of trouble understanding how to "extend" a language to add new messages or modify an existing message.

@benjamincanac, another thing I had difficulty with is related to this section described in the documentation.

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()

const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir
  }
})
</script>

<template>
  <UApp :locale="locales[locale]">
    <NuxtPage />
  </UApp>
</template>

This doesn't work with languages ​​that contain the country in the code, as the translation file is non-standard, pt_br instead of pt-BR.

To get around this, I'm using the code below, but I don't know if it's recommended.

<script setup>
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()

const currentLocale = computed(() =>
  Object.values(locales).find(item => item.code === locale.value)
)
</script>

<template>
  <UApp :locale="currentLocale">
    <NuxtPage />
  </UApp>
</template>

[benjamincanac]

Why do you want to extend a language? This i18n system is only there to translate the internals of the Nuxt UI components. If you want to translate your app, you can use Nuxt i18n and define your own locales.