Nuxt3+Vuetify3で多言語化（i18n)

Nuxt3での多言語化パッケージは、現在開発途上とのことです。ベーシックな多言語化は可能ですが、今後アップデートされていく予定のようです。

基本は公式ページの説明の通りです。
実用的な範囲の最小構成でまとめ直したのと、少しばかり書き方の補足をしたものです。

インストール

npm install --save-dev vue-i18n

/plugins/i18n.tsにファイル作成

pluginsフォルダがなければ作成し、その下に以下の内容のi18n.tsを作成。

i18n.ts

import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import ja from '../locales/ja.json'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en,
      ja
    }
  })

  vueApp.use(i18n)
})

/locales/en.jsonと/locales/ja.jsonを作成

localesフォルダを作成し、各言語ごとに翻訳リストを作成。

en.json

{
  "hello": "Hello, {name}!",
  "delte": "Delete"
}

ja.json

{
  "hello": "こんにちは, {name}!",
  "delte": "削除"
}

• リストの最後にカンマが付いているとエラーになるので注意

Vue (Vuetify3)での書き方の例

<v-alert
    :title="$t('cofirm_delete_account')"
    type="error"
    variant="text"
>
    {{ $t('description_delete_account') }}
</v-alert>

言語切り替え (Vuetify3)

v-selectで実装した例です。

app.vue

<script setup>
  const languages = [
    { title: 'English', value: 'en' },
    { title: '日本語', value: 'ja' },
  ];
</script>

<v-select
  v-model="$i18n.locale"
  :items="languages"
  item-title="title"
  item-value="value"
  single-line
></v-select>