How to Translate a Vue.js Website (Vue I18n or No-Code)

Resume este post con: 8 minutos de lectura

ChatGPT

Perplejidad

Grok

Inteligencia artificial de Google

There are two ways to translate a Vue.js website. The developer route is Vue I18n: you move every piece of text into translation files, reference it with $t('key') o useI18n(), and supply a file per language. The no-code route is a website translation layer: you add one script to your index.html, and it translates the rendered page, including content that appears after navigation, without changing your components. Vue I18n makes sense when your team owns all the text and wants it in the codebase. A translation layer is quicker when you need the whole site in many languages, including content from a CMS or API.

Conclusiones clave

Vue I18n is the standard internationalization library for Vue. You create an i18n instance with createI18n, register it with app.use(i18n), and render text with $t() in templates or t() from useI18n().
Its Legacy API is deprecated in Vue I18n v11 and slated for removal in v12, so new projects should use the Composition API.
You still need to handle translated URLs, hreflang, <html lang>, and translating text that isn’t in your code (CMS content, product data).
A translation layer such as ConveyThis needs no code changes: add the script, choose languages, and edit translations in a visual editor.
With either method, client-side-only rendering is the weak point for SEO. Use Nuxt or prerendering if search traffic in other languages matters.

Option 1: Translate a Vue app with Vue I18n

Vue I18n is the internationalization plugin maintained by the Intlify team. A minimal Composition API setup takes four steps.

1. Instalar

npm install vue-i18n

2. Create the i18n instance with your 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. Register it with your app

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

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

4. Use it in components

<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>

Vue I18n’s documentation describes the key options: locale sets the active language, fallbackLocale is used when a translation key is missing, and messages holds the translations per locale. It also notes that the Legacy API “is deprecated Vue I18n v11, and drop Vue I18n v12”, so prefer legacy: false y useI18n() in new code.

What Vue I18n doesn’t do for you

Vue I18n translates the strings you give it. A multilingual website needs more than that:

Someone has to write every string in every language and keep them in sync as the app changes. Missing keys fall back to English without any warning.
Blog posts, product descriptions and anything fetched from a CMS or API are not in your message files. You need a separate localization process for those.
Language URLs are up to you. Add the locale to your routes (/fr/pricing) with Vue Router and keep the router and locale in sync. Google recommends a separate URL per language rather than switching by cookie or browser setting (Centro de búsqueda de Google).
So are hreflang tags and <html lang>. Each language version should list itself and all others (Centro de búsqueda de Google). Actualizar document.documentElement.lang when the locale changes.
For prices and dates, use Vue I18n’s number and date formatting (built on the browser’s Intl API) rather than formatting them by hand.
If you support many languages, load each locale’s messages on demand instead of bundling all of them.

Practical tips

Keep keys semantic (checkout.payButton), not sentence-based, so copy changes don’t break keys.
Don’t concatenate strings (t('hello') + name); use interpolation (t('hello', { name })) so translators can reorder words.
Use pluralization features instead of if (count === 1); many languages have more than two plural forms.
Leave room in the layout for longer text; German and French often run longer than English.
Test right-to-left languages early if you need Arabic or Hebrew.

Option 2: Translate a Vue site without code, with ConveyThis

If you’d rather not move every string into files, or much of your content comes from a CMS or API, a translation layer gets you there faster. ConveyThis translates what your Vue app renders in the browser.

Setup takes about 10 minutes:

Crea una cuenta ConveyThis y agrega tu dominio.
Choose your source language and target languages (210 are supported).
Copy the JavaScript snippet from your dashboard (see the JavaScript guía de integración).
Paste it into your app’s HTML entry point before the closing </head> o </body> tag. In a Vite project that’s index.html at the project root; in a Vue CLI project it’s public/index.html.
Deploy. A language switcher appears, and your content is translated automatically.

On a single-page app, the ConveyThis script watches the page for content that is added or changed after load, and it follows client-side route changes (History API navigation and hash changes). When Vue Router moves to a new view or a component renders new text, that text is picked up and translated. You don’t have to call anything from your components.

Mantienes el control de la salida:

Edit any translation in context with the visual editor.
Set glossary rules for product names and terms (paid plans), and reuse approved translations with translation memory.
Exclude elements that must not be translated by adding the conveythis-no-translate clase (cómo excluir segmentos), for example usernames or code snippets.
Invite reviewers with team roles.

SEO for Vue sites

A purely client-rendered Vue app ships an almost empty HTML shell and builds the page in the browser. Whichever method you choose, that hurts multilingual SEO, because the translated content isn’t in the initial HTML. If search traffic in other languages matters:

Use Nuxt (server-side rendering or static generation) or a prerendering step so each page’s content exists in HTML.
Proporcione a cada idioma su propia URL. ConveyThis admite subcarpetas, subdominios o a ?lang parameter, adds hreflang tags automatically, and translates page titles, meta descriptions and JSON-LD. See SEO multilingüe for how the URL modes work.
Check translated pages with Google Search Console’s URL Inspection to see what Google actually renders.

Vue I18n vs. a translation layer

	Vue I18n	ConveyThis
Cambios de código	Every string moved to message files	Una etiqueta de script
Quién traduce	Your team or translators, in files	Machine translation first draft, edited in a visual editor
Contenido de CMS / API	Needs a separate process	Traducido con la página
Nuevo contenido	Must be added to each locale file	Detectado y traducido automáticamente
Language URLs and hreflang	Tú los construyes	Construido en
Mejor para	Product UI owned by developers, few languages	Marketing sites and apps with lots of content, many languages

Many teams combine them: Vue I18n for core application UI where developers want full control, and a translation layer for marketing pages, docs and content from a CMS.

For the concepts behind all this, read our guide to internationalization (i18n). If you use React too, see how to translate a React website.

Preguntas frecuentes

How do I translate a Vue.js website?

Either use Vue I18n (move text into message files per language and render it with $t o 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().

To try the no-code route on your Vue site, crear una cuenta ConveyThis and paste the snippet into index.html.