vue-i18n VS Intlayer | Vueの国際化（i18n）

本ガイドでは、Vue 3（およびNuxt）向けの人気i18nオプションであるvue-i18nとIntlayerを比較します。
モダンなVueツール（Vite、Composition API）に焦点を当て、以下を評価します：

1. アーキテクチャとコンテンツの構成
2. TypeScriptと安全性
3. 翻訳漏れの取り扱い
4. ルーティングとURL戦略
5. パフォーマンスと読み込み挙動
6. 開発者体験（DX）、ツールとメンテナンス
7. SEOと大規模プロジェクトのスケーラビリティ

要約：どちらもVueアプリのローカライズが可能です。もしコンポーネント単位のコンテンツ管理、厳格なTypeScript型、ビルド時の未翻訳キー検出、ツリーシェイク可能な辞書、そしてルーターやSEOヘルパーが標準装備されていて、さらにビジュアルエディターとAI翻訳も欲しいなら、Intlayerがより完全でモダンな選択肢です。

高レベルのポジショニング

• vue-i18n - Vueの事実上の標準i18nライブラリ。柔軟なメッセージフォーマット（ICUスタイル）、ローカルメッセージ用のSFC <i18n> ブロック、大規模なエコシステムを持ちます。安全性や大規模メンテナンスは主にユーザーの責任です。
• Intlayer - Vue/Vite/Nuxt向けのコンポーネント中心のコンテンツモデルで、厳格なTS型付け、ビルド時チェック、ツリーシェイキング、ルーター＆SEOヘルパー、オプションのビジュアルエディター/CMS、およびAI支援翻訳を備えています。

機能の比較（Vueに特化）

詳細比較

1) アーキテクチャとスケーラビリティ

• vue-i18n: 一般的な設定では、ロケールごとに集中管理されたカタログを使用します（ファイルや名前空間に分割することも可能）。SFCの<i18n>ブロックはローカルメッセージを許可しますが、プロジェクトが大きくなるとチームはしばしば共有カタログに戻ります。
• Intlayer: コンポーネントごとに辞書を持ち、そのコンポーネントの隣に保存することを推奨します。これによりチーム間の競合が減り、コンテンツの発見性が保たれ、自然にキーのズレや未使用を制限できます。

重要な理由: 大規模なVueアプリやデザインシステムでは、モジュール化されたコンテンツの方がモノリシックなカタログよりもスケールしやすいです。

2) TypeScript と安全性

• vue-i18n: TSサポートは良好ですが、厳密なキー型付けには通常カスタムスキーマやジェネリクス、慎重な規約が必要です。
• Intlayer: コンテンツから厳密な型定義を生成し、IDEのオートコンプリートやタイプミス・キーの欠落に対するコンパイル時エラーを提供します。

重要な理由: 強力な型付けにより、実行時前に問題を検出できます。

3) 翻訳欠落の処理

• vue-i18n: 実行時の警告やフォールバック（例：フォールバックロケールやキー）。
• Intlayer: ビルド時にロケールやキー全体で警告やエラーを検出します。

重要な理由: ビルド時の検証により、本番環境のUIをクリーンかつ一貫性のある状態に保てます。

4) ルーティングとURL戦略（Vue Router/Nuxt）

• 両者ともローカライズされたルートに対応可能です。
• Intlayer は、ローカライズされたパスの生成、ロケールプレフィックスの管理、および SEO のための <link rel="alternate" hreflang> の発行を支援するヘルパーを提供します。Nuxt では、フレームワークのルーティングを補完します。

重要な理由: カスタムの接着層が減り、ロケール間での よりクリーンな SEO を実現します。

5) パフォーマンスと読み込み動作

• vue-i18n: 非同期ロケールメッセージをサポートしますが、過剰なバンドルを避けるのはユーザー次第です（カタログを慎重に分割してください）。
• Intlayer: ビルド時に ツリーシェイク を行い、辞書／ロケールごとに遅延読み込み を行います。未使用のコンテンツは配信されません。

重要な理由: マルチロケールの Vue アプリで、より小さなバンドルサイズと高速な起動を実現します。

6) 開発者体験とツール

• vue-i18n: 成熟したドキュメントとコミュニティを持ち、編集ワークフローには通常、外部のローカリゼーションプラットフォームに依存します。
• Intlayer: 無料のビジュアルエディター、オプションのCMS（Gitフレンドリーまたは外部化可能）、VSCode拡張機能、CLI/CIユーティリティ、および独自のプロバイダーキーを使用したAI支援翻訳を提供します。

重要な理由: 運用コストの削減と開発–コンテンツのループ短縮。

7) SEO、SSR & SSG

• 両者ともにVue SSRおよびNuxtと連携します。
• Intlayer: フレームワークに依存しないSEOヘルパー（サイトマップ/メタデータ/hreflang）を追加し、Vue/Nuxtのビルドとスムーズに連携します。

重要な理由: カスタム配線なしでの国際SEO。

なぜIntlayerなのか？（問題とアプローチ）

