Nuxt.jsにi18nを導入してみる

i18nとは

ソフトウェアを特定の地域の言語、仕様に縛られることなく、世界各国で共通して利用できるようにすることを意味する「Internationalization」を省略した表記方法。間の「18」は、単語の先頭の"I"と末尾の"n"の間にある文字の数を意味している。単語自体が長いために便宜的に使われる表記方法である。
I18Nの例としては、利用文字コードを想定しない、あるいはあらゆる文字コードに対応する、時刻や日時の表示形式を任意に指定可能できるようにするといった機能を入れるといったことが挙げられる。
日本語では「国際化」とも呼ばれる。
Weblio辞書より

やってみよう

VueにはRuby on Railsのi18nのように書けるvue-i18nがあるので、それを用いる。
また、SFC内にi18nを書くことが可能なvue-i18n-loaderがあるので、それも活用しようと思う。
※ yarnで書くので、npm使う場合は適宜読み替えてね

$ yarn install vue-i18n

/plugins/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { getLanguage } from '~/utils/lang'

Vue.use(VueI18n)

export default ({ app, req, isClient }) => {
  // 標準はja
  let locale = 'ja';    
  if (isClient) {
　　　　　　　　　// SPAの場合
    locale = descriminationLang()
  } else if (req) {
　　　　　　　　// SSRの場合
    locale = req.headers['accept-language'].split(',')[0].toLocaleLowerCase().substr(0, 2)
  }
  app.i18n = new VueI18n({
    locale: locale || 'ja',
    fallbackLocale: 'ja'
  })
}

function descriminationLang () {
  const lang = getLanguage()
  // ない場合、日本語にする
  if (lang === undefined) return 'ja'
  if (lang.match(/en/)) {
    return 'en'
  } else {
    return 'ja'
  }
}

/utils/lang.js

export const getLanguage = () => {
  const lang = (window.navigator.languages && window.navigator.languages[0]) ||
              window.navigator.language ||
              window.navigator.userLanguage ||
              window.navigator.browserLanguage
  return lang
}

※波線部分はデフォルトで書いてある記述とか自分で追記したものとかいろいろのこと

nuxt.config.js

module.exports = {
~~
  build: {
    vendor: ['vue-i18n']
    ~~
  },
  plugins: ['~/plugins/i18n.js]
}

これで、i18nは動く。

i18nをSFC内で書くための設定

/pages/index.vue

<template lang="pug">
div
  p {{ $t('message') }}
</template>

<i18n>
en:
  "message": "Hello, i18n world!"
ja:
  "message": "こんにちは、i18nの世界！"
</i18n>

<script>
export default {

}
</script>

nuxt.config.js

module.exports = {
~~
  build: {
    extend (config) {
      const vueLoader = config.module.rules.find((r) => {
        return r.loader === 'vue-loader'
      })
      vueLoader.options.preLoaders = vueLoader.options.preLoaders || {}
      vueLoader.options.preLoaders.i18n = 'yaml-loader'
      vueLoader.options.loaders.i18n = '@kazupon/vue-i18n-loader'
    },
    ~~
  }
}

これでSFC内でもi18nをyamlで書けるようになった(Railsっぽいなぁ)

Vue.jsでやる場合

vue-cli v3からvue-cli-uiがあるけど、それ専用のプラグインvue-cli-plugin-i18nがあるので、GUIで編集できるぽいからそれ使ってみてもいいかも。

参考

[Qiita] nuxt.js で vue-i18n を使えるようにする
[Qiita] Nuxt.jsでいい感じにi18nを使う
[Qiita] javascriptでブラウザの言語設定を取得する