Magic Translate vs. vue-i18n

vue-i18n は Vue の標準i18nライブラリで、@nuxtjs/i18n は Nuxt の標準ライブラリに基づいて構築されている。ほとんどのi18nライブラリと同様に、メッセージごとにキーを使用し、言語ごとに一連のメッセージを使用する。Magic Translate は Vue テンプレートのテキストを、キーやメッセージファイルなしで直接翻訳する。

一目で

	Magic Translate	vue-i18n
テキストの書き方	`<T>` で包まれた、あなた自身の言葉	`$t('cart.title')` など、各メッセージのキー
翻訳	AI翻訳、自動的に作成された	あなたやあなたの翻訳者が書く
メッセージファイル	何もない	言語ごとに1セットのメッセージ
新しい言語	`language` 設定を変えて	すべてのメッセージを新しい言語に翻訳する
言語を切り替える	実行時に `useLanguageSwitcher` と	実行時に、ロケールを変更して
複数形と書式設定	文の一部として翻訳された	複数形のルールと日付と数字のフォーマットが組み込まれている
価格	無料プラン、そして使用量に応じた月額プラン	オープンソースで無料

コードの違い

vue-i18n では、各言語のメッセージを定義して、キーで参照する。

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

Magic Translate を使うと、テキストはテンプレートに残る:

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

プレースホルダーなどの属性には、useTranslate を使う:

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

Magic Translate を選ぶタイミング

各言語のメッセージを管理せずに、Vue アプリを複数の言語に対応させたい。
翻訳者がいない、または翻訳を待たずにアップデートをリリースしたい。
テキストは頻繁に変わるし、すべての言語を最新の状態に保ちたい。

vue-i18n を選ぶタイミング

すべてのテキストは、人が翻訳またはレビューする必要がある。
Nuxt サーバーレンダリングから翻訳されたHTMLを見るには検索エンジンが必要だ。Vue の Magic Translate はブラウザで翻訳される。
外部サービスのない、無料のオープンソースの図書館が欲しい。

vue-i18n から Magic Translate に移動する

一度に1つのコンポーネントを切り替えることができる。$t('key') をメッセージに含まれる英語のテキストに <T> で囲んで置き換えるか、属性には useTranslate の t() を使う。移行中は、両方のライブラリを並行して実行できる。Vue ガイドにはセットアップが示されている。

試す準備はできた？入門ガイドに従って、最初のコンポーネントを5分で翻訳する。