How do I translate a Vue.js website?

Either use Vue I18n (move text into message files per language and render it with $t or useI18n) or add a website translation script such as ConveyThis to index.html, which translates the rendered page without code changes.

What is the best i18n library for Vue?

Vue I18n is the standard choice for Vue 3. Use its Composition API (legacy: false), since the Legacy API is deprecated in v11.

Does ConveyThis work with Vue Router?

Yes. The script follows client-side route changes and watches for newly rendered content, so each new view is translated when users open it.

Is a client-side Vue app bad for multilingual SEO?

It's harder, because content isn't in the initial HTML. Use Nuxt or prerendering, separate URLs per language and hreflang tags for the best results.

Can I stop some parts of my Vue app from being translated?

With ConveyThis, add the conveythis-no-translate class to any element. With Vue I18n, don't pass that text through t().

Comment traduire un site Web Vue.js (Vue I18n ou No-Code)

Résumez ce post avec : 8 minutes de lecture

Il existe deux façons de traduire un site Web Vue.js. La voie du développeur est Vue I18n : vous déplacez chaque morceau de texte dans des fichiers de traduction, référencez-le avec $t('key') ou useI18n(), et fournir un fichier par langue. La route sans code est une couche de traduction de site Web : vous ajoutez un script à votre index.html, et il traduit la page rendue, y compris le contenu qui apparaît après la navigation, sans modifier vos composants. Vue I18n a du sens lorsque votre équipe possède tout le texte et le souhaite dans la base de code. Une couche de traduction est plus rapide lorsque vous avez besoin de l'ensemble du site dans de nombreuses langues, y compris le contenu d'un CMS ou d'une API.

Principaux points à retenir

Vue I18n est la bibliothèque d'internationalisation standard pour Vue. Vous créez un i18n exemple avec createI18n, enregistrez-le avec app.use(i18n), et restituer le texte avec $t() dans des modèles ou t() de useI18n().
Son API Legacy est obsolète dans Vue I18n v11 et devrait être supprimée dans la v12, les nouveaux projets doivent donc utiliser l'API Composition.
Vous devez toujours gérer les URL traduites, hreflang, <html lang>, et traduire du texte qui ne figure pas dans votre code (contenu CMS, données produit).
Une couche de traduction telle que ConveyThis ne nécessite aucune modification de code : ajoutez le script, choisissez les langues et modifiez les traductions dans un éditeur visuel.
Quelle que soit la méthode utilisée, le rendu côté client uniquement constitue le point faible du référencement. Utilisez Nuxt ou le pré-rendu si le trafic de recherche dans d'autres langues est important.

Option 1 : Traduire une application Vue avec Vue I18n

Vue I18n est le plugin d'internationalisation maintenu par l'équipe Intlify. Une configuration minimale de l'API de composition se déroule en quatre étapes.

1. Installer

npm install vue-i18n

2. Créez l'instance i18n avec vos messages

// src/i18n.js
import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    nav: { home: 'Home', pricing: 'Pricing' },
    hero: { title: 'Translate your store in minutes' },
  },
  fr: {
    nav: { home: 'Accueil', pricing: 'Tarifs' },
    hero: { title: 'Traduisez votre boutique en quelques minutes' },
  },
};

export const i18n = createI18n({
  legacy: false, // use the Composition API
  locale: 'en', // active language
  fallbackLocale: 'en', // used when a key is missing
  messages,
});

3. Enregistrez-le avec votre application

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { i18n } from './i18n';

createApp(App).use(i18n).mount('#app');

4. Utilisez-le dans les composants

<script setup>
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ t('hero.title') }}</h1>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="fr">Français</option>
  </select>
</template>

La documentation de Vue I18n décrit les options clés : locale définit la langue active, fallbackLocale est utilisé lorsqu'une clé de traduction est manquante, et messages contient les traductions par lieu. Il note également que l'API Legacy “est obsolète Vue I18n v11 et supprime Vue I18n v12”, donc préférez legacy: false et useI18n() dans un nouveau code.

Ce que Vue I18n ne fait pas pour vous

Vue I18n traduit les chaînes que vous lui donnez. Un site Web multilingue a besoin de plus que cela :

Quelqu'un doit écrire chaque chaîne dans chaque langue et les garder synchronisées à mesure que l'application change. Les clés manquantes reviennent à l'anglais sans aucun avertissement.
Les articles de blog, les descriptions de produits et tout ce qui est extrait d'un CMS ou d'une API ne figurent pas dans vos fichiers de messages. Vous avez besoin d’un processus de localisation distinct pour ceux-ci.
Les URL de langue dépendent de vous. Ajoutez les paramètres régionaux à vos itinéraires (/fr/pricing) avec Vue Router et gardez le routeur et locale synchronisé. Google recommande une URL distincte par langue plutôt que de passer par un cookie ou un paramètre de navigateur (Recherche Google Central).
Il en va de même pour les balises hreflang et <html lang>. Chaque version linguistique doit s'auto-énumérer ainsi que toutes les autres (Recherche Google Central). Mise à jour document.documentElement.lang lorsque les paramètres régionaux changent.
Pour les prix et les dates, utilisez le formatage des numéros et des dates de Vue I18n (construit sur le navigateur Intl API) plutôt que de les formater à la main.
Si vous prenez en charge plusieurs langues, chargez les messages de chaque langue locale à la demande au lieu de les regrouper tous.

Conseils pratiques

