nuxt.config.ts

i18n公式のInstallationにnuxt.config.tsで設定できるよとあります。 v2と同じ書き方です。

ところがですね、ここでこんな↓風にmessagesを定義すると

  i18n: {
    locales: ['ja', 'en'],
    defaultLocale: 'ja',
    messages: {
      ja: {
        b1: 'あ',
      },
      en: {
        b1: 'a',
      },
    },
  },

起動後に中身が空になっていました。

v2の時はこんな↓風にvueI18nの中になっていたのでそれで定義すると別のエラーがでます。

  i18n: {
    locales: ['ja', 'en'],
    defaultLocale: 'ja',
    vueI18n: {
      messages: {
        ja: {
          b1: 'あ',
        },
        en: {
          b1: 'a',
        },
      },
    },
  },

v3では「vueI18n」は外部の設定ファイルのパスを定義する文字列になっているのでそのせいかなーと。

この現象が特定のバージョンのバグなのか、仕様なのかがちょっと分からなくて、とりあえず僕が試したバージョンでは動きませんでしたよと。

i18n.config.ts

i18n公式のUsageに書いてある方法です。

まずnuxt.configでこの↓ように定義します。

  i18n: {
    vueI18n: './i18n.config.ts',
  },

プロジェクトルートに「i18n.config.ts」がある場合は上記設定はなくてもいいみたいです。 自動インポートされました。

i18n.config.tsはこの↓ように書きます。

export default defineI18nConfig(() => ({
  locales: ['ja', 'en'],
  defaultLocale: 'ja',
  messages: {
    ja: {
      b1: 'あ',
    },
    en: {
      b1: 'a',
    },
  }
}))

これで起動するとmessagesはちゃんと定義できていますが、locales、defaultLocaleが未定義状態でした。

createI18n

pluginsフォルダに設定ファイルを置いて、createI18nを使う方法です。

pluginsにテキトーな名前でファイルを置き、こんな↓中身にします。

import { createI18n } from 'vue-i18n'

export default defineNuxtPlugin(nuxtApp => {
  const i18n = createI18n({
    locales: ['ja', 'en'],
    defaultLocale: 'ja',
    messages: {
      ja: {
        b1: 'あ',
      },
      en: {
        b1: 'a',
      },
    }
  })
  
  nuxtApp.vueApp.use(i18n)
})

これで登録するとウワーっとこんな↓警告がでます。

[Vue warn]: Component "i18n-t" has already been registered in target app.

テストの時は警告は出るけどちゃんと登録できてた気がしたんですが、今みるとどれも設定できてなかったです。 これはVue用なんだろうか。

Ver.9くらいからの変更

上のやり方で@nuxtjs/i18nのVer.8.5.3まではうまくいっていたんですが、新プロジェクトではVer.9.1.1がインストールされて、また挙動が違うかったのでメモしておきます。

色々ためしたところ基本的には変更はなくて、メインはnuxt.config.ts、messagesだけi18n.config.tsというのは変わっていなかったです。

ところがnuxt.config.tsのこの部分↓がデフォルトで設定されなくなったようでmessagesが未定義でした。

    i18n: {
      vueI18n: './i18n.config.ts',
    },
  

上のコードをnuxt.config.tsに明示してやればちゃんとmessagesがi18n.config.tsからインポートされました。

この変更？バグ？はきっちりVer.9から起きたわけじゃなくて、Ver.8の最新版でも同様の症状でした。

switchLocalePathのバグ？

switchLocalePathは、現在のページの別言語ページのパスを出力する関数です。 これがですね、例えば「/」に対して英語版(en)なら「/en/」と出力してほしいんですが、「/」になっていました。

これもi18nのVer.9系でのバグかと思って、ちゃんと動いてたVer.8.5.3をインストールしてみたんですが状況が変わらず…

調べていると、vue-routerのバージョンによって正しくパスが出力されないらしく、海外ニキ達が議論してました。

ただ、ここにあるのはVer.4.3.1に問題があるらしくて、4.3.0を使ってねみたいな話だったんですが、自分の環境に入っていたのはVer.4.5.0。 こちらも正しく動いていたプロジェクトのVer.4.4.5をインストールすると…

ほな、i18nもVer.8.5.3に落として…

じゃー、nuxtもvueもバージョン合わせて…

で、他に別プロジェクトと違うところを調べてたら、今回のプロジェクトはトップページだけの構成だったのでpagesフォルダを作らずにapp.vueで作業してたんですね。 どうもこれで内部的にパスが生成されてない？判定になってたのか、pagesフォルダにindex.vueを作ったら無事に動きました。 もろもろのモジュールを最新版にしてもちゃんと動きました。