@nuxtjs/i18n にて vue-i18n の $t の型を指定する (しかし・・・)

@nuxtjs/i18n にて $t の型を指定する (しかし・・・)

node_modules/vue-i18n/dist/vue-i18n.d.ts の
DefineLocaleMessage の example の通り設定を行えば $t の型付けはなされる。

しかし useI18n() の型が侵食される。

適用方法

以下のような指定で適用される。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxt/eslint", "@nuxtjs/i18n"],
  i18n: {
    defaultLocale: "ja",
    locales: [{ code: "ja", name: "にほんご", file: "ja/index.ts" }],
  },
  typescript: {
    tsConfig: {
      // .nuxt/tsconfig.json からの相対パス (どこかの記事の記述のコピー)
      include: ["../types/**/*.d.ts"],
    },
  },
});

types/vue-i18n.d.ts

declare module "vue-i18n" {
  export interface DefineLocaleMessage {
    title: string;
    menu: {
      login: string;
    };
  }
  // i18n/locales/ja.ts などで定義したオブジェクトの型を Messages として指定する場合
  // export interface DefineLocaleMessage extends Messages {}
}

これにより DefineLocaleMessage に指定した定義のパスがサジェストされる。

useI18n() の型について

上記の通り $t の型指定が行われるだけであれば丸く収まったところ、
この状態では useI18n() の使用に影響を及ぼしてしまう。

useI18n() の正常な状態

useI18n() は限定した使用を行う場合には引数を指定するのみでサジェストがされる。

<script setup lang="ts">
const { t } = useI18n({
  messages: { ja: { hello: "へろ" } },
});
</script>

DefineLocaleMessage が指定された状態での useI18n()

DefineLocaleMessage を指定した場合
useI18n() の型エラーが発生する可能性があり、サジェストが効かなくなる挙動が確認される。

No overload matches this call.
  Overload 1 of 2, '(options?: UseI18nOptions<{ message: RemoveIndexSignature<{ [x: string]: LocaleMessageValue<VueMessageType>; title: string; menu: { login: string; }; }>; datetime: DateTimeFormat; number: NumberFormat; }, "ja", ComposerOptions<...>> | undefined): Composer<...>', gave the following error.
    Object literal may only specify known properties, and 'hello' does not exist in type 'RemoveIndexSignature<{ [x: string]: LocaleMessageValue<VueMessageType>; title: string; menu: { login: string; }; }>'.
  Overload 2 of 2, '(options?: UseI18nOptions<{ message: LocaleMessage<VueMessageType>; datetime: DateTimeFormat; number: NumberFormat; }, { messages: "en-US"; datetimeFormats: "en-US"; numberFormats: "en-US"; }, ComposerOptions<...>> | undefined): Composer<...>', gave the following error.
    Object literal may only specify known properties, and 'ja' does not exist in type '{ "en-US": LocaleMessage<VueMessageType>; }'.ts-plugin(2769)

このエラーについては ja として指定している箇所を en-US に変更すると解消されるが、
実装に影響を与えてしまうため型の解決が求められる。

また、型エラーを解決したところで以下のようにサジェストが $t のものと一緒になってしまう。

結論

上記の問題は $t と t が両方 DefineLocaleMessage を使用していることによる模様

2025 年 8 月現状では以下のいずれかの対応になるかと思われる。

• DefineLocaleMessage を指定しない。
• $t のみ使用
• useI18n() のみ使用