Aller au contenu
Tom Jamon
Tous les articles
Nuxt JSLaravel

Mise en place de l'internationalisation (i18n) dans un projet Nuxt 3

Par Tom Jamon3 min de lecture

L'internationalisation (i18n) est essentielle pour les applications web visant une audience multilingue. Nuxt 3, avec ses fonctionnalités avancées, rend l'intégration d'i18n simple et efficace. Cet article vous guide à travers la mise en place d'i18n dans un projet Nuxt 3, en utilisant des configurations spécifiques et des fichiers de routes et de langues.

Prérequis

Vous pouvez installer Nuxt 3 et le module i18n en utilisant npm :

npm install nuxt@latest @nuxtjs/i18n

Configuration de base

Nous allons configurer notre projet Nuxt 3 pour supporter plusieurs langues en modifiant le fichier nuxt.config.ts. Voici comment configurer le module i18n :

Étape 1 : Importer les routes

Créez un fichier routes.json à la racine de votre projet. Ce fichier contiendra les définitions de vos routes spécifiques à chaque langue. Voici un exemple de fichier routes.json :

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

Étape 2 : Modifier nuxt.config.ts

Modifiez votre fichier nuxt.config.ts pour inclure la configuration i18n. Voici un exemple de configuration :

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',
  }
})

Explications des configurations

  • locales : Définit les langues supportées par votre application.
  • defaultLocale : Définit la langue par défaut.
  • strategy : Utilise prefix_except_default pour préfixer les routes avec les codes de langue, sauf pour la langue par défaut.
  • detectBrowserLanguage : Configue la détection de la langue du navigateur et l'utilisation des cookies pour stocker les préférences de langue.
  • langDir : Spécifie le répertoire où sont stockés les fichiers de langue.
  • lazy : Active le chargement paresseux des fichiers de langue.
  • pages : Utilise les routes définies dans routes.json.
  • customRoutes : Permet de configurer des routes personnalisées.

Création des fichiers de langue

Pour chaque langue, créez un fichier JSON dans le répertoire lang/. Par exemple, pour le français, créez lang/fr.json :

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

Faites de même pour en.json et es.json en traduisant les clés dans les langues respectives.

Utilisation des traductions dans les composants

Pour utiliser les traductions dans vos composants, utilisez le composant <nuxt-link> et la méthode $t. Par exemple :

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

Détection de la langue du navigateur

La configuration detectBrowserLanguage permet de détecter automatiquement la langue du navigateur de l'utilisateur et de rediriger vers la version appropriée de votre site. Cette configuration utilise des cookies pour stocker la langue préférée de l'utilisateur, assurant ainsi une expérience utilisateur cohérente.

Gestion des routes personnalisées

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.

Conclusion

L'internationalisation est une étape essentielle pour rendre votre application accessible à une audience mondiale. Avec Nuxt 3 et le module @nuxtjs/i18n, la mise en place d'i18n devient simple et efficace. En suivant les étapes décrites dans cet article, vous pouvez configurer votre projet pour supporter plusieurs langues et offrir une expérience utilisateur fluide et locale.

La flexibilité de Nuxt 3 combinée aux puissantes fonctionnalités d'i18n vous permet de gérer facilement les traductions, les détections de langue et les redirections. Maintenant, vous êtes prêt à rendre votre application Nuxt 3 multilingue et à atteindre un public plus large.

N'hésitez pas à consulter la documentation officielle de Nuxt i18n pour plus de détails et de configurations avancées. Bon codage !

Partager cet article