Internationalisation (i18n) avec Nuxt

Pourquoi Internationalisation (i18n) avec Nuxt ?

L'internationalisation, souvent notée i18n, est un processus essentiel dans le développement de sites web et d'applications modernes. Elle permet à l'application de fonctionner correctement pour les utilisateurs dans différents pays et régions en prenant en compte leurs langues, fuseaux horaires, formats numériques et autres spécificités culturelles.

Imaginez un site e-commerce populaire qui doit être disponible en français, en anglais et en espagnol. Chaque langue a ses propres conventions de formatage (par exemple, les séparateurs de milliers varient entre 1,000 et 1.000) et des traductions spécifiques pour chaque produit et service. Sans une gestion appropriée de l'internationalisation, le site pourrait afficher des chiffres erronés ou des traductions inexactes, ce qui entraînerait une mauvaise expérience utilisateur.

Un cas d'usage concret est un site de réservation en ligne qui doit afficher les dates et heures dans le fuseau horaire approprié pour chaque utilisateur. Si le site n'est pas correctement internationalisé, les utilisateurs pourraient voir des disponibilités erronées ou des horaires imprécis.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin de :

• Un environnement de développement Node.js (v14.x ou plus récent)
• Nuxt CLI (v2.0 ou plus récent)
• Un éditeur de code (VSCode recommandé)

Installez Nuxt CLI globalement sur votre système :

npm install -g @nuxt/cli

Concepts fondamentaux

1. Locale et Langue

La locale est une combinaison de langue et de région, comme en-US pour l'anglais aux États-Unis ou fr-CA pour le français au Canada.

Schéma mental :

Locale = Language + Region

2. Messages

Les messages sont les chaînes de caractères qui seront traduites et affichées à l'utilisateur. Ils sont stockés dans des fichiers JSON séparés par locale.

Exemple de fichier en.json :

{
  "greeting": "Hello",
  "welcome_message": "Welcome to our site"
}

3. Plugin i18n

Le plugin i18n est le cœur de l'internationalisation dans Nuxt. Il charge automatiquement les fichiers de messages et gère la traduction des chaînes.

Schéma mental :

Plugin i18n = Configuration + Fichiers de messages

4. Composants Utilisateurs

Les composants utilisateurs sont des composants Vue.js qui affichent les messages traduits. Ils utilisent le contexte i18n pour récupérer la chaîne appropriée.

Schéma mental :

Composant utilisateur = Contexte i18n + Message traduit

Mise en pratique : projet fil rouge

Étape 1 : Créer un nouveau projet Nuxt

Créez un nouveau projet Nuxt à l'aide de la commande suivante :

npx create-nuxt-app task-manager
cd task-manager

Durant la création du projet, choisissez les options suivantes :

• Project name: task-manager
• Programming language: JavaScript
• Package manager: npm
• UI framework: Bulma (facultatif)
• Nuxt.js modules: Axios, i18n
• Linting tools: ESLint

Étape 2 : Configurer le plugin i18n

Ouvrez le fichier nuxt.config.js et ajoutez la configuration pour le plugin i18n :

export default {
  modules: [
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    vueI18nLoader: true,
    dir: 'locales/'
  }
}

Étape 3 : Créer les fichiers de messages

Créez le répertoire locales à la racine du projet et ajoutez deux fichiers JSON pour chaque langue :

locales/en.json :

{
  "greeting": "Hello",
  "welcome_message": "Welcome to our task manager"
}

locales/fr.json :

{
  "greeting": "Bonjour",
  "welcome_message": "Bienvenue dans votre gestionnaire de tâches"
}

Étape 4 : Créer un composant utilisateur

Créez un nouveau composant Welcome.vue dans le répertoire components :

<template>
  <div>
    <h1>$t('greeting')</h1>
    <p>$t('welcome_message')</p>
  </div>
</template>

<script>
export default {
  name: 'Welcome'
}
</script>

