Nuxtでi18n対応した件

Nuxtのプロジェクトでi18n対応の要件が出てきたのでnuxt-i18nを利用して対応しましたというお話です。

要件は以下の通りです。

• サイト上で日本語と英語を切り替えれるようにする
• localeごとにドメインは分ける可能性あり

package install

yarn add nuxt-i18n

config

nuxt.config.jsにmoduleを追加

nuxt.config.js

modules: [
    ...
    'nuxt-i18n',
  ],

messagesファイルを追加

以下のような形式でmessageファイルを作成しました。

locale/ja/index.ts

export default {
  welcome: 'ようこそ！'
}

locale/en/index.ts

export default {
  welcome: 'Welcome！'
}

locale/message.ts

import ja from './ja'
import en from './en'

export default {
  en: {
    ...en,
  },
  ja: {
    ...ja,
  },
}

nuxt.configにi18nの設定を追加

先程のmessagesファイルをimportして、設定します。

nuxt.config.js

import messages from './lang/message'

export default {
...
i18n: {
    locales: [
      { code: 'ja', name: '日本語' },
      { code: 'en', name: 'English' },
    ],
    defaultLocale: 'ja',
    vueI18n: {
      messages,
    },
  },

localesにてmessagesファイル指定できるのですが、今後ファイルを分割したい可能性も考えvueI8n.messagesに直接指定することにしました。
https://i18n.nuxtjs.org/options-reference#locales

template埋め込み

pages/index.vue

<template>
<p>{{ $t('welcome') }}</p>
</template>

これでdefaultはjaにしてるので「ようこそ！」と表示されます。

言語切り替えリンク

以下のようにlocalesをforで表示しています。これで「日本語」リンクと「English」リンクが表示されるのでEnglishのリンクをクリックするとパスが/enに切り替わります。

pages.index.vue

<ul>
  <li v-for="locale in $i18n.locales" :key="locale.code">
     <nuxt-link
        :class="{ 'is-active': locale.code === $i18n.locale }"
        :to="switchLocalePath(locale.code)"
     >
       {{ locale.name }}
     </nuxt-link>
  </li>
</ul>

まとめ

まだ、導入してみたばかりで、ドメインを分けたりはしていませんが、これからやっていこうと思っていますので随時更新して行く予定です。