vue-i18nを使いNuxt.jsを多言語対応させる方法

はじめに

おそらく、SSGよりもSSRで作った方が良いです。SSGだと、VueXやlocalStorageの使い勝手が悪いので、SSRもしくはSPAをお勧めします。VueXやlocalStorageはデータの永続化で使用しますが、SSGでは、SSRの関数が使用できないので、描画してからlocaleを読み込むというサイクルになってしまいます。

実装

vue-i18nをインストールします。

yarn add vue-i18n

localesというフォルダを作り、日本語jaと英語enに対応させるために、それぞれのjsonを用意します。

.
├── en.json
└── ja.json

ja.json

{
  "common": {
    "hello": "ハロー",
  }
}

en.json

{
  "common": {
    "hello": "Hello",
  }
}

i18n.jsというpluginを作ります。

import Vue from "vue"
import VueI18n from "vue-i18n"

Vue.use(VueI18n)

export default ({ app, store }) => {
  app.i18n = new VueI18n({
    locale: store.state.lang ? "ja" : "en",
    messages: {
      ja: require("@/locales/ja.json"),
      en: require("@/locales/en.json"),
    },
  })
}

nuxt.config.jsに読み込みます。

plugins: ["@/plugins/i18n"],

<template>で使用する。

<p>{{ $t("common.hello")</p>

localeは、VueXで管理します。

export const state = () => ({
  lang: "ja",
})

このstateを変更することで、言語を変更することができます。SSRの場合、middlewareを使ってlocalStorageやCookieに保存しておき、SSR時にVueXに入れて永続化させるのが良いでしょう。データベースを使用する場合も、同様にSSR時にAPIで取得し、VueXに入れます。
SSGの場合は、

this.$i18n.locale = "ja"

のように直接変更しなければ、動きません。これはpluginsの動作がSSGの場合、nuxt generate時にしか実行されないためだと思います。