Intlayer est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications Vue.js et Nuxt.

Consultez une comparaison concrète avec vue-i18n dans notre article de blog vue-i18n vs. Intlayer.

Pourquoi combiner Intlayer avec vue-i18n ?

Bien qu'Intlayer propose une excellente solution i18n autonome (voir notre guide d'intégration Vue.js), vous pourriez vouloir le combiner avec vue-i18n pour plusieurs raisons :

Code existant : Vous disposez d'une implémentation vue-i18n établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
Exigences héritées : Votre projet nécessite une compatibilité avec les plugins ou workflows vue-i18n existants.
Familiarité de l'équipe : Votre équipe est à l'aise avec vue-i18n mais souhaite une meilleure gestion du contenu.
Utilisation des fonctionnalités d'Intlayer : Vous souhaitez utiliser les fonctionnalités d'Intlayer telles que la déclaration de contenu, l'automatisation des traductions, le test des traductions, et plus encore.

Pour cela, Intlayer peut être implémenté comme un adaptateur pour vue-i18n afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et bien plus.

Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d'Intlayer tout en maintenant la compatibilité avec vue-i18n.

Guide étape par étape pour configurer Intlayer avec vue-i18n

Étape 1 : Installer les dépendances

Installez les paquets nécessaires en utilisant votre gestionnaire de paquets préféré :

bash

Copier le code

Copier le code dans le presse-papiers

npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

Explications des paquets :

intlayer : Bibliothèque principale pour la déclaration et la gestion du contenu
@intlayer/sync-json-plugin : Plugin pour synchroniser les déclarations de contenu Intlayer au format JSON de vue-i18n

Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON

Créez un fichier de configuration Intlayer pour définir vos locales supportées :

Si vous souhaitez également exporter des dictionnaires JSON pour vue-i18n, ajoutez le plugin syncJSON :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "vue-i18n",      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,    }),  ],};export default config;

Le plugin syncJSON enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans changer l'architecture du contenu.

Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu Intlayer (.content), Intlayer procédera de la manière suivante :

plaintext

Copier le code

Copier le code dans le presse-papiers

1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire Intlayer.2. s'il y a des conflits entre le JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle des fichiers de déclaration de contenu (tout est configurable).

Si des modifications sont effectuées via la CLI pour traduire le JSON, ou via le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.

Pour plus de détails sur le plugin syncJSON, veuillez consulter la documentation du plugin syncJSON.

Configuration Git

Exclure les fichiers générés du contrôle de version :

.gitignore

Copier le code

Copier le code dans le presse-papiers

# Ignorer les fichiers générés par Intlayer.intlayer

Ces fichiers sont automatiquement régénérés lors du processus de build et n'ont pas besoin d'être commités dans votre dépôt.

Extension VS Code

Pour une meilleure expérience développeur, installez l'extension officielle Intlayer VS Code Extension :

Installer depuis le Marketplace VS Code

Automatiser react-intl

next-i18next vs next-intl vs Intlayer

Création:2025-08-23Dernière mise à jour:2025-10-29

Regarder le tutoriel vidéo

Cette page dispose d'un tutoriel vidéo.

Référencez cette doc à votre assistant AI préféré

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Historique des versions

Ajout du plugin loadJSON
v7.0.601/11/2025
Passage au plugin syncJSON et réécriture complète
v7.0.029/10/2025

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Modifier cette documentation

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation

Copier

Copier le Markdown du doc dans le presse-papiers

Internationalisation Vue.js (i18n) avec vue-i18n et Intlayer

www.youtube.com

Table des matières

Qu'est-ce que Intlayer ?

Consultez une comparaison concrète avec vue-i18n dans notre article de blog vue-i18n vs. Intlayer.

Pourquoi combiner Intlayer avec vue-i18n ?

Bien qu'Intlayer propose une excellente solution i18n autonome (voir notre guide d'intégration Vue.js), vous pourriez vouloir le combiner avec vue-i18n pour plusieurs raisons :

Code existant : Vous disposez d'une implémentation vue-i18n établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
Exigences héritées : Votre projet nécessite une compatibilité avec les plugins ou workflows vue-i18n existants.
Familiarité de l'équipe : Votre équipe est à l'aise avec vue-i18n mais souhaite une meilleure gestion du contenu.
Utilisation des fonctionnalités d'Intlayer : Vous souhaitez utiliser les fonctionnalités d'Intlayer telles que la déclaration de contenu, l'automatisation des traductions, le test des traductions, et plus encore.

Pour cela, Intlayer peut être implémenté comme un adaptateur pour vue-i18n afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et bien plus.

Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d'Intlayer tout en maintenant la compatibilité avec vue-i18n.

Guide étape par étape pour configurer Intlayer avec vue-i18n

Étape 1 : Installer les dépendances

Installez les paquets nécessaires en utilisant votre gestionnaire de paquets préféré :

bash

Copier le code

Copier le code dans le presse-papiers

npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

Explications des paquets :

intlayer : Bibliothèque principale pour la déclaration et la gestion du contenu
@intlayer/sync-json-plugin : Plugin pour synchroniser les déclarations de contenu Intlayer au format JSON de vue-i18n

Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON

Créez un fichier de configuration Intlayer pour définir vos locales supportées :

Si vous souhaitez également exporter des dictionnaires JSON pour vue-i18n, ajoutez le plugin syncJSON :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "vue-i18n",      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,    }),  ],};export default config;

import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      format: "vue-i18n",      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,    }),  ],};export default config;

Le plugin syncJSON enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans changer l'architecture du contenu.

Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu Intlayer (.content), Intlayer procédera de la manière suivante :

plaintext

Copier le code

Copier le code dans le presse-papiers

1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire Intlayer.2. s'il y a des conflits entre le JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle des fichiers de déclaration de contenu (tout est configurable).

1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire Intlayer.2. s'il y a des conflits entre le JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle des fichiers de déclaration de contenu (tout est configurable).

Si des modifications sont effectuées via la CLI pour traduire le JSON, ou via le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.

Pour plus de détails sur le plugin syncJSON, veuillez consulter la documentation du plugin syncJSON.

Configuration Git

Exclure les fichiers générés du contrôle de version :

.gitignore

Copier le code

Copier le code dans le presse-papiers

# Ignorer les fichiers générés par Intlayer.intlayer

# Ignorer les fichiers générés par Intlayer.intlayer

Ces fichiers sont automatiquement régénérés lors du processus de build et n'ont pas besoin d'être commités dans votre dépôt.

Extension VS Code

Pour une meilleure expérience développeur, installez l'extension officielle Intlayer VS Code Extension :

Installer depuis le Marketplace VS Code

Automatiser react-intl

next-i18next vs next-intl vs Intlayer