Nuxt.jsで同一URLのまま多言語化（i18n）を行う

Nuxt.jsで多言語化を行うには、nuxt-i18nを使用することが一般的かもしれません。
これも使いやすいのですが、言語毎にパスに /en が付くなどURLが変わってしまうので、同一URLのまま言語切替ができないか試してみました。

まずはvue-i18nを導入

今回はnuxt-i18nではなく、vue-i18nを使用します。

npm install --save vue-i18n

Cookieを使用するためにcookie-universal-nuxtを導入

言語設定をstoreに保存してページ読み込み時に保存した言語を適用したかったのですが、SSR時にstoreの情報を読み込むことはできないので、Cookieに言語設定を保存することにします。
cookie-universal-nuxtというモジュールがあるらしく、今回はこれを使ってみます。

[参考] Nuxt.jsでCookieを使って閲覧したデータを取得する方法

npm install --save cookie-universal-nuxt

nuxt.config.js も更新します。

nuxt.config.js

modules: [
  ['cookie-universal-nuxt', { parseJSON: false }]
],

各言語のファイルを作成

各言語のファイルを作成します。
今回は日本語（ja）と英語(en)を想定しています。
ルート直下に locales というディレクトリを作成し、 ja.json と en.json というファイルを置きましょう。

locales/ja.json

{
  "title": "天使にラブソングを"
}

locales/en.json

{
  "title": "SISTER ACT"
}

pluginsディレクトリ内にvue-i18nの設定を追加

Coockieに保存した言語設定（ ja or en ）を読み込んで適用します。
設定されていない場合は、日本語が適用されるようにしています。

plugins/vue-i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default ({ app }) => {
  const locale = app.$cookies.get('locale') || 'ja';
  app.i18n = new VueI18n({
    locale,
    fallbackLocale: 'ja',
    messages: {
      en: require('~/locales/en.json'),
      ja: require('~/locales/ja.json'),
    }
  });
};

nuxt.config.jsに設定を追加

お約束のやつ。

nuxt.config.js

plugins: [
  '@/plugins/vue-i18n'
],

実際に言語切替を実行してみよう

とりあえず、サンプルのページを作りました。

pages/index.vue

<template lang="pug">
.container
  p {{ $t('title') }}
  v-btn(@click="toggleLocale()") 切り替え
</template>

<script>
export default {
   asyncData({ app }) {
    const locale = app.$cookies.get('locale') || 'ja';
    return {
      isJa: locale === 'ja'
    }
  },
  methods: {
    toggleLocale() {
      this.isJa = !this.isJa;
      const locale = this.isJa ? 'ja' : 'en'
      this.$cookies.set('locale', locale, {
        path: '/',
        maxAge: 60 * 60 * 24 * 365
      });  // localeをCookieに保存
      this.$i18n.locale = locale;           // 言語を切り替え
    }
  }
}
</script>

こんな感じで切り替わります↓（URLは変わりません）

this.$cookies.set('locale', locale); の部分で言語設定をCookieに保存しているので、画面を更新した際も前回設定された言語が適用されます。

以上でやりたいことは達成できました！

結論

「SISTER ACT」の邦題を「天使にラブソングを」にしたセンスすごい。