ほとんどのi18nスタック（vue-i18nを含む）は、集中型カタログから始まります：

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json└── src    └── components        └── MyComponent.vue

またはロケールごとのフォルダ構成：

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json└── src    └── components        └── MyComponent.vue

アプリが成長するにつれて、これが開発の遅延を招くことがよくあります：

1. 新しいコンポーネントの場合、リモートカタログを作成/編集し、名前空間を設定し、翻訳を行います（多くの場合、AIツールからの手動コピー＆ペーストによる）。
2. コンポーネントを変更する場合、共有キーを探し出し、翻訳し、ロケールを同期させ、不要なキーを削除し、JSON構造を整合させます。

Intlayerはコンテンツをコンポーネント単位でスコープし、CSS、ストーリー、テスト、ドキュメントと同様にコードの隣に保持します。

.└── components    └── MyComponent        ├── MyComponent.content.ts        └── MyComponent.vue

コンテンツ宣言（コンポーネント単位）:

import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    greeting: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

Vueでの使用例（Composition API）:

<script setup lang="ts">import { useIntlayer } from "vue-intlayer"; // Vue統合const { greeting } = useIntlayer("component-example");</script><template>  <span>{{ greeting }}</span></template>

このアプローチは以下の利点があります：

• 開発を高速化（一度宣言すれば、IDEやAIが自動補完）。
• コードベースをクリーンに保つ（1コンポーネント = 1辞書）。
• 複製や移行を容易に（コンポーネントとそのコンテンツを一緒にコピー）。
• 不要なキーを回避（未使用のコンポーネントはコンテンツをインポートしない）。
• 読み込みを最適化（遅延読み込みされるコンポーネントは自身のコンテンツを持つ）。

Intlayerの追加機能（Vue関連）

• クロスフレームワーク対応：Vue、Nuxt、Vite、React、Expressなどで動作。
• JavaScript駆動のコンテンツ管理：コード内で柔軟に宣言可能。
• ロケールごとの宣言ファイル: すべてのロケールをシードし、ツールが残りを生成します。
• 型安全な環境: 強力なTS設定とオートコンプリート機能。
• 簡素化されたコンテンツ取得: 辞書のすべてのコンテンツを取得する単一のフック/コンポーザブル。
• 整理されたコードベース: 1コンポーネント = 同じフォルダ内の1辞書。
• 強化されたルーティング: Vue Router/Nuxt のローカライズされたパスとメタデータのためのヘルパー。
• Markdownサポート: ロケールごとにリモート/ローカルMarkdownをインポートし、フロントマターをコードに公開。
• 無料のビジュアルエディター＆オプションのCMS: 有料のローカリゼーションプラットフォームなしでの作成が可能。Gitに優しい同期。
• ツリーシェイカブルなコンテンツ: 使用されるものだけを出荷。遅延読み込みをサポート。
• 静的レンダリングに優しい: SSGをブロックしません。
• AI搭載の翻訳: ご自身のAIプロバイダー/APIキーを使用して231言語に翻訳可能。
• MCPサーバー＆VSCode拡張機能: IDE内でのi18nワークフローとオーサリングを自動化。
• 相互運用性: 必要に応じてvue-i18n、react-i18next、react-intlと連携。

どちらを選ぶべきか？

• vue-i18nを選ぶ場合: 標準的なVueのアプローチを望み、カタログや名前空間の管理に慣れていて、アプリが小規模から中規模（またはすでにNuxt i18nを利用している）場合。
• Intlayerを選ぶ場合: コンポーネントスコープのコンテンツ、厳密なTypeScript、ビルド時の保証、ツリーシェイキング、およびルーティング/SEO/エディターツールが一式揃っていることを重視し、特に大規模でモジュール化されたVue/Nuxtコードベースに適している場合。

実践的な移行ノート（vue-i18n → Intlayer）

• 機能単位で開始：ルート／ビュー／コンポーネントを一つずつローカルの Intlayer 辞書に移行します。
• 移行中のブリッジ：vue-i18n のカタログを並行して保持し、段階的にルックアップを置き換えます。
• 厳密なチェックを有効化：ビルド時に欠落しているキーやロケールを早期に検出できるようにします。
• ルーター／SEO ヘルパーを採用：ロケール検出と hreflang タグを標準化します。
• バンドルサイズを測定：未使用のコンテンツが除外されることで、バンドルサイズの削減が期待できます。

結論

vue-i18n と Intlayer はどちらも Vue アプリのローカライズに優れています。違いは、堅牢でスケーラブルなセットアップを実現するために、どれだけ自分で構築する必要があるかにあります：

• Intlayerでは、モジュール化されたコンテンツ、厳格なTypeScript、ビルド時の安全性、ツリーシェイクされたバンドル、およびルーター/SEO/エディター用ツールが標準で提供されます。
• チームがマルチロケール対応のコンポーネント駆動型Vue/Nuxtアプリにおいて、保守性と速度を重視する場合、Intlayerは現時点で最も充実した体験を提供します。

詳細は'Why Intlayer?' ドキュメントをご参照ください。