Comment Traduire un Site Vue.js / Nuxt en Plusieurs Langues (Guide 2026)

Vue.js et Nuxt alimentent des millions de sites web et d'applications dans le monde. Mais pour l'ajout du support multilingue, l'écosystème Vue a historiquement été plus fragmenté que celui de React — laissant les développeurs assembler des solutions à partir de multiples bibliothèques et configurations manuelles.

En 2026, vous avez trois voies solides : vue-i18n (la bibliothèque officielle d'internationalisation Vue), @nuxtjs/i18n (le module Nuxt qui enveloppe vue-i18n avec routing et SEO), et LingoJS (l'approche à un script qui fonctionne avec tout projet Vue ou Nuxt sans toucher à votre code).

Ce guide parcourt les trois approches — avec des exemples de code réels, des temps de configuration et un cadre clair pour choisir la bonne.

Pourquoi le Multilingue Vue.js est Important en 2026

Vue.js est le deuxième framework frontend le plus populaire au monde, et Nuxt est le méta-framework Vue le plus utilisé. Des entreprises comme Nintendo, GitLab, Adobe et BMW utilisent Vue en production. Si votre app Vue ne parle qu'une langue, vous êtes invisible pour une partie significative de votre audience potentielle.

Les chiffres sont clairs : 75% des utilisateurs préfèrent acheter sur des sites dans leur langue maternelle, et les pages localisées se classent systématiquement mieux dans les moteurs de recherche régionaux. Pour les sites Nuxt — qui reposent sur le SSR et la génération statique pour le SEO — traduire votre contenu débloque du trafic organique dans chaque marché que vous ciblez.

Approche 1 : vue-i18n — La Bibliothèque Officielle

vue-i18n est la bibliothèque standard d'internationalisation pour Vue.js, maintenue par l'équipe cœur de Vue. Elle s'intègre avec la Composition API de Vue 3 et fournit la traduction réactive, la pluralisation, le formatage de dates et le changement de locale.

Configuration

npm install vue-i18n@10

// i18n.ts
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import fr from './locales/fr.json';
 
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, fr }
});
 
export default i18n;

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';
 
const app = createApp(App);
app.use(i18n);
app.mount('#app');

Dans vos composants, vous utilisez la fonction $t() :

<template>
  <h1>{{ $t('hero.title') }}</h1>
  <p>{{ $t('hero.subtitle') }}</p>
</template>

Ce qui fonctionne bien

vue-i18n est rapide, bien documenté et étroitement intégré au système de réactivité de Vue. Le chargement paresseux des fichiers de locale est supporté nativement. Le support de la Composition API (useI18n()) est propre et idiomatique.

Ce qui devient compliqué

Chaque chaîne à traduire doit être enveloppée dans $t() ou t() dans vos templates. Cela signifie toucher chaque composant qui affiche du texte. Les fichiers de traduction sont des JSON que vous maintenez manuellement. Ajouter une nouvelle langue signifie copier tout le fichier JSON anglais et traduire chaque entrée. Pour une app Vue de taille moyenne avec plus de 500 chaînes traduisibles réparties sur 20 composants, cela représente des jours de configuration initiale et de maintenance continue.

Le SEO est également manuel — vous devez configurer les balises hreflang, les métadonnées localisées et un sitemap multilingue vous-même ou via un module Nuxt.

Approche 2 : @nuxtjs/i18n — Le Module Nuxt

Si vous utilisez Nuxt 3, le module @nuxtjs/i18n enveloppe vue-i18n et ajoute la génération automatique de routes, la détection de locale, les balises SEO et les stratégies d'URL. C'est la solution i18n la plus complète pour les projets Nuxt.

Configuration

npx nuxi module add i18n

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'fr', 'de', 'es', 'it'],
    defaultLocale: 'en',
    strategy: 'prefix',
    vueI18n: './i18n.config.ts'
  }
});

Le module génère automatiquement des routes par locale (/fr/about, /de/about), injecte les balises hreflang et fournit des composables comme useLocalePath() et useSwitchLocalePath() pour construire des sélecteurs de langue.

Ce qui fonctionne bien

La génération de routes et l'automatisation des hreflang économisent des heures de configuration manuelle. L'option strategy supporte les modes prefix (/fr/about), prefix sauf défaut (/about + /fr/about) et sans prefix. Les métadonnées SEO par locale sont gérées via useSeoMeta() en combinaison avec le module i18n.

