nuxt-i18n tips

github.com

ちょっと詰まった箇所をメモしておく。

現在の Locale を取得したい

<template>
  <div>
    <h1>{{ $i18n.locale }}</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$i18n.locale
  }
}
</script>

Script 内部で利用したい

<template>
  <div>
    <h1>{{ name }}</h1>
  </div>
</template>

<i18n>
## language=yaml
  en:
    name: "omiend"
  ja:
    name: "オミエンド"
</i18n>

<script>
export default {
  data() {
    return {
      name: ""
    }
  },
  mounted() {
    const $t = this.$t.bind(this)
    this.name = $t('name')
  }
}
</script>

yamlの中で変数を使いたい

<template>
  <div>
    <h2>{{ $t('name', job: "Programmer") }}</h2>
  </div>
</template>

<i18n>
## language=yaml
  en:
    name: "My name is omiend. I am a %{job}!"
  ja:
    name: "私の名前はオミエンドです。私の仕事は%{job}です！"
</i18n>