Magic Translate vs. vue-i18n

vue-i18n is the standard i18n library for Vue, and @nuxtjs/i18n builds on it for Nuxt. Like most i18n libraries, it uses a key for every text and a set of messages per language. Magic Translate translates the text in your Vue templates directly, without keys or message files.

At a glance

	Magic Translate	vue-i18n
How you write text	Your own words, wrapped in `<T>`	A key per text, such as `$t('cart.title')`
Translations	AI translation, created automatically	You or your translators write them
Message files	None	One set of messages per language
New languages	Change the `language` setting	Translate every message into the new language
Switching languages	At runtime, with `useLanguageSwitcher`	At runtime, by changing the locale
Plurals and formatting	Translated as part of the sentence	Built in, with plural rules and number and date formats
Price	Free plan, then monthly plans based on usage	Open source and free

How the code differs

With vue-i18n, you define the messages for each language and refer to them by key:

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

export const i18n = createI18n({
  locale: 'de',
  messages: {
    en: { cart: { title: 'Your shopping cart' } },
    de: { cart: { title: 'Ihr Warenkorb' } }
  }
});

<h2>{{ $t('cart.title') }}</h2>

With Magic Translate, the text stays in the template:

<h2><T>Your shopping cart</T></h2>

For attributes such as placeholders, use useTranslate:

<input :placeholder="t('Search products')" />

When to choose Magic Translate

You want your Vue app in many languages without managing messages for each one.
You don't have translators, or you don't want to wait for them before you release.
Your texts change often, and you want every language to stay up to date.

When to choose vue-i18n

Every text must be translated or reviewed by a person.
You need search engines to see translated HTML from Nuxt server rendering. Magic Translate for Vue translates in the browser.
You want a free, open-source library with no external service.

Moving from vue-i18n to Magic Translate

You can switch one component at a time. Replace $t('key') with the English text from your messages, wrapped in <T>, or use t() from useTranslate for attributes. Both libraries can run side by side while you migrate. The Vue guide shows the setup.

Ready to try it? Follow the getting started guide to translate your first component in five minutes.