[Nuxt3] i18nで多言語化対応

お知らせ

適当にGoogleで検索をしてNuxt3の多言語化をしようとしたところ、エラーになってしまったので一次ソースを参照したところ導入方法から全く異なっていたのでその記録です。

エラーは大体こんな感じ：

Cannot start nuxt: ENOENT: no such file or directory, open i18n/locales

インストール方法

npx nuxi@latest module add @nuxtjs/i18n

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    // Module Options
  }
})

使い方

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'ja',
    locales: [
      { code: 'ja', name: '日本語', file: 'ja.json' },
      { code: 'en', name: 'English', file: 'en.json' }
    ]
  }
})
{
  "welcome": "ようこそ"
}
{
  "welcome": "Welcome"
}
<template>
  <div>
    <button v-for="locale in locales" @click="setLocale(locale.code)">
      {{ locale.name }}
    </button>
    <h1>{{ $t('welcome') }}</h1>
  </div>
</template>

<script setup>
  const { locales, setLocale } = useI18n()
</script>