🌿 Nuxt.js Intermediate

How do you implement internationalization (i18n) in Nuxt.js?

Answer

Internationalization in Nuxt.js is best handled with the @nuxtjs/i18n module, which integrates vue-i18n with Nuxt's routing system. After installing, you configure it in nuxt.config.ts with the supported locales and default locale. Translation strings are stored in JSON or YAML files in a locales/ directory. The module automatically prefixes routes with locale codes (e.g., /en/about, /fr/about). Composables like useI18n() provide t() for translations and locale for the current language. Lazy-loading of locale files prevents loading all translations upfront. SEO is handled via hreflang link tags generated automatically.