# General Translation Knowledge Base: Comment traduire une application Vue ? URL: https://generaltranslation.com/fr/kb/translate-vue-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traduire une application Vue consiste à faire passer chaque chaîne de caractères des modèles par une recherche dans la langue active, puis à la traduire dans chaque langue cible. Le plugin gt-vue de General Translation traduit le contenu encapsulé dans le composant ``, et npx gt translate génère un catalogue par langue cible. Category: Internationalisation Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Traduire une application Vue consiste à l’internationaliser (la préparer à afficher chaque chaîne de caractères, pluriel, nombre et date dans la langue active), puis à traduire chaque chaîne dans chaque langue cible. Chaque retouche du texte modifie le texte source : à chaque livraison, les traductions prennent donc du retard si elles ne sont pas régénérées. Les langues ont en outre des grammaires différentes (l’anglais compte 2 formes du pluriel, l’arabe 6), et la page doit être réaffichée lorsqu’un utilisateur change de langue. ## Video The video is narrated in English, with English captions. [How do I translate a Vue app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-vue-app.mp4) (48 s) General Translation lets you register the `gt-vue` plugin and wrap your template in `T`. List your languages, register the plugin before the app mounts, run `npx gt translate`, and add a switcher built on `useSetLocale`. The `gt-vue` package is a 0.x release whose API may still change. ## Méthodes pour traduire une application Vue | Approche | Ses points forts | Ce qui reste à votre charge | | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Une bibliothèque d'internationalisation (i18n) seule ([`vue-i18n`](/kb/general-translation-vs-vue-i18n)) | Recherche les messages par clé avec `$t`, change de paramètre régional sur place, sélectionne les formes du pluriel et formate les nombres et les dates selon le paramètre régional | Inventer une clé pour chaque chaîne de caractères, déplacer le texte dans un fichier de messages par langue, définir des `pluralRules` personnalisées pour des langues comme le russe, et rédiger chaque traduction | | `@nuxtjs/i18n` (Nuxt) | S'appuie sur `vue-i18n` et ajoute des routes préfixées par le paramètre régional, la détection de la langue du navigateur, le chargement différé des traductions et les balises hreflang | Les mêmes clés, fichiers de messages et traductions qu'avec `vue-i18n` | | Un système de gestion de la traduction ([Crowdin](/kb/general-translation-vs-crowdin), [Lokalise](/kb/general-translation-vs-lokalise)) | Un éditeur web, synchronisé avec vos fichiers de messages, où les traducteurs travaillent avec un glossaire et une mémoire de traduction | Les clés et les fichiers de messages dans le code, la configuration initiale de la synchronisation et l'attente des traducteurs avant chaque livraison | | General Translation (`gt-vue` et la CLI `gt`) | [``](/docs/vue/reference/components/t) traduit le contenu des modèles sur place, sans clés ; [``](/docs/vue/reference/components/plural) à l'intérieur de [``](/docs/vue/reference/components/t) choisit la forme du pluriel propre à chaque paramètre régional selon les règles CLDR ; [`npx gt translate`](/docs/cli/reference/commands/translate) génère un catalogue par langue cible ; [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) change de langue sans rechargement | Encapsuler le contenu des modèles dans [``](/docs/vue/reference/components/t) et effectuer une configuration initiale ponctuelle (configuration, loader et plugin) ; relancer [`npx gt translate`](/docs/cli/reference/commands/translate) lorsque le contenu source change ; suivre les évolutions de l'API entre les versions 0.x | Utilisez `vue-i18n` seul si vos chaînes sont peu nombreuses et stables, ou déjà traduites dans des fichiers de messages, et ajoutez `@nuxtjs/i18n` dans une application Nuxt qui a besoin de routes localisées. Optez pour un système de gestion de la traduction si une équipe de localisation traduit manuellement chaque livraison. Choisissez `gt-vue` si vos modèles changent à chaque livraison et que vous souhaitez générer les traductions à partir du code, sans clés à synchroniser. ## Traduire une application Vue avec gt-vue Le package `gt-vue` de General Translation s'exécute en tant que plugin Vue, et la CLI `gt` génère les traductions. 1. Dans `gt.config.json`, indiquez votre langue source dans `defaultLocale`, vos langues cibles dans `locales` et le chemin du catalogue dans `files.gt.output`. 2. Enregistrez le plugin [`createGT()`](/docs/vue/reference/functions/create-gt) avant de monter l'application. 3. Encapsulez le contenu du modèle dans le composant [``](/docs/vue/reference/components/t). Pour les chaînes autonomes, comme l'espace réservé d'un champ de saisie, utilisez la fonction renvoyée par [`useGT()`](/docs/vue/reference/composables/use-gt). ```vue ``` 4. Connectez-vous avec [`npx gt login`](/docs/cli/reference/commands/login) et définissez votre identifiant de projet. 5. Exécutez [`npx gt translate`](/docs/cli/reference/commands/translate) : la commande analyse votre code source Vue et écrit un catalogue JSON par langue cible dans le chemin `files.gt.output`. La CLI extrait la structure du modèle : le texte, les éléments imbriqués et le formatage sont ainsi traduits comme une seule unité. La prop `context` de [``](/docs/vue/reference/components/t) permet de préciser si « Open » est un verbe ou un adjectif. ## Traduire à chaque compilation Placez [`npx gt translate`](/docs/cli/reference/commands/translate) avant `vite build` dans votre script de compilation, en définissant `GT_PROJECT_ID` et `GT_API_KEY` dans l’environnement de compilation : ainsi, chaque déploiement embarque des catalogues à jour. Le [Démarrage rapide Vue](/docs/vue/quickstart) détaille toutes les étapes, y compris la configuration du chargeur de traductions et d’un sélecteur de langue. ## Related questions - [Comment traduire une application React ?](https://generaltranslation.com/fr/kb/translate-react-app.mdx): Traduire une application React consiste à internationaliser ses composants pour qu’ils s’affichent dans la langue de l’utilisateur, puis à traduire chaque chaîne de caractères dans chacune des langues prises en charge. gt-react de General Translation traduit le JSX sur place dans le composant ``, et npx gt translate génère un fichier par langue. - [Comment ajouter l’i18n à une application Next.js App Router ?](https://generaltranslation.com/fr/kb/add-i18n-to-nextjs.mdx): Commencez par gt init pour configurer General Translation dans un projet App Router pris en charge, puis balisez le contenu source, générez les traductions et vérifiez le changement de langue. gt-next conserve les textes dans le JSX avec leur contexte de traduction ; la CLI, l’éditeur du tableau de bord et Locadex prennent en charge la génération, la relecture et les mises à jour continues. Ce guide présente également la configuration initiale explicite avec des fichiers locaux. - [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Les bibliothèques gt-react et gt-next de General Translation permettent d’internationaliser React et Next.js sans clés de traduction ni fichier JSON par langue à maintenir. Le texte reste intégré au JSX, dans le composant ``, et la commande gt translate génère les traductions de chaque langue lors de la compilation, en s’appuyant sur le contexte de votre code. Locadex peut les tenir à jour via des pull requests. - [Comment maintenir les traductions à jour à chaque déploiement ?](https://generaltranslation.com/fr/kb/translations-in-ci.mdx): Exécutez la traduction comme une étape du pipeline avant chaque compilation de production, afin que les nouveaux textes soient livrés traduits avec le déploiement qui les ajoute. Le CLI gt de General Translation s’en charge avec npx gt translate, à l’aide d’une clé API de projet et d’un identifiant de projet stockés comme secrets CI. ## Previous and next questions - Previous question: [Comment traduire une application React Native ?](https://generaltranslation.com/fr/kb/translate-react-native-app.mdx) - Next question: [Que fait l’agent Locadex ?](https://generaltranslation.com/fr/kb/what-is-locadex.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.