nuxt-i18nでtemplate以外でtメソッドを使う

経緯

Nuxtで日英のバイリンガルサイトを作っていて、
metaタグの翻訳が必要だったので調べてみました。

調査結果

nuxt-i18nはvue-i18nを使っているので、issueにないか調べてみると、
開発者のkazuponさんが回答されていました。

How can i use vue-i18n in '.js' file, I have use it in Vue template and it works. #149

以下ように呼び出すと、scriptブロックで使用可能です。

this.$i18n.t('hoge')

asyncDataで使う

asyncDataでもcontextからtメソッドを利用できますが、
コンポーネントのi18nブロックの翻訳テキストは参照できません。

<i18n>
{
  "en": {
    "hoge": "hoge"
  },
  "ja": {
    "hoge": "ほげ"
  }
}
</i18n>

<script>
export default {
  ...
  asyncData({ app }) {
    console.log(app.i18n.t('hoge'));
  }
  ...
}
</script>

ブラウザのコンソールに以下のような警告が表示されます。

warn [vue-i18n] Cannot translate the value of keypath 'hoge'. 
Use the value of keypath as default.

contextのappは、

すべてのプラグインを含むルートの Vue インスタンス。

とドキュメントに書かれていますので、
子コンポーネントの翻訳テキストを参照することが出来ないからだと思われます。

appから利用する場合は、nuxt.config.jsに記述します。

import { join } from 'path'

...
modules: [
  'nuxt-i18n', {
    vueI18n: {
      messages: {
        'en': {
          'hoge': 'hoge'
        },
        // or 'en': require(join(__dirname, 'locales/en.json'))
        'ja': {
          'hoge': 'ほげ'
        }
        // or 'ja': require(join(__dirname, 'locales/ja.json'))
      }  
    }
  }
]
...

vue-i18n-loaderを利用して、コンポーネント毎に管理すると便利なので、
このように使う場合はあまりないのではないでしょうか？

まとめ

template以外でも使いたい状況はあると思いますので、
備忘録を兼ねて投稿してみました。