アプリケーションのコンテンツをスコープ化することで、大規模なアプリケーションのメンテナンスが容易になります。機能フォルダ全体を複製または削除しても、すべてのコンテンツコードベースを確認するという精神的負担がありません。さらに、Intlayerはコンテンツの正確性を確保するために完全に型付けされています。

また、Intlayerはi18nエコシステムの中で最も活発に開発されているソリューションでもあります。問題は迅速に修正され、新しいフレームワークアダプタが定期的に登場し、コアAPIは実際の運用フィードバックに基づいて継続的に改良されています。

コンテンツのコロケーション（同一場所配置）により、大規模言語モデル（LLM）に必要なコンテキストが減少します。Intlayerには、不足している翻訳をテストするためのCLI、LSP、MCP、およびエージェントスキルなどのツールスイートが備わっており、AIエージェントにとってよりスムーズな開発者体験（DX）を提供します。

AIプロバイダーのコストで、お好みのLLMを使用してCI/CDパイプライン内で翻訳を自動化できます。Intlayerは、コンテンツ抽出を自動化するためのコンパイラや、バックグラウンドでの翻訳を支援するウェブプラットフォームも提供しています。

コンポーネントに巨大なJSONファイルを接続すると、パフォーマンスやリアクティビティの問題が発生する可能性があります。Intlayerはビルド時にコンテンツのロードを最適化します。

単なるi18nソリューションにとどまらず、IntlayerはセルフホストのビジュアルエディタとフルCMSを提供し、多言語コンテンツをリアルタイムで管理できるようにします。これにより、翻訳者やコピーライター、その他のチームメンバーとのシームレスなコラボレーションが可能になります。コンテンツはローカルおよび/またはリモートに保存できます。

移行戦略

@nuxtjs/i18nは内部的にvue-i18nによって駆動されているため、Intlayerに移行するための互いに補完する2つの戦略があります：

互換性アダプター（既存のアプリに推奨） — @intlayer/vue-i18nおよびnuxt-intlayerをインストールします。これはvue-i18nと全く同じAPIを公開しますが、すべての翻訳作業をIntlayerに委譲します。$t、useI18n()、およびNuxtのルーティングへの既存の呼び出しはそのまま保持されます — 変更するのは初期化のみです。
完全移行 — 徐々に@nuxtjs/i18nのAPIをネイティブのIntlayerフック（useIntlayer）に置き換え、コンポーネントと一緒に.content.tsファイル内にコンテンツをコロケーションします。

このガイドでは、まず戦略1（ドロップイン互換性アダプター）について解説し、その後オプションである完全移行について説明します。

クイック移行

以下の手順は、コンポーネントのコードを変更せずに、既存のNuxtアプリをIntlayer上で実行するために必要な最小限のステップです。

1
依存関係のインストール

Intlayerのコアパッケージと互換性アダプターをインストールします：
bash
コードをコピー
コードをクリップボードにコピー
npm install intlayer vue-intlayer nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-pluginnpx intlayer init
npm install intlayer vue-intlayer nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-pluginnpx intlayer init
移行中は@nuxtjs/i18nを安全にインストールしたままにしておけます（後でNuxtの設定から削除します）。
2
Intlayerの設定

intlayer initコマンドにより、初期のintlayer.config.tsファイルが作成されます。既存のロケールに合わせて設定を更新し、syncJSONプラグインがメッセージファイルを指すようにします：
intlayer.config.ts
コードをコピー
コードをクリップボードにコピー
```
import { Locales, type IntlayerConfig } from "intlayer";
import { syncJSON } from "@intlayer/sync-json-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // 既存のすべてのロケールをここに追加します
    ],
    defaultLocale: Locales.ENGLISH,
  },
  plugins: [
    syncJSON({
      // vue-i18nのプレースホルダー構文 {name} に一致させます
      format: "icu",
      source: ({ locale }) => `./locales/${locale}.json`,
      location: "locales",
    }),
  ],
};

export default config;
```
sourceはロケールをそのJSONファイルのパスにマッピングします。locationはIntlayerウォッチャーに監視するフォルダを指示します。format: 'icu'オプションは、vue-i18nのプレースホルダーが正しく解析されることを保証します。
3
Nuxt設定の更新

nuxt.config.ts内の@nuxtjs/i18nモジュールをnuxt-intlayerに置き換えます。Intlayerプラグインは自動的にモジュールエイリアスを注入するため、既存のimport { useI18n } from 'vue-i18n'への呼び出しは透過的に@intlayer/vue-i18nにリダイレクトされます。
nuxt.config.ts
コードをコピー
コードをクリップボードにコピー
```
export default defineNuxtConfig({
  // '@nuxtjs/i18n' を削除します
  modules: ["nuxt-intlayer"],
});
```
Nuxtのi18n設定オブジェクトを定義する必要はもうありません。 Intlayerはすべての辞書をビルド時にコンパイルし、ロケール検出、ルーティング、辞書の読み込みをシームレスに処理します。

これでクイック移行は完了です。Nuxtアプリは、$tおよびuseI18n()へのすべての呼び出しを保持したまま、Intlayer上で動作するようになります。

