# General Translation Knowledge Base: How do I translate a Vue app? URL: https://generaltranslation.com/en-GB/kb/translate-vue-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Translating a Vue app means putting each template string behind a lookup for the active language and translating it into every target language. General Translation's gt-vue plugin translates content wrapped in the `` component, and npx gt translate writes one catalogue per target language. Category: Internationalisation Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Translating a Vue app means internationalising it (preparing it to show each string, plural, number and date in the active language) and then translating every string into each target language. Every copy edit changes the source text, so translations fall behind with each release unless they are regenerated. Languages also differ in grammar (English has 2 plural forms, Arabic has 6), and the page must re-render when a user switches language. ## 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 secs) 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. ## Ways to translate a Vue app | Approach | What it does well | What it leaves to you | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | An internationalisation (i18n) library alone ([`vue-i18n`](/kb/general-translation-vs-vue-i18n)) | Looks up messages by key with `$t`, switches locale in place, selects plural forms, and formats numbers and dates per locale | Inventing a key for every string, moving text into a message file per language, custom `pluralRules` for languages such as Russian, and writing every translation | | `@nuxtjs/i18n` (Nuxt) | Builds on `vue-i18n` and adds locale-prefixed routes, browser-language detection, lazy-loaded translations, and hreflang tags | The same keys, message files, and translations that `vue-i18n` leaves to you | | A translation management system ([Crowdin](/kb/general-translation-vs-crowdin), [Lokalise](/kb/general-translation-vs-lokalise)) | A web editor where translators work with a glossary and translation memory, synced with your message files | Keys and message files in the code, the sync set-up, and waiting for translators before each release | | General Translation (`gt-vue` and the `gt` CLI) | [``](/docs/vue/reference/components/t) translates template content in place, with no keys; [``](/docs/vue/reference/components/plural) inside [``](/docs/vue/reference/components/t) picks each locale's plural form by CLDR rules; [`npx gt translate`](/docs/cli/reference/commands/translate) writes a catalogue per target language; [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) switches language without a reload | Wrapping template content in [``](/docs/vue/reference/components/t) and a one-off set-up (config, loader and plugin); rerunning [`npx gt translate`](/docs/cli/reference/commands/translate) when source content changes; tracking API changes between 0.x releases | Use `vue-i18n` alone when your strings are few and stable, or already translated in message files, and add `@nuxtjs/i18n` in a Nuxt app that needs localised routes. Use a translation management system when a localisation team translates each release by hand. Use `gt-vue` when templates change with every release and you want translations generated from the code, with no keys to keep in sync. ## Translate a Vue app with gt-vue General Translation's `gt-vue` package runs as a Vue plugin, and the `gt` CLI generates the translations. 1. In `gt.config.json`, set your source language as `defaultLocale`, your target languages as `locales`, and the catalogue path as `files.gt.output`. 2. Register the [`createGT()`](/docs/vue/reference/functions/create-gt) plugin before you mount the app. 3. Wrap template content in the [``](/docs/vue/reference/components/t) component. For standalone strings, such as an input placeholder, use the function returned by [`useGT()`](/docs/vue/reference/composables/use-gt). ```vue ``` 4. Sign in with [`npx gt login`](/docs/cli/reference/commands/login) and set your project ID. 5. Run [`npx gt translate`](/docs/cli/reference/commands/translate), which scans your Vue source and writes one JSON catalogue per target language to the `files.gt.output` path. The CLI extracts the template structure, so text, nested elements and formatting are translated as one unit. The `context` prop on [``](/docs/vue/reference/components/t) indicates whether "Open" is a verb or an adjective. ## Translate on every build Put [`npx gt translate`](/docs/cli/reference/commands/translate) before `vite build` in your build script, with `GT_PROJECT_ID` and `GT_API_KEY` set in the build environment, so that every deployment ships up-to-date catalogues. The [Vue Quickstart](/docs/vue/quickstart) covers the full steps, including the translation loader and a language switcher. ## Related questions - [How do I translate a React app?](https://generaltranslation.com/en-GB/kb/translate-react-app.mdx): Translating a React app means internationalising its components so they render in the user's language, then translating every string into each language you support. General Translation's gt-react translates JSX in place in the `` component, and npx gt translate writes one file per language. - [How do I add i18n to a Next.js App Router app?](https://generaltranslation.com/en-GB/kb/add-i18n-to-nextjs.mdx): Start with gt init to configure General Translation in a supported App Router project, then mark source content, generate translations and verify language switching. gt-next keeps copy in JSX with translation context; the CLI, Dashboard editor and Locadex handle generation, review and ongoing updates. This guide also shows the explicit local-file set-up. - [Can I do i18n without translation files?](https://generaltranslation.com/en-GB/kb/i18n-without-translation-files.mdx): Yes. General Translation's gt-react and gt-next libraries do React and Next.js i18n with no translation keys and no JSON file per language to maintain. Copy stays inline in JSX inside the `` component, and the gt translate command generates each language's translations in your build, with context from your code. Locadex can keep them up to date through pull requests. - [How do I keep translations up to date on every deploy?](https://generaltranslation.com/en-GB/kb/translations-in-ci.mdx): Run translation as a pipeline step before each production build, so new copy ships translated with the deploy that adds it. General Translation's gt CLI does this with npx gt translate, using a project API key and project ID stored as CI secrets. ## Previous and next questions - Previous question: [How do I translate a React Native app?](https://generaltranslation.com/en-GB/kb/translate-react-native-app.mdx) - Next question: [How do I translate content in Sanity?](https://generaltranslation.com/en-GB/kb/translate-sanity-content.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/en-GB/kb/sitemap.md) for every article.