Nuxt.jsでi18nするにはnuxt-i18nというプラグインを使うのが一般的っぽいのですが、これを使って現在のページの言語を取得したいという案件が発生したのでやり方のメモ。

環境


下記の環境でやってます。

  • Nuxt.js: 2.8.1
  • nuxt-i18n: 5.12.7

コンテキストにもってる


結論から書くと、この現在のページの言語はコンテキストに持ってます。コンテキストはasyncDataメソッドで取得できるので下記のようなコードを書いて確認してみます。

1
export default {
2
  asyncData (context) {
3
    console.log(context.app);
4
  }
5
}

んで、これを書いたページを開いてコンソールで確認すると、下記の通りcontext.app.context.langに現在のページの言語を持ってるのがわかります。(紛らわしいのですがcontext.appがさらにcontextを持ってます)

言語に応じて処理を変える


前述のとおりコレを取得するにはasyncDataを使う必要があります。asyncDataで取得して言語に応じて表示する文字を変えてみます。

1
<template>
2
  <div>
3
    {{currentLang}}
4
  </div>
5
</template>
6
7
<script>
8
export default {
9
  asyncData (context) {
10
    return { lang: context.app.context.lang };
11
  },
12
  computed: {
13
    currentLang() {
14
      if (this.lang === 'en' || this.lang === undefined) {
15
        return "English";
16
      } else {
17
        return "日本語";
18
      }
19
    }
20
  }
21
}
22
</script>

こんな感じだと思います。上記であればnuxt-i18nの機能でできるのでわざわざやらなくてもいいと思うのですが、こういうこともできるっぽいというのが解りました。

まあ、Nuxt触りたてですし、これがベストプラクティスなのかどうかといわれれば正直わからないのですが、とりあえず目的は達成できてるのでおわり。