Ce qui nécessite encore du travail

Vous écrivez toujours chaque traduction manuellement dans des fichiers JSON. Le module gère la couche de routage mais ne traduit pas votre contenu — il sert seulement le bon fichier pour chaque locale. Pour un site Nuxt avec un blog, de la documentation ou du contenu généré par les utilisateurs, la charge de maintenance des fichiers de traduction croît linéairement avec chaque page ajoutée.

Approche 3 : LingoJS — Un Script, Zéro Modification de Code

LingoJS fonctionne avec tout projet Vue ou Nuxt sans aucune modification de code. Vous ajoutez une balise script à votre template HTML (ou utilisez le composable useHead de Nuxt pour le script), et LingoJS détecte, traduit et sert automatiquement votre contenu dans chaque langue que vous activez.

Configuration pour Vue

<!-- index.html -->
<script
  src="https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

Configuration pour Nuxt

<!-- app.vue -->
<script setup>
useHead({
  script: [
    {
      src: 'https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js',
      async: true,
      'data-api-key': 'YOUR_API_KEY'
    }
  ]
});
</script>

C'est tout. LingoJS gère tout automatiquement — détection du texte dans les composants Vue, traduction IA contextuelle, livraison CDN à ~26ms, balises hreflang, métadonnées localisées, schema.org et widget de sélection de langue.

Comparaison : Vue-i18n vs Nuxt-i18n vs LingoJS

Performance : Quel Impact a la Traduction ?

vue-i18n chargé avec une seule locale ajoute environ 12KB à votre bundle Vue. Chaque locale supplémentaire chargée ajoute la taille de son fichier JSON. Pour un site Nuxt utilisant le SSR, le serveur doit charger et traiter ces fichiers à chaque requête.

LingoJS se charge de manière asynchrone depuis le CDN global de jsDelivr. Le script ne bloque pas le rendu, et les traductions sont mises en cache à la périphérie. Résultat : les Core Web Vitals de votre app Vue ne sont pas affectés.

SEO pour les Sites Multilingues Vue/Nuxt

Le SSR et la génération statique de Nuxt donnent déjà une base SEO solide. Mais ajouter des langues multiplie la complexité :

• Balises hreflang doivent être présentes sur chaque variante de page, réciproques et pointer vers la bonne URL de locale
• URLs canoniques doivent référencer la bonne version linguistique
• Balises meta (title, description, og:title, og:description) doivent être traduites par locale
• Données structurées (schema.org) doivent être localisées
• Sitemaps multilingues aident Google à découvrir chaque version linguistique

@nuxtjs/i18n gère la génération hreflang automatiquement en mode prefix. vue-i18n seul ne fait rien de tout cela. LingoJS gère tout automatiquement, y compris les métadonnées traduites et schema.org, sans configuration.

Quand Utiliser Chaque Approche

Utilisez vue-i18n si : Vous construisez une SPA Vue pure (sans Nuxt), avez besoin de contrôle par chaîne sur les traductions, avez un nombre limité de chaînes à traduire, ou avez déjà une équipe de traduction interne produisant des fichiers JSON.

Utilisez @nuxtjs/i18n si : Vous êtes sur Nuxt 3, voulez la génération automatique de routes et les bases SEO gérées, et êtes à l'aise avec la maintenance de fichiers de traduction.

Utilisez LingoJS si : Vous voulez que votre site Vue ou Nuxt soit multilingue aujourd'hui sans modifier les composants, gérer des fichiers de traduction ou configurer le SEO. Vous valorisez la rapidité d'ingénierie, avez un site riche en contenu ou êtes une petite équipe qui ne peut pas dédier de ressources à la maintenance i18n.

Comment Démarrer

Pour évaluer l'approche zéro-code, installez LingoJS sur votre projet Vue ou Nuxt en deux minutes :

1. Créez un compte gratuit sur lingojs.com
2. Récupérez votre clé API dans le dashboard
3. Ajoutez la balise script à votre template HTML ou app.vue
4. Choisissez vos langues cibles dans le dashboard
5. Déployez — votre site est maintenant multilingue

Commencez votre essai gratuit de 30 jours →