---
createdAt: 2025-06-18
updatedAt: 2025-06-29
title: Comment traduire votre Nuxt and Vue – guide i18n 2025
description: Découvrez comment rendre votre site Nuxt et Vue multilingue. Suivez la documentation pour internationaliser (i18n) et traduire votre site.
keywords:
- Internationalisation
- Documentation
- Intlayer
- Nuxt
- Vue
- JavaScript
slugs:
- doc
- environment
- nuxt-and-vue
applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-template
history:
- version: 5.5.10
date: 2025-06-29
changes: Historique initial
---
# Traduire votre Nuxt and Vue avec Intlayer | Internationalisation (i18n)
Voir [Modèle d'application](https://github.com/aymericzip/intlayer-nuxt-template) sur GitHub.
## Qu'est-ce qu'Intlayer ?
**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier la prise en charge multilingue dans les applications web modernes.
Avec Intlayer, vous pouvez :
- **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
- **Assurer la prise en charge de TypeScript** avec des types générés automatiquement, améliorant l'autocomplétion et la détection d'erreurs.
- **Bénéficier de fonctionnalités avancées**, comme la détection et le changement dynamique de la langue.
---
## Guide étape par étape pour configurer Intlayer dans une application Nuxt
### Étape 1 : Installer les dépendances
Installez les paquets nécessaires avec npm :
```bash packageManager="npm"
npm install intlayer vue-intlayer
npm install --save-dev nuxt-intlayer
```
```bash packageManager="pnpm"
pnpm add intlayer vue-intlayer
pnpm add --save-dev nuxt-intlayer
```
```bash packageManager="yarn"
yarn add intlayer vue-intlayer
yarn add --save-dev nuxt-intlayer
```
- **intlayer**
Le paquet principal qui fournit des outils d'internationalisation pour la gestion de la configuration, la traduction, la [déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/get_started.md), la transpilation, et les [commandes CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_cli.md).
- **vue-intlayer**
Le paquet qui intègre Intlayer avec une application Vue. Il fournit les composables pour les composants Vue.
- **nuxt-intlayer**
Le module Nuxt qui intègre Intlayer avec les applications Nuxt. Il fournit une configuration automatique, un middleware pour la détection de la langue, la gestion des cookies et la redirection des URL.
### Étape 2 : Configuration de votre projet
Créez un fichier de configuration pour configurer les langues de votre application :
```typescript fileName="intlayer.config.ts" codeFormat="typescript"
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [
Locales.ENGLISH,
Locales.FRENCH,
Locales.SPANISH,
// Vos autres langues
],
defaultLocale: Locales.ENGLISH,
},
content: {
contentDir: ["."], // Parce que par défaut Intlayer surveillera les fichiers de déclaration de contenu depuis le répertoire `./src`
},
};
export default config;
```
```javascript fileName="intlayer.config.mjs" codeFormat="esm"
import { Locales } from "intlayer";
/** @type {import('intlayer').IntlayerConfig} */
// Configuration de l'internationalisation et du contenu
const config = {
internationalization: {
locales: [
Locales.ENGLISH,
Locales.FRENCH,
Locales.SPANISH,
// Vos autres langues
],
defaultLocale: Locales.ENGLISH,
},
content: {
contentDir: ["."], // Répertoire de contenu à surveiller
},
};
export default config;
```
```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
const { Locales } = require("intlayer");
/** @type {import('intlayer').IntlayerConfig} */
// Configuration de l'internationalisation et du contenu
const config = {
internationalization: {
locales: [
Locales.ENGLISH,
Locales.FRENCH,
Locales.SPANISH,
// Vos autres langues
],
defaultLocale: Locales.ENGLISH,
},
content: {
contentDir: ["."],
},
};
module.exports = config;
```
> Grâce à ce fichier de configuration, vous pouvez configurer des URLs localisées, la redirection via middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs d'Intlayer dans la console, et bien plus encore. Pour une liste complète des paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
### Étape 3 : Intégrer Intlayer dans votre configuration Nuxt
Ajoutez le module intlayer à votre configuration Nuxt :
```typescript fileName="nuxt.config.ts"
import { defineNuxtConfig } from "nuxt/config";
export default defineNuxtConfig({
// ... Votre configuration Nuxt existante
modules: ["nuxt-intlayer"],
});
```
> Le module `nuxt-intlayer` gère automatiquement l'intégration d'Intlayer avec Nuxt. Il configure la construction des déclarations de contenu, surveille les fichiers en mode développement, fournit un middleware pour la détection de la locale, et gère le routage localisé.
### Étape 4 : Déclarez Votre Contenu
Créez et gérez vos déclarations de contenu pour stocker les traductions :
```tsx fileName="components/helloWorld.content.ts" contentDeclarationFormat="typescript"
import { t, type Dictionary } from "intlayer";
const helloWorldContent = {
key: "helloworld",
content: {
count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
edit: t({
en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
}),
checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
nuxtIntlayer: t({
en: "Nuxt Intlayer documentation",
fr: "Documentation de Nuxt Intlayer",
es: "Documentación de Nuxt Intlayer",
}),
learnMore: t({
en: "Learn more about Nuxt in the ",
fr: "En savoir plus sur Nuxt dans la ",
es: "Aprenda más sobre Nuxt en la ",
}),
nuxtDocs: t({
en: "Nuxt Documentation",
fr: "Documentation Nuxt",
es: "Documentación de Nuxt",
}),
readTheDocs: t({
en: "Click on the Nuxt logo to learn more",
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
es: "Haga clic en el logotipo de Nuxt para obtener más información",
}),
},
} satisfies Dictionary;
export default helloWorldContent;
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
es: "Haga clic en el logotipo de Nuxt para obtener más información",
}),
},
} satisfies Dictionary;
export default helloWorldContent;
```
```javascript fileName="components/helloWorld.content.mjs" contentDeclarationFormat="esm"
import { t } from "intlayer";
/** @type {import('intlayer').Dictionary} */
const helloWorldContent = {
key: "helloworld",
content: {
count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
edit: t({
en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
}),
checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
nuxtIntlayer: t({
en: "Nuxt Intlayer documentation",
fr: "Documentation de Nuxt Intlayer",
es: "Documentación de Nuxt Intlayer",
}),
learnMore: t({
en: "Learn more about Nuxt in the ",
fr: "En savoir plus sur Nuxt dans la ",
es: "Aprenda más sobre Nuxt en la ",
}),
nuxtDocs: t({
en: "Nuxt Documentation",
fr: "Documentation Nuxt",
es: "Documentación de Nuxt",
}),
readTheDocs: t({
en: "Click on the Nuxt logo to learn more",
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
es: "Haga clic en el logotipo de Nuxt para obtener más información",
}),
},
};
export default helloWorldContent;
```
```javascript fileName="components/helloWorld.content.cjs" contentDeclarationFormat="commonjs"
const { t } = require("intlayer");
/** @type {import('intlayer').Dictionary} */
const helloWorldContent = {
key: "helloworld",
content: {
count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
edit: t({
en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
}),
checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
nuxtIntlayer: t({
en: "Nuxt Intlayer documentation",
fr: "Documentation de Nuxt Intlayer",
es: "Documentación de Nuxt Intlayer",
}),
learnMore: t({
en: "Learn more about Nuxt in the ",
fr: "En savoir plus sur Nuxt dans la ",
es: "Aprenda más sobre Nuxt en la ",
}),
nuxtDocs: t({
en: "Nuxt Documentation",
fr: "Documentation Nuxt",
es: "Documentación de Nuxt",
}),
readTheDocs: t({
en: "Click on the Nuxt logo to learn more",
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
es: "Haga clic en el logotipo de Nuxt para obtener más información",
}),
},
};
module.exports = helloWorldContent;
es: "Documentación de Nuxt Intlayer",
}),
learnMore: t({
en: "Learn more about Nuxt in the ",
fr: "En savoir plus sur Nuxt dans la ",
es: "Aprenda más sobre Nuxt en la ",
}),
nuxtDocs: t({
en: "Nuxt Documentation",
fr: "Documentation Nuxt",
es: "Documentación de Nuxt",
}),
readTheDocs: t({
en: "Click on the Nuxt logo to learn more",
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
es: "Haga clic en el logotipo de Nuxt para obtener más información",
}),
},
};
module.exports = helloWorldContent;
```
```json fileName="components/helloWorld.content.json" contentDeclarationFormat="json"
{
"$schema": "https://intlayer.org/schema.json",
"key": "helloworld",
"content": {
"count": {
"nodeType": "translation",
"translation": {
"en": "count is ",
"fr": "le compte est ",
"es": "el recuento es "
}
},
"edit": {
"nodeType": "translation",
"translation": {
"en": "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
"fr": "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
"es": "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR"
}
},
"checkOut": {
"nodeType": "translation",
"translation": {
"en": "Check out ",
"fr": "Vérifiez ",
"es": "Compruebe "
}
},
"nuxtIntlayer": {
"nodeType": "translation",
"translation": {
"en": "Documentation de Nuxt Intlayer",
"fr": "Documentation de Nuxt Intlayer",
"es": "Documentación de Nuxt Intlayer"
}
},
"learnMore": {
"nodeType": "translation",
"translation": {
"en": "En savoir plus sur Nuxt dans la ",
"fr": "En savoir plus sur Nuxt dans la ",
"es": "Aprenda más sobre Nuxt en la "
}
},
"nuxtDocs": {
"nodeType": "translation",
"translation": {
"en": "Documentation Nuxt",
"fr": "Documentation Nuxt",
"es": "Documentación de Nuxt"
}
},
"readTheDocs": {
"nodeType": "translation",
"translation": {
"en": "Cliquez sur le logo Nuxt pour en savoir plus",
"fr": "Cliquez sur le logo Nuxt pour en savoir plus",
"es": "Haga clic en el logotipo de Nuxt para obtener más información"
}
}
}
}
```
> Vos déclarations de contenu peuvent être définies n'importe où dans votre application tant qu'elles sont incluses dans le répertoire `contentDir` (par défaut, `./src`). Et correspondent à l'extension de fichier de déclaration de contenu (par défaut, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
> Pour plus de détails, référez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/get_started.md).
### Étape 5 : Utilisez Intlayer dans votre code
Accédez à vos dictionnaires de contenu dans toute votre application Nuxt en utilisant le composable `useIntlayer` :
```vue fileName="components/HelloWorld.vue"
<script setup lang="ts">
import { ref } from "vue";
import { useIntlayer } from "vue-intlayer";
defineProps({
msg: String,
});
const {
count,
edit,
checkOut,
nuxtIntlayer,
learnMore,
nuxtDocs,
readTheDocs,
} = useIntlayer("helloworld");
const countRef = ref(0);
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="countRef++">
<count />
{{ countRef }}
</button>
<p v-html="edit"></p>
</div>
<p>
<checkOut />
<a href="https://nuxt.com/docs/getting-started/introduction" target="_blank"
>Nuxt</a
>, <nuxtIntlayer />
</p>
<p>
<learnMore />
<a href="https://nuxt.com" target="_blank"><nuxtDocs /></a>.
</p>
<p class="read-the-docs"><readTheDocs /></p>
<p class="read-the-docs">{{ readTheDocs }}</p>
</template>
```
#### Accéder au contenu dans Intlayer
Intlayer propose différentes API pour accéder à votre contenu :
- **Syntaxe basée sur les composants** (recommandée) :
Utilisez la syntaxe `<myContent />` ou `<Component :is="myContent" />` pour rendre le contenu en tant que nœud Intlayer. Cela s'intègre parfaitement avec l'[Éditeur Visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) et le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
- **Syntaxe basée sur les chaînes** :
Utilisez `{{ myContent }}` pour afficher le contenu en texte brut, sans support de l'Éditeur Visuel.
- **Syntaxe HTML brute** :
Utilisez `<div v-html="myContent" />` pour afficher le contenu en HTML brut, sans support de l'Éditeur Visuel.
- **Syntaxe de déstructuration** :
Le composable `useIntlayer` retourne un Proxy avec le contenu. Ce proxy peut être déstructuré pour accéder au contenu tout en conservant la réactivité.
- Utilisez `const content = useIntlayer("myContent");` et `{{ content.myContent }}` / `<content.myContent />`.
- Ou utilisez `const { myContent } = useIntlayer("myContent");` et `{{ myContent}}` / `<myContent/>` pour déstructurer le contenu.
### (Optionnel) Étape 6 : Changer la langue de votre contenu
Pour changer la langue de votre contenu, vous pouvez utiliser la fonction `setLocale` fournie par le composable `useLocale`. Cette fonction vous permet de définir la locale de l'application et de mettre à jour le contenu en conséquence.
Créez un composant pour basculer entre les langues :
```vue fileName="components/LocaleSwitcher.vue"
<template>
<div class="locale-switcher">
<select v-model="selectedLocale" @change="changeLocale">
<option v-for="loc in availableLocales" :key="loc" :value="loc">
{{ getLocaleName(loc) }}
</option>
</select>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { getLocaleName } from "intlayer";
import { useLocale } from "vue-intlayer";
// Obtenir les informations de locale et la fonction setLocale
const { locale, availableLocales, setLocale } = useLocale();
// Suivre la locale sélectionnée avec un ref
const selectedLocale = ref(locale.value);
// Mettre à jour la locale lorsque la sélection change
const changeLocale = () => setLocale(selectedLocale.value);
// Garder selectedLocale synchronisé avec la locale globale
watch(
() => locale.value,
(newLocale) => {
selectedLocale.value = newLocale;
}
);
</script>
</template>
<style scoped>
.locale-switcher {
margin: 1rem 0;
}
select {
padding: 0.5rem;
border-radius: 0.25rem;
border: 1px solid #ccc;
}
</style>
```
Ensuite, utilisez ce composant dans vos pages ou votre mise en page :
```vue fileName="app.vue"
<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";
import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
const content = useIntlayer("app"); // Créez le fichier de déclaration intlayer associé
</script>
<template>
<div>
<header>
<LocaleSwitcher />
</header>
<main>
<NuxtPage />
</main>
</div>
</template>
```
### (Optionnel) Étape 7 : Ajoutez le routage localisé à votre application
Nuxt gère automatiquement le routage localisé lorsqu'on utilise le module `nuxt-intlayer`. Cela crée des routes pour chaque langue automatiquement en fonction de la structure de votre répertoire de pages.
Exemple :
```plaintext
pages/
├── index.vue → /, /fr, /es
├── about.vue → /about, /fr/about, /es/about
└── contact/
└── index.vue → /contact, /fr/contact, /es/contact
```
Pour créer une page localisée, il suffit de créer vos fichiers Vue dans le répertoire `pages/` :
```vue fileName="pages/about.vue"
<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";
const content = useIntlayer("about");
</script>
<template>
<div>
<h1>{{ content.title }}</h1>
<p>{{ content.description }}</p>
</div>
</template>
```
Le module `nuxt-intlayer` va automatiquement :
- Détecter la langue préférée de l'utilisateur
- Gérer le changement de langue via l'URL
- Définir l'attribut `<html lang="">` approprié
- Gérer les cookies de langue
- Rediriger les utilisateurs vers l'URL localisée appropriée
### (Optionnel) Étape 8 : Création d'un composant de lien localisé
Pour garantir que la navigation de votre application respecte la langue actuelle, vous pouvez créer un composant personnalisé `LocalizedLink`. Ce composant préfixe automatiquement les URL internes avec la langue courante.
```vue fileName="components/LocalizedLink.vue"
<template>
<NuxtLink :to="localizedHref" v-bind="$attrs">
<slot />
</NuxtLink>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { getLocalizedUrl } from "intlayer";
import { useLocale } from "vue-intlayer";
const props = defineProps({
to: {
type: String,
required: true,
},
});
const { locale } = useLocale();
// Vérifie si le lien est externe
const isExternalLink = computed(() => /^https?:\/\//.test(props.to || ""));
// Crée un href localisé pour les liens internes
const localizedHref = computed(() =>
isExternalLink.value ? props.to : getLocalizedUrl(props.to, locale.value)
);
</script>
```
Ensuite, utilisez ce composant dans toute votre application :
```vue fileName="pages/index.vue"
<template>
<div>
<LocalizedLink to="/about">
{{ content.aboutLink }}
</LocalizedLink>
<LocalizedLink to="/contact">
{{ content.contactLink }}
</LocalizedLink>
</div>
</template>
<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";
import LocalizedLink from "~/components/LocalizedLink.vue";
const content = useIntlayer("home");
</script>
```
### (Optionnel) Étape 9 : Gérer les métadonnées et le SEO
Nuxt offre d'excellentes capacités SEO. Vous pouvez utiliser Intlayer pour gérer les métadonnées localisées :
```vue fileName="pages/about.vue"
<script setup lang="ts">
import { useSeoMeta } from "nuxt/app";
import { getIntlayer } from "intlayer";
import { useLocale } from "vue-intlayer";
const { locale } = useLocale();
const content = getIntlayer("about-meta", locale.value);
useSeoMeta({
title: content.title,
description: content.description,
});
</script>
<template>
<div>
<h1>{{ content.pageTitle }}</h1>
<p>{{ content.pageContent }}</p>
</div>
</template>
```
Créez la déclaration de contenu correspondante :
```ts fileName="pages/about-meta.content.ts"
import { t, type Dictionary } from "intlayer";
import type { useSeoMeta } from "nuxt/app";
const aboutMetaContent = {
key: "about-meta",
content: {
title: t({
en: "About Us - My Company",
fr: "À Propos - Ma Société",
es: "Acerca de Nosotros - Mi Empresa",
}),
description: t({
en: "Learn more about our company and our mission",
fr: "En savoir plus sur notre société et notre mission",
es: "Conozca más sobre nuestra empresa y nuestra misión",
}),
},
} satisfies Dictionary<Parameters<typeof useSeoMeta>[0]>;
export default aboutMetaContent;
```
```typescript fileName="pages/about-meta.content.mjs" contentDeclarationFormat="esm"
import { t } from "intlayer";
/** @type {import('intlayer').Dictionary} */
const aboutMetaContent = {
key: "about-meta",
content: {
title: t({
zh: "关于我们 - 我的公司",
en: "About Us - My Company",
fr: "À Propos - Ma Société",
es: "Acerca de Nosotros - Mi Empresa",
}),
description: t({
zh: "了解更多关于我们公司和我们的使命",
en: "Learn more about our company and our mission",
fr: "En savoir plus sur notre société et notre mission",
es: "Conozca más sobre nuestra empresa y nuestra misión",
}),
},
};
export default aboutMetaContent;
```
```typescript fileName="pages/about-meta.content.js" contentDeclarationFormat="cjs"
const { t } = require("intlayer");
/** @type {import('intlayer').Dictionary} */
const aboutMetaContent = {
key: "about-meta",
content: {
title: t({
zh: "关于我们 - 我的公司",
en: "About Us - My Company",
fr: "À Propos - Ma Société",
es: "Acerca de Nosotros - Mi Empresa",
}),
fr: "À Propos - Ma Société",
es: "Acerca de Nosotros - Mi Empresa",
}),
description: t({
zh: "了解更多关于我们公司和我们的使命",
en: "Learn more about our company and our mission",
fr: "En savoir plus sur notre société et notre mission",
es: "Conozca más sobre nuestra empresa y nuestra misión",
}),
},
};
module.exports = aboutMetaContent;
```
```json fileName="pages/about-meta.content.json" contentDeclarationFormat="json"
{
"key": "about-meta",
"content": {
"title": {
"nodeType": "translation",
"translations": {
"zh": "关于我们 - 我的公司",
"en": "About Us - My Company",
"fr": "À Propos - Ma Société",
"es": "Acerca de Nosotros - Mi Empresa"
}
},
"description": {
"nodeType": "translation",
"translations": {
"zh": "了解更多关于我们公司和我们的使命",
"en": "Learn more about our company and our mission",
"fr": "En savoir plus sur notre société et notre mission",
"es": "Conozca más sobre nuestra empresa y nuestra misión"
}
}
}
}
```
### Configurer TypeScript
Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.
```json5 fileName="tsconfig.json"
{
// ... Vos configurations TypeScript existantes
"include": [
// ... Vos configurations TypeScript existantes
".intlayer/**/*.ts", // Inclure les types générés automatiquement
],
}
```
### Configuration Git
Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commettre dans votre dépôt Git.
Pour ce faire, vous pouvez ajouter les instructions suivantes dans votre fichier `.gitignore` :
```plaintext fileName=".gitignore"
# Ignorer les fichiers générés par Intlayer
.intlayer
```
### Extension VS Code
Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle **Intlayer VS Code Extension**.
[Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
Cette extension fournit :
- **Autocomplétion** pour les clés de traduction.
- **Détection d'erreurs en temps réel** pour les traductions manquantes.
- **Aperçus en ligne** du contenu traduit.
- **Actions rapides** pour créer et mettre à jour facilement les traductions.
Pour plus de détails sur l'utilisation de l'extension, consultez la [documentation de l'extension Intlayer pour VS Code](https://intlayer.org/doc/vs-code-extension).
---
### Aller plus loin
Pour aller plus loin, vous pouvez implémenter l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
---
