Languages and words

The sign-in pages, the account page, the admin dashboard and the default emails come in English and Spanish:

export default defineNuxtConfig({
  betterAuthUi: {
    locale: 'es'
  }
})

With @nuxtjs/i18n

When your app uses @nuxtjs/i18n, the pages follow its current language as visitors switch it, when it's one the module has. locale then only sets the default emails' language.

Your own words

messages replaces any of the module's words, per language and key. For example, to call organizations "teams":

export default defineNuxtConfig({
  betterAuthUi: {
    messages: {
      en: {
        'account.tabs.organizations': 'Teams',
        'signIn.title': 'Log in',
        'errors.USER_NOT_FOUND': 'No such user.'
      }
    }
  }
})

The keys are the module's message keys, in its auth.en.ts and admin.en.ts. The admin's start with admin., and errors are errors.<CODE>.

Adding a language

Give the words for a language, and set it as the locale. English fills in any keys you leave out:

export default defineNuxtConfig({
  betterAuthUi: {
    messages: {
      fr: {
        'signIn.title': 'Connexion',
        'signIn.submit': 'Se connecter'
      }
    },
    locale: 'fr'
  }
})

Errors

Better Auth's errors ("Invalid email or password", "Username is already taken", …) are shown in the page's language, by their error code. Codes the module doesn't know show Better Auth's own message. The module's own routes give their errors codes too (USER_NOT_FOUND), so admin messages are translated the same way, and you can reword any of them with errors.<CODE>.

Everything else

• Numbers and dates, like the home page's chart, follow the page's language.
• Nuxt UI's own labels, like a password field's "Show password", follow <UApp :locale>, as usual for Nuxt UI. Pass it the same language from @nuxt/ui/locale:

<script setup lang="ts">
import { es } from '@nuxt/ui/locale'
</script>

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