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

ツイート
2021年01月11日
2021年01月18日

はじめに

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

実装

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

bash
yarn add vue-i18n

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

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

ja.json

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

en.json

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

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

js
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に読み込みます。

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

<template>で使用する。

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

localeは、VueXで管理します。

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

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

js
this.$i18n.locale = "ja"

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