i18n

Ajouter la configuration i18n

Tout d'abord, vous devez ajouter la configuration i18n à votre projet Nuxt.js. Ouvrez votre fichier nuxt.config.ts et ajoutez la configuration suivante :

export default defineNuxtConfig({
  // Autres configurations nuxt...
  i18n: {
    defaultLocale: 'en',
    locales: [
      {
        code: 'en',
        name: 'English',
        language: 'en-US',
      },
      {
        code: 'xx', // code de langue à 2 lettres (e.g. 'fr')
        name: 'Xxxxx', // nom de la langue (e.g. 'Français')
        language: 'xx-XX', // code ISO de la langue (e.g. 'fr-FR')
      },
    ],
  },
});

Organiser vos fichiers de contenu

Pour prendre en charge plusieurs langues, vous devez organiser vos fichiers de contenu selon une structure de répertoire spécifique. Suivez cette arborescence de fichiers :

• Le répertoire content contient vos fichiers de contenu dans la langue par défaut.
• Le répertoire xx à l'intérieur de content contient les traductions de vos fichiers de contenu, xx étant le code de la langue (par exemple, fr/index.md pour le français).

Créer i18n/i18n.config.ts

Ensuite, créez un nouveau fichier nommé i18n/i18n.config.ts. Ce fichier contiendra la configuration de vos messages i18n à traduire. Ajoutez le code suivant au fichier :

import { defineI18nConfig } from '@nuxtjs/i18n';

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Ajoutez ici toutes les chaînes anglaises définies dans app.config.ts, par exemple les titres dans header.nav ou toc.title
      // Les chaînes d'interface utilisateur par défaut sont déjà traduites prêtes à l'emploi

      shiki: 'shiki', // par exemple : titre du site
    },
    xx: {
      // Ajoutez ici toutes les traductions

      shiki: '式', // par exemple : titre du site
    },
  },
}));

Traduction de l'interface utilisateur

La langue de l'interface utilisateur suivra la langue sélectionnée dans le sélecteur de langue. Les traductions d'interface sont fournies prêtes à l'emploi pour les langues suivantes :

• en (English)
• fr (Français)
• zh-CN (简体中文)
• zh-TW (繁體中文)
• ja (日本語)
• ru (Русский)
• ko (한국어)
• hi (हिन्दी)

Si vous souhaitez ajouter vos propres traductions, vous pouvez le faire en suivant la structure dans le fichier i18n/i18n.config.ts. Ajoutez simplement les traductions pour les clés que vous souhaitez traduire dans l'objet de langue respectif.