Gardez les clés sémantiques (checkout.payButton), pas basé sur des phrases, donc les modifications de copie ne cassent pas les touches.
Ne concaténez pas de chaînes (t('hello') + name); utiliser l'interpolation (t('hello', { name })) afin que les traducteurs puissent réorganiser les mots.
Utilisez des fonctionnalités de pluralisation au lieu de if (count === 1); de nombreuses langues ont plus de deux formes plurielles.
Laissez de la place dans la mise en page pour un texte plus long ; l'allemand et le français sont souvent plus longs que l'anglais.
Testez tôt les langues de droite à gauche si vous avez besoin d’arabe ou d’hébreu.

Option 2 : Traduire un site Vue sans code, avec ConveyThis

Si vous préférez ne pas déplacer chaque chaîne dans des fichiers, ou si une grande partie de votre contenu provient d'un CMS ou d'une API, une couche de traduction vous y amène plus rapidement. ConveyThis traduit ce que votre application Vue restitue dans le navigateur.

L'installation prend environ 10 minutes :

Créer un compte ConveyThis et ajoutez votre domaine.
Choisissez votre langue source et vos langues cibles (210 sont prises en charge).
Copiez l'extrait JavaScript de votre tableau de bord (voir le JavaScript guide d'intégration).
Collez-le dans le point d'entrée HTML de votre application avant la fermeture </head> ou </body> étiqueter. Dans un projet Vite qui est index.html à la racine du projet ; dans un projet Vue CLI, c'est public/index.html.
Déployer. Un sélecteur de langue apparaît et votre contenu est traduit automatiquement.

Sur une application d'une seule page, le script ConveyThis surveille la page pour détecter le contenu ajouté ou modifié après le chargement, et il suit les modifications d'itinéraire côté client (navigation de l'API d'historique et modifications de hachage). Lorsque Vue Router passe à une nouvelle vue ou qu'un composant restitue un nouveau texte, ce texte est récupéré et traduit. Vous n'avez rien à appeler depuis vos composants.

Vous gardez le contrôle de la sortie :

Modifiez toute traduction en contexte avec l'éditeur visuel.
Définissez des règles de glossaire pour les noms et termes de produits (plans payants) et réutilisez les traductions approuvées avec la mémoire de traduction.
Exclure les éléments qui ne doivent pas être traduits en ajoutant le conveythis-no-translate classe (comment exclure des segments), par exemple des noms d'utilisateur ou des extraits de code.
Invitez des réviseurs avec des rôles d’équipe.

SEO pour les sites Vue

Une application Vue purement rendue par le client expédie un shell HTML presque vide et crée la page dans le navigateur. Quelle que soit la méthode choisie, cela nuit au référencement multilingue, car le contenu traduit ne figure pas dans le HTML initial. Si le trafic de recherche dans d’autres langues est important :

Utilisez Nuxt (rendu côté serveur ou génération statique) ou une étape de pré-rendu afin que le contenu de chaque page existe en HTML.
Donnez à chaque langue sa propre URL. ConveyThis prend en charge les sous-dossiers, les sous-domaines ou un ?lang paramètre, ajoute automatiquement les balises hreflang et traduit les titres des pages, les méta descriptions et JSON-LD. Voir référencement multilingue pour savoir comment fonctionnent les modes URL.
Vérifiez les pages traduites avec l'inspection d'URL de Google Search Console pour voir ce que Google restitue réellement.

Vue I18n vs. une couche de traduction

	Vue I18n	ConveyThis
Modifications du code	Chaque chaîne déplacée vers les fichiers de messages	Une balise de script
Qui traduit	Votre équipe ou vos traducteurs, dans des fichiers	Traduction automatique première ébauche, éditée dans un éditeur visuel
Contenu CMS / API	Nécessite un processus distinct	Traduit avec la page
Nouveau contenu	Doit être ajouté à chaque fichier local	Détecté et traduit automatiquement
URL de langue et hreflang	Vous les construisez	Construit en
Idéal pour	Interface utilisateur du produit appartenant à des développeurs, peu de langues	Sites et applications marketing avec beaucoup de contenu, de nombreuses langues

De nombreuses équipes les combinent : Vue I18n pour l'interface utilisateur principale de l'application où les développeurs souhaitent un contrôle total, et une couche de traduction pour les pages marketing, les documents et le contenu d'un CMS.

Pour connaître les concepts derrière tout cela, lisez notre guide de l'internationalisation (i18n). Si vous utilisez React aussi, voir comment traduire un site Web React.

FAQ

Comment traduire un site Web Vue.js ?

Utilisez soit Vue I18n (déplacez le texte dans les fichiers de messages par langue et restituez-le avec $t ou useI18n) ou ajoutez un script de traduction de site Web tel que ConveyThis à index.html, qui traduit la page rendue sans modifications de code.

Quelle est la meilleure bibliothèque i18n pour Vue ?

Vue I18n est le choix standard pour Vue 3. Utilisez son API de composition (legacy: false), puisque l'API Legacy est obsolète dans la v11.

Est-ce que ConveyThis fonctionne avec Vue Router ?

Oui. Le script suit les changements d'itinéraire côté client et surveille le contenu nouvellement rendu, de sorte que chaque nouvelle vue est traduite lorsque les utilisateurs l'ouvrent.

Une application Vue côté client est-elle mauvaise pour le référencement multilingue ?

C'est plus difficile, car le contenu n'est pas dans le HTML initial. Utilisez Nuxt ou le pré-rendu, des URL séparées par langue et des balises hreflang pour obtenir les meilleurs résultats.

Puis-je empêcher la traduction de certaines parties de mon application Vue ?

Avec ConveyThis, ajoutez le conveythis-no-translate classe à n'importe quel élément. Avec Vue I18n, ne transmettez pas ce texte t().

Pour essayer l'itinéraire sans code sur votre site Vue, créer un compte ConveyThis et collez l'extrait dans index.html.