Le contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisCommencer l'internationalisation (i18n) avec Intlayer et Nuxt
Voir Modèle d'application 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 :
npm install intlayer vue-intlayernpm install --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, la transpilation, et les commandes CLI.
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 :
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;
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.
Étape 3 : Intégrer Intlayer dans votre configuration Nuxt
Ajoutez le module intlayer à votre configuration Nuxt :
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 :
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;
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.
Étape 5 : Utilisez Intlayer dans votre code
Accédez à vos dictionnaires de contenu dans toute votre application Nuxt en utilisant le composable useIntlayer :
<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 et le CMS.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 :
<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 setLocaleconst { locale, availableLocales, setLocale } = useLocale();// Suivre la locale sélectionnée avec un refconst selectedLocale = ref(locale.value);// Mettre à jour la locale lorsque la sélection changeconst changeLocale = () => setLocale(selectedLocale.value);// Garder selectedLocale synchronisé avec la locale globalewatch( () => 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 :
<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 :
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/ :
<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.
<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 externeconst isExternalLink = computed(() => /^https?:\/\//.test(props.to || ""));// Crée un href localisé pour les liens internesconst localizedHref = computed(() => isExternalLink.value ? props.to : getLocalizedUrl(props.to, locale.value));</script>
Ensuite, utilisez ce composant dans toute votre application :
<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 :
<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 :
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;
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.
{ // ... 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 :
# 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
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.
Aller plus loin
Pour aller plus loin, vous pouvez implémenter l'éditeur visuel ou externaliser votre contenu en utilisant le CMS.
Historique de la documentation
- 5.5.10 - 2025-06-29 : Historique initial
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