---
createdAt: 2024-08-11
updatedAt: 2025-08-23
title: vue-i18n vs Intlayer
description: Vue/Nuxtアプリにおける国際化（i18n）について、vue-i18nとIntlayerを比較
keywords:
  - vue-i18n
  - Intlayer
  - 国際化
  - i18n
  - ブログ
  - Vue
  - Nuxt
  - JavaScript
slugs:
  - blog
  - vue-i18n-vs-intlayer
---

# 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に特化）

| 機能                                                     | **Intlayer**                                                                          | **vue-i18n**                                                                |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| **コンポーネント近くの翻訳**                             | ✅ はい、コンポーネントごとにコンテンツが共置（例：`MyComp.content.ts`）              | ✅ はい、SFCの`<i18n>`ブロック経由（オプション）                            |
| **TypeScript統合**                                       | ✅ 高度で自動生成された**厳密な**型とキーのオートコンプリート                         | ✅ 良好な型定義；**厳密なキー安全性は追加の設定/規律が必要**                |
| **翻訳漏れ検出**                                         | ✅ **ビルド時**の警告/エラーとTSへの反映                                              | ⚠️ 実行時のフォールバック/警告                                              |
| **リッチコンテンツ（コンポーネント/Markdown）**          | ✅ リッチノードおよびMarkdownコンテンツファイルの直接サポート                         | ⚠️ 制限あり（コンポーネントは`<i18n-t>`経由、Markdownは外部プラグイン経由） |
| **AIによる翻訳**                                         | ✅ 独自のAIプロバイダーキーを使用した組み込みワークフロー                             | ❌ 組み込みなし                                                             |
| **ビジュアルエディター / CMS**                           | ✅ 無料のビジュアルエディターおよびオプションのCMS                                    | ❌ 組み込みなし（外部プラットフォームを使用）                               |
| **ローカライズされたルーティング**                       | ✅ Vue Router/Nuxt用のローカライズされたパス、URL、および`hreflang`を生成するヘルパー | ⚠️ コア機能ではない（Nuxt i18nまたはカスタムVue Router設定を使用）          |
| **動的ルート生成**                                       | ✅ あり                                                                               | ❌ 提供されていない（Nuxt i18nが提供）                                      |
| **複数形とフォーマット**                                 | ✅ 列挙パターン；Intlベースのフォーマッター                                           | ✅ ICUスタイルのメッセージ；Intlフォーマッター                              |
| **コンテンツ形式**                                       | ✅ `.ts`、`.js`、`.json`、`.md`、`.txt`（YAML 作業中）                                | ✅ `.json`、`.js`（および SFC の `<i18n>` ブロック）                        |
| **ICU サポート**                                         | ⚠️ 作業中                                                                             | ✅ 対応                                                                     |
| **SEO ヘルパー（サイトマップ、robots、メタデータ）**     | ✅ 組み込みヘルパー（フレームワーク非依存）                                           | ❌ コア機能ではない（Nuxt i18n / コミュニティ）                             |
| **SSR/SSG**                                              | ✅ Vue SSRおよびNuxtで動作；静的レンダリングをブロックしない                          | ✅ Vue SSR/Nuxtで動作                                                       |
| **ツリーシェイキング（使用されるコンテンツのみを出荷）** | ✅ ビルド時にコンポーネント単位で実施                                                 | ⚠️ 部分的；手動でのコード分割や非同期メッセージが必要                       |
| **遅延読み込み**                                         | ✅ ロケール単位／辞書単位で対応                                                       | ✅ 非同期ロケールメッセージをサポート                                       |
| **未使用コンテンツの削除**                               | ✅ はい（ビルド時）                                                                   | ❌ 組み込みではない                                                         |
| **大規模プロジェクトの保守性**                           | ✅ モジュール化されたデザインシステムに適した構造を推奨                               | ✅ 可能だが、強力なファイル/名前空間の規律が必要                            |
| **エコシステム / コミュニティ**                          | ⚠️ 小規模だが急速に成長中                                                             | ✅ 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**を含む）は、**集中型カタログ**から始まります：

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

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

```bash
.
├── 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、ストーリー、テスト、ドキュメントと同様に**コードの隣に保持**します。

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

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

```ts fileName="./components/MyComponent/myComponent.content.ts"
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）:

```vue fileName="./components/MyComponent/MyComponent.vue"
<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?' ドキュメント](https://intlayer.org/doc/why)をご参照ください。
