# General Translation Knowledge Base: Vue アプリを翻訳するにはどうすればよいですか？ URL: https://generaltranslation.com/ja/kb/translate-vue-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Vue アプリを翻訳するには、各テンプレート文字列をアクティブな言語に応じて参照される形にし、すべての対象言語に翻訳します。General Translation の gt-vue プラグインは `` コンポーネントでラップされたコンテンツを翻訳し、npx gt translate は対象言語ごとに 1 つのカタログを書き出します。 Category: 国際化 Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Vue アプリを翻訳するには、まずアプリを国際化 (各文字列、複数形、数値、日付をアクティブな言語で表示できるように準備すること) し、そのうえですべての文字列を各対象言語に翻訳します。文言を修正するたびに原文が変わるため、翻訳を再生成しなければ、リリースを重ねるごとに翻訳が追いつかなくなります。さらに、言語によって文法も異なり (英語の複数形は 2 種類、アラビア語は 6 種類) 、ユーザーが言語を切り替えた際にはページを再レンダリングする必要があります。 ## 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 秒) 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. ## Vue アプリを翻訳する方法 | アプローチ | 得意なこと | 自分で対応が必要なこと | | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 国際化 (i18n) ライブラリ単体 ([`vue-i18n`](/kb/general-translation-vs-vue-i18n)) | `$t` でキーからメッセージを参照し、ロケールをインプレースで切り替え、複数形を選択し、数値や日付をロケールに応じて書式設定する | すべての文字列のキーの命名、テキストの言語別メッセージファイルへの移動、ロシア語などの言語向けのカスタム `pluralRules` の作成、すべての翻訳の作成 | | `@nuxtjs/i18n` (Nuxt) | `vue-i18n` をベースに、ロケールのプレフィックス付きルート、ブラウザの言語検出、翻訳の遅延読み込み、hreflang タグを追加する | `vue-i18n` と同じく、キー、メッセージファイル、翻訳の用意 | | 翻訳管理システム ([Crowdin](/kb/general-translation-vs-crowdin)、[Lokalise](/kb/general-translation-vs-lokalise)) | 翻訳者が用語集と翻訳メモリを活用して作業できる Web エディタを提供し、メッセージファイルと同期する | コード内のキーとメッセージファイルの管理、同期のセットアップ、リリースごとの翻訳者の作業待ち | | General Translation (`gt-vue` と `gt` CLI) | [``](/docs/vue/reference/components/t) がテンプレートのコンテンツをキーなしでインプレース翻訳する。[``](/docs/vue/reference/components/t) 内の [``](/docs/vue/reference/components/plural) が CLDR ルールに従って各ロケールの複数形を選択する。[`npx gt translate`](/docs/cli/reference/commands/translate) が対象言語ごとにカタログを書き出す。[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) がリロードせずに言語を切り替える | テンプレートのコンテンツの [``](/docs/vue/reference/components/t) によるラップと、初回のみのセットアップ (設定、ローダー、プラグイン) 。ソースコンテンツ変更時の [`npx gt translate`](/docs/cli/reference/commands/translate) の再実行。0.x リリース間の API 変更への追従 | 文字列が少なく変更も少ない場合や、すでにメッセージファイルで翻訳済みの場合は `vue-i18n` 単体で十分です。ローカライズされたルートが必要な Nuxt アプリでは、さらに `@nuxtjs/i18n` を追加しましょう。ローカライゼーションチームがリリースごとに手作業で翻訳する場合は、翻訳管理システムが適しています。テンプレートがリリースのたびに変わり、キーの同期に手間をかけずにコードから翻訳を生成したい場合は、`gt-vue` を使いましょう。 ## gt-vue で Vue アプリを翻訳する General Translation の `gt-vue` パッケージは Vue プラグインとして動作し、翻訳の生成は `gt` CLI が行います。 1. `gt.config.json` で、ソース言語を `defaultLocale` に、対象言語を `locales` に、カタログのパスを `files.gt.output` に設定します。 2. アプリをマウントする前に、[`createGT()`](/docs/vue/reference/functions/create-gt) プラグインを登録します。 3. テンプレートのコンテンツを [``](/docs/vue/reference/components/t) コンポーネントでラップします。入力欄のプレースホルダーなどのスタンドアロンの文字列には、[`useGT()`](/docs/vue/reference/composables/use-gt) が返す関数を使用します。 ```vue ``` 4. [`npx gt login`](/docs/cli/reference/commands/login) でサインインし、プロジェクトIDを設定します。 5. [`npx gt translate`](/docs/cli/reference/commands/translate) を実行します。Vue のソースがスキャンされ、対象言語ごとに JSON カタログが 1 つずつ `files.gt.output` のパスに出力されます。 CLI はテンプレートの構造ごと抽出するため、テキスト、ネストされた要素、フォーマットがひとまとまりで翻訳されます。[``](/docs/vue/reference/components/t) の `context` プロパティを使えば、「Open」が動詞か形容詞かを指定できます。 ## ビルドごとに翻訳する ビルドスクリプトで `vite build` の前に [`npx gt translate`](/docs/cli/reference/commands/translate) を実行するようにし、ビルド環境に `GT_PROJECT_ID` と `GT_API_KEY` を設定しておけば、デプロイのたびに最新のカタログが反映されます。翻訳ローダーや言語切り替え機能の設定を含む詳しい手順は、[Vue クイックスタート](/docs/vue/quickstart)を参照してください。 ## Related questions - [React アプリを翻訳するには？](https://generaltranslation.com/ja/kb/translate-react-app.mdx): React アプリを翻訳するには、まずコンポーネントを国際化してユーザーの言語でレンダリングできるようにし、次にすべての文字列をサポート対象の各言語に翻訳します。General Translation の gt-react は `` コンポーネント内の JSX をインプレースで翻訳し、npx gt translate は言語ごとに 1 つのファイルを書き出します。 - [Next.js App Router アプリに i18n を追加するには？](https://generaltranslation.com/ja/kb/add-i18n-to-nextjs.mdx): まず gt init を実行して、対応する App Router プロジェクトに General Translation を設定します。次にソースコンテンツをマークし、翻訳を生成して、言語の切り替えが機能することを確認します。gt-next はテキストを翻訳の文脈とともに JSX 内に保持し、生成、レビュー、継続的な更新は CLI、ダッシュボード エディター、Locadex が担います。このガイドでは、ローカルファイルを明示的に使うセットアップ方法も紹介します。 - [翻訳ファイルなしでi18nは実現できますか？](https://generaltranslation.com/ja/kb/i18n-without-translation-files.mdx): はい。General Translationの gt-react と gt-next ライブラリを使えば、翻訳キーも、言語ごとに管理するJSONファイルもなしで、ReactとNext.jsのi18nを実現できます。文言は `` コンポーネント内のJSXにインラインで記述したままで、gt translate コマンドがコードから得た文脈をもとに、ビルド時に各言語の翻訳を生成します。さらにLocadexを使えば、プルリクエストを通じて翻訳を常に最新の状態に保てます。 - [デプロイのたびに翻訳を最新の状態に保つにはどうすればよいですか？](https://generaltranslation.com/ja/kb/translations-in-ci.mdx): 本番環境のビルド前に、翻訳をパイプラインのステップとして毎回実行します。こうすることで、新しいテキストは追加されたデプロイと同時に翻訳済みの状態でリリースされます。General Translation の gt CLI では、CI シークレットとして保存したプロジェクトの APIキーとプロジェクトIDを使い、npx gt translate でこれを実現します。 ## Previous and next questions - Previous question: [Storyblok でコンテンツを翻訳するにはどうすればよいですか？](https://generaltranslation.com/ja/kb/translate-storyblok-content.mdx) - Next question: [デプロイのたびに翻訳を最新の状態に保つにはどうすればよいですか？](https://generaltranslation.com/ja/kb/translations-in-ci.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.