Introduction
Dans un monde de plus en plus connecté, offrir une expérience multilingue est essentiel pour les sites web et les applications souhaitant atteindre un public global. Avec Nuxt.js, la gestion des langues devient plus accessible grâce à Vue-i18n, une puissante bibliothèque de traduction. Vue-i18n permet de créer des sites multilingues en facilitant l’intégration et la gestion de plusieurs langues, tout en garantissant une expérience utilisateur fluide et personnalisée. Dans cet article, nous explorerons comment intégrer et configurer Vue-i18n dans un projet Nuxt.js, afin de rendre votre site accessible à des utilisateurs de tous horizons, en répondant aux besoins de différentes communautés linguistiques.
Prérequis
Avant de commencer, il est essentiel d’avoir un projet Nuxt.js 3 déjà initialisé, avec un layout par défaut. Si besoin, référez-vous à nos articles Initialisation d’un projet Nuxt.js 3 optimisé avec Bootstrap et Layout par Défaut avec Navbar et Sidebar Dynamique, où une navbar et une sidebar ont été configurées pour s’adapter dynamiquement à l’application.
Use case
Nous allons configurer Vue-i18n pour ajouter une gestion multilingue à une application Nuxt.js 3, en prenant en charge l’anglais et le français. L’objectif principal est de permettre la traduction dynamique de la navbar et de la sidebar en fonction de la langue sélectionnée par l’utilisateur. En centralisant les traductions, Vue-i18n garantit une gestion efficace et uniforme des contenus, tout en offrant une expérience utilisateur fluide. Chaque changement de langue appliqué via la navbar se reflète immédiatement sur l’interface, assurant une navigation cohérente et adaptée aux préférences linguistiques.
Installation de Vue-i18n
Pour intégrer Vue-i18n dans votre projet, commencez par installer la bibliothèque en exécutant la commande suivante :
yarn add vue-i18nCette étape ajoutera Vue-i18n comme dépendance à votre projet, vous permettant ainsi de gérer facilement la traduction multilingue dans votre application Nuxt.js.
Configuration de Vue-i18n
Une fois Vue-i18n installé, configurez-le en créant un fichier nommé i18n.ts dans le dossier plugins de votre projet (ou créez ce dossier s’il n’existe pas). Ce fichier servira à initialiser et configurer Vue-i18n pour gérer les traductions multilingues.
import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import fr from '../locales/fr.json'
export default defineNuxtPlugin(({ vueApp }) => {
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale:'fr',
// locales: ['fr', 'en'],
defaultLocale: 'fr',
messages: {
en,
fr,
}
})
vueApp.use(i18n)
})Les fichiers de traduction en.json et fr.json sont importés depuis le dossier locales pour gérer respectivement l’anglais et le français. L’option legacy: false active l’API moderne de Vue-i18n, et globalInjection: true permet l’accès global aux méthodes de traduction comme $t. La langue initiale et par défaut est définie sur le français (locale: 'fr' et defaultLocale: 'fr'), et les traductions sont associées via l’option messages. Enfin, l’instance de Vue-i18n est intégrée dans l’application Nuxt avec vueApp.use(i18n), assurant ainsi une gestion fluide et dynamique des traductions.
Créez un dossier nommé locales à la racine de votre projet, puis ajoutez des fichiers JSON pour chaque langue. Par exemple :
{
"hello": "Hello, {name}!",
"language": "Language",
"en":"English",
"fr": "French",
"sidebar": {
"dashboard": "Dashboard",
"task": "Task",
"assignedTasks": "Assigned Tasks",
"completedTasks": "Completed Tasks",
"newTask": "New Task",
"team": "Team",
"report": "Report"
},
"header":{
"search":"Search for ...",
"account":"My account",
"logout":"Logout"
},
"introduction": {
"title": "Introduction",
"content": "In modern web development, using frameworks like Nuxt.js 3 simplifies the creation of reactive and high-performance applications. A key element to ensuring an optimal user experience is designing a default layout, which serves as a foundation for all the pages in the application. This layout should integrate essential elements such as a dynamic navbar and sidebar, allowing for smooth and intuitive navigation. To optimize development, it is essential to leverage resources like code snippets and packages like Vue Sidebar Menu, which provide efficient solutions for building a user interface that meets both user expectations and design requirements."
},
}{
"hello": "Bonjour, {name}!",
"language": "Langue",
"en":"Anglais",
"fr": "Français",
"sidebar": {
"dashboard": "Tableau de Bord",
"task": "Tâches",
"assignedTasks": "Tâches Assignées",
"completedTasks": "Tâches Complétées",
"newTask": "Nouvelle Tâche",
"team": "Équipe",
"report": "Rapport"
},
"header":{
"search":"Rechercher ...",
"account":"Mon compte",
"logout":"Se déconnecter"
},
"introduction": {
"title": "Introduction",
"content": "Dans le développement web moderne, l'utilisation de frameworks comme Nuxt.js 3 simplifie la création d'applications réactives et performantes. Un élément clé pour garantir une expérience utilisateur optimale est la conception d'une mise en page par défaut, qui sert de fondation à toutes les pages de l'application. Cette mise en page doit intégrer des éléments essentiels comme une barre de navigation et une barre latérale dynamiques, permettant une navigation fluide et intuitive. Pour optimiser le développement, il est essentiel de tirer parti de ressources telles que des extraits de code et des packages comme Vue Sidebar Menu, qui offrent des solutions efficaces pour construire une interface utilisateur répondant aux attentes des utilisateurs et aux exigences de conception."
},
}Ensuite, assurez-vous d’inclure le plugin dans le fichier nuxt.config.ts :
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
plugins : [
{ src: '~/plugins/i18n.ts' },
],
})
Ici, le plugin i18n.ts situé dans le dossier ~/plugins/ est ajouté à la liste des plugins. Cela permet d’intégrer le système de gestion des langues via Vue-i18n, qui a été configuré dans le fichier i18n.ts, et d’assurer ainsi que les traductions multilingues sont disponibles dans toute l’application. Cette approche garantit une gestion structurée et efficace des textes traduits, permettant à l’application d’adapter dynamiquement son contenu à la langue sélectionnée par l’utilisateur.
Bouton de Changement de Langue
Après avoir configuré i18n, il est nécessaire de permettre aux utilisateurs de changer de langue via l’interface utilisateur. Nous allons ajouter un bouton dans la navbar pour basculer entre l’anglais et le français. Ce bouton affichera le drapeau correspondant à la langue sélectionnée, et proposera une liste déroulante pour choisir une autre langue.
Voici le code de la section de la navbar dédiée au changement de langue :
<template>
...
<li class="nav-item dropdown no-arrow mx-2">
<div class="nav-item dropdown no-arrow">
<a
class="nav-link btn header-item"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
<img
v-if="$i18n.locale === 'en'"
id="header-lang-img"
src="@/assets/image/en.jfif"
alt="Header Language"
height="16">
<img
v-if="$i18n.locale === 'fr'"
id="header-lang-img"
src="@/assets/image/fr.jfif"
alt="Header Language"
height="16">
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li>
<a
class="dropdown-item notify-item language"
href="#"
target="_self"
@click="changeLocale('en')">
<img src="@/assets/image/en.jfif" alt="en-image" class="me-1" height="12">
<span class="align-middle">{{ $t('en') }}</span>
</a>
</li>
<li>
<a
class="dropdown-item notify-item language"
href="#"
target="_self"
@click="changeLocale('fr')">
<img src="@/assets/image/fr.jfif" alt="fr-image" class="me-1" height="12">
<span class="align-middle">{{ $t('fr') }}</span>
</a>
</li>
</ul>
</div>
</li>
...
</template>
<script setup >
...
import { useI18n } from 'vue-i18n'
const { t, locale, availableLocales } = useI18n()
const changeLocale = (newLocale) => {
if (availableLocales.includes(newLocale)) {
locale.value = newLocale
}
}
</script>
<style >
...
</style>Les ellipses (...) avant et après le code indiquent que d’autres parties du composant ou du code de navigation sont présentes, mais ne sont pas affichées ici. Pour consulter le code complet de la barre de navigation, reportez-vous à l’article sur le Layout par Défaut avec Navbar et Sidebar Dynamique mentionné dans les prérequis. Le bouton de changement de langue (avec son menu déroulant) est mis en avant, avec tous les éléments nécessaires pour en comprendre le fonctionnement. Lorsque l’utilisateur clique sur une option du menu, la fonction changeLocale est appelée pour mettre à jour la langue active, après avoir vérifié si la langue sélectionnée est valide via availableLocales. Ce composant, stylisé avec Bootstrap pour offrir une présentation claire et accessible, affiche une image et un texte traduits dynamiquement pour chaque langue grâce à la fonction $t de Vue-i18n.
Traduction des Textes dans le HTML
Pour traduire des textes directement dans le code HTML d’un composant, la fonction $t est utilisée. Elle récupère la clé de traduction associée à la langue active et affiche le texte correspondant. Voici un exemple :
<nav>
<ul>
<li>
<a href="#">{{ $t('header.account') }}</a>
</li>
<li>
<a href="#">{{ $t('header.logout') }}</a>
</li>
</ul>
</nav>Dans cet exemple, $t('header.account') et $t('header.logout') font référence aux clés définies dans les fichiers de traduction en.json et fr.json. Lorsque la langue active change, les textes sont automatiquement mis à jour sans nécessiter de rechargement de la page.
Traduction des Textes dans le Script
Dans certains cas, comme lorsque des textes doivent être manipulés dynamiquement ou ajustés dans le script, la fonction t fournie par useI18n est utilisée. Cela permet de récupérer la clé de traduction et d’afficher les valeurs appropriées en fonction de la langue active. Voici un exemple pratique dans le contexte de la sidebar, où le contenu de l’objet menu est traduit en fonction de la langue sélectionnée par l’utilisateur :
<template>
<sidebar-menu :menu="translatedMenu" :collapsed="storeSidebar.isCollapsed" :hide-toggle="true" :width="'250px'" :showOneChild="true" >
</sidebar-menu>
</template>
<script setup>
import { useCollapsedSidebar } from '/stores/sidebar'
import { useI18n } from 'vue-i18n';
import { ref, computed, watch } from 'vue';
const { t, locale } = useI18n();
const storeSidebar = useCollapsedSidebar();
const menu = [
{
href: '/home',
title: 'sidebar.dashboard',
icon: 'fa-solid fa-house fs-6',
},
{
href: '#',
title: 'sidebar.task',
icon: 'fa-solid fa-list-check fs-6',
child: [
{
href: '/assignedTasks',
title: 'sidebar.assignedTasks',
},
{
href: '/completedTasks',
title: 'sidebar.completedTasks',
},
{
href: '/newTask',
title: 'sidebar.newTask',
},
],
},
{
href: '/team',
title: 'sidebar.team',
icon: 'fa-solid fa-user-plus fs-6',
},
{
href: '/report',
title: 'sidebar.report',
icon: 'fa-solid fa-bug fs-6',
},
];
// Create a reactive computed property for the translated menu
const translatedMenu = computed(() => {
return menu.map(item => ({
...item,
title: t(item.title),
child: item.child
? item.child.map(subItem => ({
...subItem,
title: t(subItem.title),
}))
: null,
}));
});
</script>
<style>
...
</style>Chaque élément du menu, ainsi que ses sous-éléments le cas échéant, est dynamiquement traduit à l’aide de t(item.title) et t(subItem.title) dans le tableau computed, qui crée une version réactive du menu, appelée translatedMenu. Cela garantit que les textes des menus, comme “dashboard”, “task” et d’autres titres, sont automatiquement mis à jour en fonction de la langue choisie. Grâce à ce mécanisme réactif, l’interface de l’application reste fluide et cohérente avec les préférences linguistiques de l’utilisateur, tout en permettant une gestion flexible des traductions dans le code.
Test
Pour tester si la traduction fonctionne correctement, rendez-vous dans votre navigateur et vérifiez que la langue de l’interface se met à jour en fonction de la sélection effectuée. Modifiez la langue à l’aide de votre mécanisme de sélection de langue (par exemple, un bouton ou un menu déroulant). Vous devriez observer que non seulement le texte du menu de la sidebar, mais aussi celui de la navbar, se traduit immédiatement, sans que la page soit rechargée. Cela confirme que la gestion dynamique des traductions fonctionne comme prévu et que l’interface s’adapte à la langue choisie par l’utilisateur en temps réel.
Conclusion
En conclusion, l’intégration de vue-i18n dans une application Nuxt.js offre une solution robuste pour la gestion multilingue, permettant aux utilisateurs de basculer entre différentes langues de manière fluide et en temps réel. Grâce à des fonctionnalités comme la fonction $t pour récupérer les traductions et le changement dynamique de locale, il est possible de fournir une expérience utilisateur inclusive et adaptable. En combinant vue-i18n avec des composants de l’interface, comme un menu déroulant de langue dans le header, on améliore considérablement l’accessibilité et l’utilisabilité de l’application pour des utilisateurs internationaux.
Développeuse Full-Stack avec une spécialisation dans les technologies web et une solide compréhension des enjeux climatiques. Diplômée de l'université Joseph Ki-Zerbo, Ouagadougou, Burkina en Informatique et Changement Climatique. Passionné par la création de solutions innovantes pour lutter contre le changement climatique. Compétences avancées en programmation et en analyse de données, associées à une expérience approfondie dans la modélisation climatique et la recherche scientifique.
