How do I translate a Vue.js website?

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

Vue。js ウェブサイトを翻訳する方法（Vue I18n または No-Code）

この投稿を次のように要約します: 8分で読めます

チャットGPT

困惑

グロック

Google AI

Vue。js Web サイトを翻訳するには 2 つの方法があります。開発者ルートはVue I18nです。すべてのテキストを翻訳ファイルに移動し、参照します $t('key') または useI18n()、言語ごとにファイルを提供します。ノーコードルートは Web サイトの翻訳レイヤーです。スクリプトを 1 つ追加します index.html、そして、コンポーネントを変更せずに、ナビゲーション後に表示されるコンテンツを含むレンダリングされたページを翻訳します。Vue I18n は、チームがすべてのテキストを所有し、それをコードベースに含めたい場合に意味を持ちます。CMS や API のコンテンツなど、サイト全体を多くの言語で必要とする場合、翻訳レイヤーの方が高速になります。

主なポイント

Vue I18n は、Vue の標準国際化ライブラリです。を作成します i18n インスタンス付き createI18n、登録する app.use(i18n)、でテキストをレンダリングします $t() テンプレートまたは t() から useI18n().
そのレガシー API は Vue I18n v11 では非推奨となり、v12 では削除される予定であるため、新しいプロジェクトでは Composition API を使用する必要があります。
翻訳されたURLを処理する必要があります、hreflang、 <html lang>、コードにないテキスト（CMS コンテンツ、製品データ）を翻訳します。
ConveyThis などの翻訳レイヤーではコードの変更は必要ありません。スクリプトを追加し、言語を選択し、ビジュアルエディターで翻訳を編集します。
どちらの方法でも、クライアント側のみのレンダリングが SEO の弱点となります。他の言語での検索トラフィックが重要な場合は、Nuxt またはプリレンダリングを使用してください。

オプション1: Vue I18nでVueアプリを翻訳する

Vue I18n は、Intlify チームによって保守されている国際化プラグインです。最小限の Composition API セットアップには 4 つのステップが必要です。

1。インストール

npm install vue-i18n

2。メッセージでi18nインスタンスを作成する

// 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。新規登録アプリで

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

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

4。コンポーネントで使用します

<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のドキュメントでは、主要なオプションについて説明しています: locale アクティブ言語を設定します fallbackLocale 翻訳キーが欠落している場合に使用されます messages ロケールごとの翻訳を保持します。また、Legacy API “は Vue I18n v11 では非推奨であり、Vue I18n v12 は削除されます”なので、優先します legacy: false そして useI18n() 新しいコードで。

Vue I18nがあなたにしないこと

Vue I18n は、指定した文字列を翻訳します。多言語ウェブサイトにはそれ以上のものが必要です:

アプリが変更されるたびに、すべての文字列をあらゆる言語で記述し、同期させる必要があります。不足しているキーは警告なしに英語に戻ります。
ブログ投稿、製品の説明、CMS または API から取得した内容はメッセージファイルには含まれません。それらについては、別のローカリゼーションプロセスが必要です。
言語URLはあなた次第です。ルートにロケールを追加します(/fr/pricing) Vue Router を使用し、ルーターを保持します locale 同期して。Google は、Cookie やブラウザの設定で切り替えるのではなく、言語ごとに個別の URL を推奨しています (Google検索セントラル).
Hreflang タグも同様です <html lang>。各言語バージョンには、それ自体と他のすべての言語バージョンがリストされる必要があります(Google検索セントラル)。アップデート document.documentElement.lang ロケールが変更されたとき。
価格と日付については、Vue I18nの番号と日付の書式設定（ブラウザで構築されています Intl API）を手動でフォーマットするのではなく。
多くの言語をサポートしている場合は、すべてのロケールをバンドルするのではなく、オンデマンドで各ロケールのメッセージをロードしてください。

実用的なヒント

キーはセマンティックに保つ(checkout.payButton) は文ベースではないため、コピーの変更によってキーが壊れることはありません。
文字列を連結しないでください(t('hello') + name)；補間を使用する (t('hello', { name })) 翻訳者が単語の順序を変更できるようにします。
の代わりに複数形機能を使用します if (count === 1)；多くの言語には 3 つ以上の複数形があります。
レイアウトに長いテキストのためのスペースを残します；ドイツ語とフランス語は英語よりも長くなることがよくあります。
アラビア語またはヘブライ語が必要な場合は、右から左への言語を早期にテストしてください。

オプション 2: コードなしで ConveyThis を使用して Vue サイトを翻訳します

すべての文字列をファイルに移動したくない場合、またはコンテンツの大部分が CMS または API から取得されている場合は、翻訳レイヤーを使用するとより速くアクセスできます。 ConveyThis Vue アプリがレンダリングした内容をブラウザで翻訳します。

