【Vue.js】【i18n】vueファイルごとにメッセージを設定【4つの手順で簡単実装】

なぜ、vueファイルごとにメッセージを設定する？

Vueファイルは単一ファイルコンポーネントとして実装することができ、一つのファイルでコンポーネントを完結させることができます。
一つのファイルで一つのコンポーネントを作ることが一般的なVueでは、「Vueで管理するi18nメッセージを外部ファイルとして設定」より「vueファイルに設定」の方が、Vueとして自然な構成でありメンテしやすいと思います。

公式: https://kazupon.github.io/vue-i18n/guide/sfc.html#basic-usage

4つの手順

4つの手順でvueファイルごとにメッセージを設定することができるようになります。

moduleをinstall

まず、vue-i18n関連のmoduleをインストールします。

必要なモジュールは以下です。

• vue-i18n : 翻訳機能を提供するmodule
• vue-i18n-loader : vueファイルにi18nメッセージを設定するためのmodule

以下のコマンドでvue-i18n本体をインストールします。

npm install vue-i18n

続いて、以下のコマンドでvue-i18n-loaderをインストールします。

npm install --save-dev @kazupon/vue-i18n-loader

vue-i18n-loaderを設定

vue.config.jsにvue-i18n-loaderを設定します。

vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use('i18n')
        .loader('@kazupon/vue-i18n-loader')
        .end();
  }
}

この設定でi18nタグを利用できるようになります。

Vueにvue-i18nプラグインをインストール

Vueにvue-18nプラグインをインストールします。

src/main.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(VueI18n)
Vue.config.productionTip = false

const i18n = new VueI18n({
  locale: 'ja',
  messages: {
    ja: {},
    en: {}
  }
})

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

Vue.useメソッドでvue-i18nをインストールします。
VueI18nのオブジェクトを生成してVueのコンストラクタに設定することで、言語のデフォルト設定や共通のメッセージを設定することができます。

vueファイルにメッセージを適用

vueファイルにメッセージを適用します。

src/App.vue

<i18n>
{
  "en": {
    "helloWorld": "Welcome to Your Vue.js App"
  },
  "ja": {
    "helloWorld": "ようこそ、あなたのVue.jsアプリへ"
  }
}
</i18n>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="$t('helloWorld')"/>
  </div>
</template>

メッセージはi18nタグで設定します。
$tメソッドでメッセージを出力することができます。

【おまけ】動作確認用に言語切替機能を実装

ここからはおまけです。
動作確認用に言語を切り替えるサンプルを公開します。

src/App.vue

<i18n>
{
  "en": {
    "helloWorld": "Welcome to Your Vue.js App"
  },
  "ja": {
    "helloWorld": "ようこそ、あなたのVue.jsアプリへ"
  }
}
</i18n>

<template>
  <div id="app">
    <select v-model="locale" class="locale">
      <option value="en">English</option>
      <option value="ja">日本語</option>
    </select>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="$t('helloWorld')"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  computed: {
    locale: {
      get() {
        return this.$i18n.locale
      },
      set(locale) {
        this.$i18n.locale = locale
      }
    }
  }
}
</script>

<style>
# app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.locale {
  position: fixed;
  top: 16px;
  right: 20px;
}
</style>