PluginPublic

pleaseai/nuxt-i18n

Nuxt i18n internationalization module for locale routing, lazy-loaded translations, SEO, browser detection, and multi-domain setups. Use when working with @nuxtjs/i18n, locale switching, translated routes, or i18n composables.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

name:: lazy-loading
description:: Lazy-loaded translations, multiple file merging, dynamic API loading, and caching in Nuxt i18n

Lazy Loading Translations

Configure locales with file or files keys. Files go in i18n/locales/ by default.

Basic Usage

export default defineNuxtConfig({
  i18n: {
    locales: [
      { code: 'en', file: 'en.json' },
      { code: 'es', file: 'es.js' },
      { code: 'fr', file: 'fr.ts' }
    ],
    defaultLocale: 'en'
  }
})

TypeScript/JavaScript files can export directly or use defineI18nLocale:

export default defineI18nLocale(async (locale) => {
  return { welcome: 'Bienvenue' }
})

Dynamic Loading from API

export default defineI18nLocale((locale) => {
  return $fetch(`/api/${locale}`)
})

Multiple Files (Dialect/Regional Variants)

Files are loaded in order and merged — later files override earlier ones:

export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'es-AR',
        name: 'Español (Argentina)',
        files: ['es.json', 'es-AR.json'] // es.json loaded first, es-AR.json merges on top
      },
      {
        code: 'es-UY',
        name: 'Español (Uruguay)',
        files: ['es.json', 'es-UY.json']
      }
    ]
  }
})

Per-File Cache Control

i18n: {
  locales: [
    {
      code: 'es-AR',
      files: [
        { path: 'es.js', cache: false },
        { path: 'es-AR.js', cache: false }
      ]
    }
  ]
}

Loading Non-Current Locale Messages

<script setup>
const { loadLocaleMessages, t } = useI18n()
await loadLocaleMessages('nl')

const welcome = computed(() => t('welcome'))
const welcomeDutch = computed(() => t('welcome', 1, { locale: 'nl' }))
</script>