セットアップには約10 分かかります:

ConveyThis アカウントを作成しますそしてドメインを追加します。
ソース言語とターゲット言語を選択します (210 言語がサポートされています）。
ダッシュボードから JavaScript スニペットをコピーします（を参照してください JavaScript 統合ガイド).
終了前にアプリのHTMLエントリポイントに貼り付けます </head> または </body> タグ。Viteプロジェクトでは index.html プロジェクトルートで； Vue CLIプロジェクトでは、 public/index.html.
展開する。言語スイッチャーが表示され、コンテンツが自動的に翻訳されます。

シングルページアプリでは、ConveyThis スクリプトはロード後に追加または変更されたコンテンツがないかページを監視し、クライアント側のルート変更（履歴 API ナビゲーションとハッシュの変更）に従います。Vue Router が新しいビューに移動したり、コンポーネントが新しいテキストをレンダリングしたりすると、そのテキストが取得されて翻訳されます。コンポーネントから何も呼び出す必要はありません。

出力を制御し続けます:

ビジュアルエディターを使用して、コンテキスト内の翻訳を編集します。
製品名と用語（有料プラン）の用語集ルールを設定し、承認された翻訳を翻訳メモリで再利用します。
を追加して翻訳してはならない要素を除外します conveythis-no-translate クラス (セグメントを除外する方法)、たとえばユーザー名やコードスニペットなど。
チームの役割を持つレビュアーを招待します。

Vue サイトの SEO

純粋にクライアントレンダリングされた Vue アプリは、ほぼ空の HTML シェルを出荷し、ブラウザでページを構築します。どちらの方法を選択しても、翻訳されたコンテンツが最初の HTML にないため、多言語 SEO に悪影響を及ぼします。他の言語での検索トラフィックが重要になる場合:

各ページのコンテンツが HTML 内に存在するように、Nuxt（サーバー側レンダリングまたは静的生成）またはプリレンダリング手順を使用します。
各言語に独自のURLを指定します。ConveyThis サブフォルダ、サブドメイン、または ?lang パラメータを指定し、hreflang タグを自動的に追加し、ページタイトル、メタ記述、JSON-LD を翻訳します。見る多言語SEO URL モードの動作について説明します。
Google 検索コンソールの URL 検査を使用して翻訳されたページを確認し、Google が実際に何をレンダリングするかを確認します。

Vue I18n と翻訳レイヤー

	Vue I18n	ConveyThis
コードの変更	すべての文字列がメッセージファイルに移動されました	1つのスクリプトタグ
誰が翻訳するのか	ファイル内のチームまたは翻訳者	機械翻訳の初稿、ビジュアルエディターで編集
CMS / API コンテンツ	別のプロセスが必要です	ページとともに翻訳
新しいコンテンツ	各ロケールファイルに追加する必要があります	自動的に検出され、翻訳されます
言語 URL と hreflang	あなたがそれらを構築します	に建て
に最適	開発者が所有する製品UI、言語が少ない	コンテンツが多く、言語が多いマーケティングサイトやアプリ

多くのチームがこれらを組み合わせています。開発者が完全な制御を必要とするコアアプリケーション UI 用の Vue I18n と、CMS からのマーケティングページ、ドキュメント、コンテンツ用の翻訳レイヤーです。

これらすべての背後にある概念については、こちらをご覧ください国際化ガイド（i18n）。Reactも使うなら、参照 React Web サイトの翻訳方法.

よくある質問

Vue。js Web サイトを翻訳するにはどうすればよいですか？

Vue I18nを使用する（言語ごとにテキストをメッセージファイルに移動し、レンダリングする $t または useI18n) または、ConveyThis などの Web サイト翻訳スクリプトを追加します index.html、コードを変更せずにレンダリングされたページを翻訳します。

Vueに最適なi18nライブラリは何ですか？

Vue I18n は Vue 3 の標準選択肢です。構成APIを使用する(legacy: false)、レガシー API は v11 で非推奨になっているためです。

ConveyThis は Vue Router で動作しますか？

はい。スクリプトはクライアント側のルート変更に従い、新しくレンダリングされたコンテンツを監視するため、新しいビューはユーザーが開くと翻訳されます。

クライアント側の Vue アプリは多言語 SEO に適していませんか？

コンテンツは最初の HTML にないため、難しくなります。最良の結果を得るには、Nuxt またはプリレンダリング、言語ごとの個別の URL、および hreflang タグを使用します。

Vue アプリの一部の翻訳を停止できますか？

ConveyThis で、を追加します conveythis-no-translate 任意の要素にクラスを割り当てます。Vue I18nでは、そのテキストを渡さないでください t().

Vueサイトでノーコードルートを試すには、 ConveyThis アカウントを作成しますそしてスニペットを貼り付けます index.html.