完全移行

以下のステップはオプションであり、段階的に行うことができます。これにより、ビジュアルエディタ、CMS、型付けされたコンテンツファイル、AIを利用した翻訳自動化など、Intlayerの全機能が解放されます。

インポートの明示的な変更（オプション）
オプション

Intlayerプラグインは既にバンドラレベルでのエイリアス化を処理しています。ソースファイル内で依存関係を明示的にしたい場合は、手動でインポート名を変更できます：

テーブルのすべての内容を表示
テーブルをモーダルで開き、すべてのデータを明確に表示
変更前変更後
import { useI18n } from 'vue-i18n' import { useI18n } from '@intlayer/vue-i18n'
これらはドロップインの置き換えであり、呼び出しシグネチャ、引数、または戻り値の型を変更する必要はありません。

AIを利用した翻訳自動化の有効化

オプション

Intlayerが設定されたら、CLIを使用して不足している翻訳を自動入力することができます：

bash

コードをコピー

コードをクリップボードにコピー

# 不足している翻訳をテスト（CIに追加）npx intlayer test# 不足している翻訳をAIで埋めるnpx intlayer fill

# 不足している翻訳をテスト（CIに追加）npx intlayer test# 不足している翻訳をAIで埋めるnpx intlayer fill

AI設定をintlayer.config.tsに追加します：

intlayer.config.ts

コードをコピー

コードをクリップボードにコピー

import { Locales, type IntlayerConfig } from "intlayer";
import { syncJSON } from "@intlayer/sync-json-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
  plugins: [
    syncJSON({
      format: "icu",
      source: ({ locale }) => `./locales/${locale}.json`,
      location: "locales",
    }),
  ],
  ai: {
    apiKey: process.env.OPENAI_API_KEY,
    // provider: "openai",     // デフォルト
    // model: "gpt-4o-mini",   // デフォルト
  },
};

export default config;

利用可能なすべてのオプションについては、Intlayer CLIドキュメントを確認してください。

移行後に削除できるもの

互換性アダプターが導入されると、以下のボイラープレートコードは削除できます：

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

ファイル / パターン	不要になる理由
`nuxt.config.ts`内の`i18n`設定	Intlayerはルーティング、辞書の読み込み、デフォルトロケールを内部で処理します。
`package.json`内の`@nuxtjs/i18n`	完全に`nuxt-intlayer`に置き換えられます。
JSON言語バンドル (`locales/*.json`)	JSONバンドルは、`syncJSON`プラグインを使用している場合にのみ必要です。`.content.ts`ファイルに移行したら、JSONフォルダを削除できます。

さらに進める準備ができたら、Intlayerはコードベース内のどこにある.content.tsおよび.content.jsonファイルでも自動的に検出します（デフォルトでは./src内）。my-component.content.tsファイルをMyComponent.vueのすぐ隣に配置するだけで、追加の設定なしでビルド時にIntlayerがそれを取得します — インポート、登録、中央のインデックスファイルは不要です。これにより、ページやコンポーネントとの翻訳のコロケーションが完全にシームレスになります。

TypeScriptの設定

Intlayerはモジュール拡張を使用して、翻訳キーに対する完全なTypeScriptのIntelliSense（自動補完）を提供します。tsconfig.jsonに自動生成された型が含まれていることを確認してください：

tsconfig.json

コードをコピー

コードをクリップボードにコピー

{  // ... 既存のTypeScript設定  "include": [    // ... 既存のTypeScript設定    ".intlayer/**/*.ts", // 自動生成された型を含める  ],}

{  // ... 既存のTypeScript設定  "include": [    // ... 既存のTypeScript設定    ".intlayer/**/*.ts", // 自動生成された型を含める  ],}

Git設定

Intlayerによって生成されたディレクトリを.gitignoreに追加します：

.gitignore

コードをコピー

コードをクリップボードにコピー

# Intlayer生成ファイルを無視.intlayer

# Intlayer生成ファイルを無視.intlayer

さらに詳しく

ビジュアルエディタ — ブラウザ上で翻訳を視覚的に管理：Intlayer Visual Editor
CMS — コンテンツを外部化してリモートで管理：Intlayer CMS
VS Code拡張機能 — 翻訳の自動補完とエラー検出をリアルタイムで取得：Intlayer VS Code Extension
CLIリファレンス — コマンドの完全なリスト：Intlayer CLI
NuxtとIntlayer — Nuxtの完全なセットアップガイド：intlayerwithnuxt.md
VueとIntlayer — Vueの完全なセットアップガイド：intlayerwithvite+vue.md

なぜIntlayer？

バージョン履歴

@nuxtjs/i18nからIntlayerへの移行

なぜ@nuxtjs/i18nからIntlayerに移行するのか？

移行戦略

目次

クイック移行

依存関係のインストール

Intlayerの設定

Nuxt設定の更新

完全移行

インポートの明示的な変更（オプション）

AIを利用した翻訳自動化の有効化

移行後に削除できるもの

TypeScriptの設定

Git設定

さらに詳しく