Skip to content
Tom Jamon
All posts
Nuxt JSLaravel

Internationalization (i18n) with Nuxt 3: A Step-by-Step Guide

By Tom Jamon3 min read

Internationalization (i18n) is essential for web applications targeting a multilingual audience. Nuxt 3, with its advanced features, makes integrating i18n simple and effective. This article guides you through setting up i18n in a Nuxt 3 project using specific configurations and route and language files.

Prerequisites

Install Nuxt 3 and the i18n module using npm:

npm install nuxt@latest @nuxtjs/i18n

Basic Configuration

We will configure our Nuxt 3 project to support multiple languages by editing the nuxt.config.ts file. Here’s how to set up the i18n module:

Step 1: Import Routes

Create a routes.json file at the root of your project. This file will define your routes for each language. Example:

{
    "about": {
        "en": "/about",
        "fr": "/a-propos",
        "es": "/acerca-de"
    },
    "contact": {
        "en": "/contact",
        "fr": "/contact",
        "es": "/contacto"
    }
}

Step 2: Update nuxt.config.ts

Edit your nuxt.config.ts file to include i18n configurations. Example:

import routes from './routes.json'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    locales: [
      { code: 'en', label: 'English', iso: 'en-US', file: 'en.json' },
      { code: 'fr', label: 'Français', iso: 'fr-FR', file: 'fr.json' },
      { code: 'es', label: 'Español', iso: 'es-ES', file: 'es.json' },
    ],
    defaultLocale: 'fr',
    strategy: 'prefix_except_default',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected_' + process.env.NODE_ENV,
      alwaysRedirect: true,
      fallbackLocale: 'fr',
    },
    langDir: 'lang/',
    lazy: true,
    pages: routes,
    customRoutes: 'config',
  }
})

Configuration Explanation

  • locales: Defines the supported languages.
  • defaultLocale: Sets the default language.
  • strategy: Uses prefix_except_default to prefix routes with language codes, except for the default language.
  • detectBrowserLanguage: Detects the user’s browser language and uses cookies to store preferences.
  • langDir: Specifies the directory for language files.
  • lazy: Enables lazy loading of language files.
  • pages: Uses routes defined in routes.json.
  • customRoutes: Allows flexible custom route management.

Creating Language Files

For each language, create a JSON file in the lang/ directory. Example for French (lang/fr.json):

{
  "welcome": "Bienvenue",
  "about": "À propos de nous",
  "contact": "Contactez-nous"
}

Repeat for en.json and es.json, translating keys accordingly.

Using Translations in Components

Use translations in components with the <nuxt-link> component and the $t method. Example:

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <NuxtLinkLocale to="about">{{ $t('about') }}r</NuxtLinkLocale>
  </div>
</template>

Browser Language Detection

The detectBrowserLanguage configuration automatically detects the user’s browser language and redirects to the appropriate version of your site. It ensures a consistent user experience by storing language preferences in cookies.

Managing Custom Routes

Grâce à la configuration customRoutes, vous pouvez définir des routes spécifiques pour chaque langue dans votre fichier routes.json. Cela permet une gestion plus flexible et granulaire des chemins de votre application. With the customRoutes configuration, you can define language-specific routes in routes.json, allowing granular control of your application’s paths.

Conclusion

Internationalization is a crucial step for making your application accessible to a global audience. Nuxt 3 and the @nuxtjs/i18n module simplify and streamline the i18n setup. By following this guide, you can configure your project to support multiple languages and deliver a seamless localized user experience.

Nuxt 3’s flexibility, combined with i18n’s robust features, makes it easy to manage translations, language detection, and redirections. Now you’re ready to make your Nuxt 3 app multilingual and reach a broader audience.

For more details and advanced configurations, consult the official Nuxt i18n documentation. Happy coding!

Share this post