nuxt-i18n

Nuxt I18n

Nuxt I18n はロケールメッセージ、ローカライズされたルート、言語検出、ロケールのメタデータを管理します。ページ、レンダリング、サーバーのライフサイクルは Nuxt が管理します。

ワークフロー

1. インストールされている @nuxtjs/i18n のバージョン、nuxt.config.*、i18n/i18n.config.*、ロケールファイル、影響を受けるページを確認します。ロケールコード、ファイル、defaultLocale、ルーティング戦略が一致していれば、設定を把握できています。
2. 以下から最も適したガイドを開きます。モジュールのオプションは nuxt.config に、Vue I18n のオプションは i18n.config に、翻訳メッセージはロケールファイルに記述します。
3. ローカライズされたリンクとモジュールのコンポーザブルを使って実装し、ルーティング、メッセージの読み込み、SEO が同じロケール状態を共有するようにします。
4. nuxi prepare とプロジェクトの型チェックを実行し、デフォルトロケールと別のロケールで対象ルートにアクセスします。どちらのロケールでも期待されるメッセージ、URL、言語メタデータ、フォールバック動作が表示されれば、変更は完了です。

ルーティング

タスク	開く
インストール、ロケールオブジェクト、ファイル構成、ブラウザー検出、Vue I18n の設定	設定
翻訳キー、補間、複数形、日付、数値、実行時のメッセージ読み込み	メッセージ
ルート戦略、ローカライズされたリンク、切り替え、カスタムパス、動的スラッグ、SEO	ルーティングと SEO
Nuxt のページ、ミドルウェア、データ取得、SSR の状態、サーバールート	nuxt スキル

基本設定

npx nuxi@latest module add @nuxtjs/i18n

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
      { code: 'fr', language: 'fr-FR', name: 'Français', file: 'fr.json' },
    ],
  },
})

{
  "welcome": "Welcome"
}

デフォルトでは、ロケールファイルは i18n/locales/ から解決されます。設定、ルートヘルパー、ロケールファイル、フォールバックルールで同じロケールコードを使用してください。