Nuxt.js の国際化：@nuxtjs/i18n vs 自動翻訳（2026年版）

@nuxtjs/i18n が実際にできること

@nuxtjs/i18n（nuxt-i18n）は Nuxt の国際化に用いられる公式モジュールです。vue-i18n をラップし、Nuxt のファイルベースのルーティングと Vue Router に密接に 統合されます。提供される機能は以下の通りです。

• •ロケールを付与した URL ルーティング — /fr/about、 /de/pricing — を Nuxt の ルーティング層が自動的に処理します。
• •サーバー側では Accept-Language ヘッダー、 クライアント側では navigator.language から ブラウザのロケールを検出します。
• •各言語版のページに対する hreflang タグを自動生成 — SEO 上重要です。
• •テンプレートや <script setup> 内で 文字列を翻訳するための $t() コンポーザブルと useI18n() フック。

できないこと：コンテンツそのものの翻訳です。すべてのロケールファイル内の すべての文字列は、人間が書く（あるいは手動で翻訳サービスに通す）必要があります。モジュールが 管理するのはルーティングと文字列の参照であり、実際の翻訳を埋めるのはあなたの責任です。

@nuxtjs/i18n のセットアップ：実際に必要な作業

3言語向けの最小限の nuxt-i18n セットアップには、以下の作業が必要です。

1. 1モジュールをインストールし、 nuxt.config.ts の modules に登録する。
2. 2 i18n 設定ブロックで ロケール、デフォルトロケール、遅延読み込み戦略を宣言する。
3. 3ロケールごとの JSON ファイルを作成する： locales/en.json、 locales/fr.json、 locales/de.json — 対応言語ごとに1つずつ、新しい UI 文字列が追加されるたびに更新します。
4. 4すべてのコンポーネント内のハードコードされた文字列を $t('key') または t('key') 呼び出しに 置き換える — プロジェクト内のすべての .vue ファイルに手を 入れることになります。
5. 5ナビゲーションにロケールスイッチャーコンポーネントを追加し、カスタムのスラッグページの ルーティングロジックを更新する（例： /blog/[slug] にあった ブログ記事は、Nuxt i18n ルーティングでは /fr/blog/[slug] になります）。

最小限の nuxt.config.ts の i18n ブロックの例：

export default defineNuxtConfig({
  modules: ["@nuxtjs/i18n"],
  i18n: {
    locales: [
      { code: "en", file: "en.json" },
      { code: "fr", file: "fr.json" },
      { code: "de", file: "de.json" },
    ],
    defaultLocale: "en",
    lazy: true,
    langDir: "locales/",
    strategy: "prefix_except_default",
  },
})

そして対応する locales/en.json：

{
  "nav": {
    "home": "Home",
    "pricing": "Pricing",
    "docs": "Documentation"
  },
  "hero": {
    "headline": "Translate your Nuxt app",
    "cta": "Get started free"
  }
}

すべてのキーは fr.json や de.json にも複製・翻訳する 必要があり、プロダクトが進化し続ける限り、それを永久に同期させ続けなければなりません。

積み重なる保守コスト

1文字列あたりのオーバーヘッドは単体では小さく見えます。しかし実際のプロダクトで積み重なると、 そのコストは急速に膨らみます。

@nuxtjs/i18n が正しい選択となる場合

フルモジュールスタックが明確に正当化される具体的な状況があります。

• →

  言語ごとに URL を持つ SEO 重視のコンテンツサイト

  各言語版が固有のインデックス可能な URL であり、独自の canonical と hreflang を持つ必要が あり、それを構築・維持する開発リソースがある場合、nuxt-i18n はまさにそれを 実現します。

• →

  コミュニティ翻訳のあるオープンソースアプリ

  GitHub 上のプルリクエストを通じてコミュニティが翻訳を提供する場合、ロケール JSON ファイルは適切な貢献者インターフェースです。Crowdin や Weblate といった プラットフォームはこの形式と直接統合できます。

• →

  規制対象のコンプライアンスコンテンツ

  法務、医療、金融のアプリケーションでは、すべての文字列を出荷前に明示的にレビュー・ 承認する必要があります。nuxt-i18n は、すべての文字列をバージョン履歴付きの監査 可能な独立した成果物として扱えます。

• →

  オフライン対応の PWA

  オフラインで動作する必要がある Nuxt アプリは、すべてのロケール文字列をビルド 時にバンドルしておく必要があります。nuxt-i18n のロケール JSON ファイルはビルドに 含まれますが、DOM ベースの翻訳はネットワーク接続なしでは動作できません。

Nuxt 3 アプリに Lingvit を追加する

もう一つの選択肢はスクリプトタグです。モジュールのインストールも、ロケールファイルも、 コンポーネントの変更も不要です。Nuxt 3 では、 nuxt.config.ts の app.head プロパティ経由で スクリプトを追加します。

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cdn.lingvit.com/widget/v1/widget.bundle.js",
          "data-project-id": "YOUR_PROJECT_ID",
          async: true,
          tagPosition: "bodyClose",
        },
      ],
    },
  },
})

あるいは、コンポーネント単位で制御したい場合は、ルートの app.vue 内で useHead コンポーザブルを 使うこともできます。

<!-- app.vue -->
<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://cdn.lingvit.com/widget/v1/widget.bundle.js",
      "data-project-id": "YOUR_PROJECT_ID",
      async: true,
      tagPosition: "bodyClose",
    },
  ],
})
</script>

必要な統合作業はこれだけです。Lingvit のウィジェットは MutationObserver を使って、Nuxt がレンダリング・ハイドレートした後の DOM を監視します。対応する内容は以下の通りです。

• •Nuxt の SSR エンジンからストリーミングされたサーバーレンダリング HTML — ハイドレーション完了後、即座に翻訳されます。
• •リアクティブな Vue の更新 — v-if で表示される コンテンツ、 v-for で描画される コンテンツ、非同期データ取得で読み込まれるコンテンツは、新しいノードが DOM に 現れるたびに翻訳されます。
• •Vue Router のナビゲーション — Nuxt のクライアントサイドルート遷移は、新しく レンダリングされたページコンテンツに対してオブザーバーをトリガーします。
• •RTL レイアウト — アラビア語やヘブライ語など RTL 言語に切り替える際、 document.documentElement.dir が自動的に設定されます。

セットアップの比較

自動翻訳で十分なケース

多くの Nuxt プロジェクトにとって、DOM ベースの翻訳は妥協ではなく、正しいエンジニアリング 判断です。

自動翻訳がカバーしない範囲

DOM ベースの翻訳には現実的な限界があります。選択する前に理解しておきましょう。

よくある質問