Étape 5 : Afficher le composant dans la page d'accueil

Ouvrez le fichier pages/index.vue et ajoutez le composant Welcome :

<template>
  <div>
    <Welcome />
  </div>
</template>

<script>
import Welcome from '~/components/Welcome.vue'

export default {
  components: {
    Welcome
  }
}
</script>

Étape 6 : Lancer le projet

Exécutez la commande suivante pour lancer le serveur de développement :

npm run dev

Accédez à http://localhost:3000 dans votre navigateur. Vous verrez que le message d'accueil est traduit en fonction de la locale configurée.

Erreurs frequentes et debugging

Erreur 1 : Messages non chargés

Message d'erreur :

i18n error: Message not found for key 'greeting'

Code incorrect :

// task-manager/plugins/i18n.js
export default ({ app }, inject) => {
  app.i18n = new VueI18n({
    locale: process.env.LOCALE || 'en',
    messages: require('~/locales/en.json')
  })
}

Code correct :

// task-manager/plugins/i18n.js
export default ({ app }, inject) => {
  const loadLocaleMessages = () => {
    const locales = require.context('~/locales', true, /[A-Za-z0-9-_]+\.json$/)
    const messages = {}
    locales.keys().forEach(key => {
      const matched = key.match(/([A-Za-z0-9-_]+)\./i)
      if (matched && matched.length > 1) {
        const locale = matched[1]
        messages[locale] = locales(key)
      }
    })
    return messages
  }

  app.i18n = new VueI18n({
    locale: process.env.LOCALE || 'en',
    messages: loadLocaleMessages()
  })
}

Erreur 2 : Contexte i18n non disponible

Message d'erreur :

Cannot read property '$t' of undefined

Code incorrect :

<template>
  <div>
    <h1>greeting</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: this.$t('greeting')
    }
  }
}
</script>

Code correct :

<template>
  <div>
    <h1>$t('greeting')</h1>
  </div>
</template>

<script>
export default {
  name: 'Welcome'
}
</script>

Erreur 3 : Traduction inexacte

Message d'erreur :

La traduction est incorrecte pour la clé 'welcome_message'

Code incorrect :

// locales/en.json
{
  "welcome_message": "Welcome to our site"
}

Code correct :

// locales/en.json
{
  "welcome_message": "Welcome to our task manager"
}

Pour aller plus loin

1. Utiliser des traductions dynamiques

Vous pouvez utiliser des expressions pour créer des chaînes de caractères dynamiques :

<template>
  <div>
    <h1>{{ $t('greeting', { name: 'John' }) }}</h1>
    <p>{{ $t('welcome_message', { siteName: 'Task Manager' }) }}</p>
  </div>
</template>

<script>
export default {
  name: 'Welcome'
}
</script>

2. Gérer les messages de base et spéciaux

Vous pouvez créer des fichiers en.json et fr.json pour les messages de base, puis des fichiers supplémentaires pour les messages spéciaux :

locales/en/messages.json :

{
  "greeting": "Hello"
}

locales/fr/messages.json :

{
  "greeting": "Bonjour"
}

3. Utiliser des hooks pour gérer la locale

Vous pouvez utiliser des hooks pour gérer la locale en fonction de la langue du navigateur :

// plugins/i18n.js
export default ({ app }, inject) => {
  const loadLocaleMessages = () => {
    // ... (code pour charger les messages)
  }

  app.i18n = new VueI18n({
    locale: process.env.LOCALE || 'en',
    messages: loadLocaleMessages()
  })

  if (process.client) {
    window.addEventListener('load', () => {
      const userLanguage = navigator.language.split('-')[0]
      app.i18n.locale = userLanguage
    })
  }
}

Défi pratique

Créez un gestionnaire de tâches simple avec une interface utilisateur en français et en anglais. Les utilisateurs devraient être capables d'ajouter, modifier et supprimer des tâches.

Ressources :

• Nuxt i18n documentation
• Vue Internationalization Guide