--- createdAt: 2026-06-05 updatedAt: 2026-06-05 title: "@nuxtjs/i18nからIntlayerへの移行 | 国際化 (i18n)" description: "Nuxtアプリケーションを@nuxtjs/i18nからIntlayerに移行する方法を学びます — 既存のコードを壊すことなく、ステップバイステップで解説します。シームレスな移行のために@intlayer/vue-i18n互換性アダプターを使用してください。" keywords: - "@nuxtjs/i18n" - vue-i18n - intlayer - 移行 - 国際化 - i18n - Nuxt - Vue - JavaScript slugs: - doc - migration - nuxtjs-i18n history: - version: 8.13.0 date: 2026-06-05 changes: "Init history" --- # @nuxtjs/i18nからIntlayerへの移行 ## なぜ@nuxtjs/i18nからIntlayerに移行するのか？ 巨大なJSONファイルをページに読み込む代わりに、必要なコンテンツのみをロードします。Intlayerは、**バンドルとページのサイズを最大50%削減**するのに役立ちます。 アプリケーションのコンテンツをスコープ化することで、大規模なアプリケーションの**メンテナンスが容易**になります。機能フォルダ全体を複製または削除しても、すべてのコンテンツコードベースを確認するという精神的負担がありません。さらに、Intlayerはコンテンツの正確性を確保するために**完全に型付け**されています。 また、Intlayerはi18nエコシステムの中で**最も活発に開発されている**ソリューションでもあります。問題は迅速に修正され、新しいフレームワークアダプタが定期的に登場し、コアAPIは実際の運用フィードバックに基づいて継続的に改良されています。 コンテンツのコロケーション（同一場所配置）により、大規模言語モデル（LLM）に必要な**コンテキストが減少**します。Intlayerには、不足している翻訳をテストするための**CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/mcp_server.md)**、および**[エージェントスキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)**などのツールスイートが備わっており、AIエージェントにとってよりスムーズな開発者体験（DX）を提供します。 AIプロバイダーのコストで、お好みのLLMを使用してCI/CDパイプライン内で翻訳を自動化できます。Intlayerは、コンテンツ抽出を自動化するための**コンパイラ**や、**バックグラウンドでの翻訳**を支援する[ウェブプラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)も提供しています。 コンポーネントに巨大なJSONファイルを接続すると、パフォーマンスやリアクティビティの問題が発生する可能性があります。Intlayerはビルド時にコンテンツのロードを最適化します。 単なるi18nソリューションにとどまらず、Intlayerはセルフホストの**[ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)**と**[フルCMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)**を提供し、多言語コンテンツを**リアルタイム**で管理できるようにします。これにより、翻訳者やコピーライター、その他のチームメンバーとのシームレスなコラボレーションが可能になります。コンテンツはローカルおよび/またはリモートに保存できます。 --- ## 移行戦略 `@nuxtjs/i18n`は内部的に`vue-i18n`によって駆動されているため、Intlayerに移行するための互いに補完する2つの戦略があります： 1. **互換性アダプター（既存のアプリに推奨）** — `@intlayer/vue-i18n`および`nuxt-intlayer`をインストールします。これは`vue-i18n`と**全く同じAPI**を公開しますが、すべての翻訳作業をIntlayerに委譲します。`$t`、`useI18n()`、およびNuxtのルーティングへの既存の呼び出しはそのまま保持されます — 変更するのは初期化のみです。 2. **完全移行** — 徐々に`@nuxtjs/i18n`のAPIをネイティブのIntlayerフック（`useIntlayer`）に置き換え、コンポーネントと一緒に`.content.ts`ファイル内にコンテンツをコロケーションします。 このガイドでは、まず**戦略1**（ドロップイン互換性アダプター）について解説し、その後オプションである完全移行について説明します。 --- ## 目次 --- ## クイック移行 以下の手順は、コンポーネントのコードを変更せずに、既存のNuxtアプリをIntlayer上で実行するために必要な最小限のステップです。 Intlayerのコアパッケージと互換性アダプターをインストールします： ```bash packageManager="npm" npm install intlayer vue-intlayer nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin npx intlayer init ``` ```bash packageManager="pnpm" pnpm add intlayer vue-intlayer nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin pnpm intlayer init ``` ```bash packageManager="yarn" yarn add intlayer vue-intlayer nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin yarn intlayer init ``` ```bash packageManager="bun" bun add intlayer vue-intlayer nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin bun x intlayer init ``` > 移行中は`@nuxtjs/i18n`を安全にインストールしたままにしておけます（後でNuxtの設定から削除します）。 `intlayer init`コマンドにより、初期の`intlayer.config.ts`ファイルが作成されます。既存のロケールに合わせて設定を更新し、`syncJSON`プラグインがメッセージファイルを指すようにします： ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]} 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`のプレースホルダーが正しく解析されることを保証します。 `nuxt.config.ts`内の`@nuxtjs/i18n`モジュールを`nuxt-intlayer`に置き換えます。Intlayerプラグインは自動的にモジュールエイリアスを注入するため、既存の`import { useI18n } from 'vue-i18n'`への呼び出しは透過的に`@intlayer/vue-i18n`にリダイレクトされます。 ```typescript fileName="nuxt.config.ts" codeFormat={["typescript", "esm", "commonjs"]} 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'` | これらは**ドロップインの置き換え**であり、呼び出しシグネチャ、引数、または戻り値の型を変更する必要はありません。 Intlayerが設定されたら、CLIを使用して不足している翻訳を自動入力することができます： ```bash packageManager="npm" # 不足している翻訳をテスト（CIに追加） npx intlayer test # 不足している翻訳をAIで埋める npx intlayer fill ``` ```bash packageManager="pnpm" pnpm intlayer test pnpm intlayer fill ``` ```bash packageManager="yarn" yarn intlayer test yarn intlayer fill ``` ```bash packageManager="bun" bun x intlayer test bun x intlayer fill ``` AI設定を`intlayer.config.ts`に追加します： ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]} 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ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md)を確認してください。 --- ## 移行後に削除できるもの 互換性アダプターが導入されると、以下のボイラープレートコードは削除できます： | ファイル / パターン | 不要になる理由 | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | `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`に自動生成された型が含まれていることを確認してください： ```json5 fileName="tsconfig.json" { // ... 既存のTypeScript設定 "include": [ // ... 既存のTypeScript設定 ".intlayer/**/*.ts", // 自動生成された型を含める ], } ``` --- ## Git設定 Intlayerによって生成されたディレクトリを`.gitignore`に追加します： ```plaintext fileName=".gitignore" # Intlayer生成ファイルを無視 .intlayer ``` --- ## さらに詳しく - **ビジュアルエディタ** — ブラウザ上で翻訳を視覚的に管理：[Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md) - **CMS** — コンテンツを外部化してリモートで管理：[Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md) - **VS Code拡張機能** — 翻訳の自動補完とエラー検出をリアルタイムで取得：[Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/vs_code_extension.md) - **CLIリファレンス** — コマンドの完全なリスト：[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md) - **NuxtとIntlayer** — Nuxtの完全なセットアップガイド：[intlayer_with_nuxt.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nuxt.md) - **VueとIntlayer** — Vueの完全なセットアップガイド：[intlayer_with_vite+vue.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+vue.md)