zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.js vue-i18nで多言語対応を行う

vue-i18nを使用してアプリケーションの多言語対応を行う方法を紹介します。

パッケージのインストール

最初に必要なパッケージをインストールします。

$ npm install vue-i18n --save

i18nの設定

i18n用のフォルダを新規に作成し、フォルダ構成は以下のようにします。

languagesフォルダに各言語ファイルを配置します。

  • i18n
    • languages
      • en.js
      • js.js
    • index.js
    • message.js
  • index.js(エントリーポイント)

languagesフォルダに配置する各言語ファイルの中身は以下のようにします。

en.js
export default {
  hello: 'Hello',
};
ja.js
export default {
  hello: 'こんにちは',
};

message.jsファイルで、各言語ファイルをまとめて読み込みます。

message.js
import ja from './languages/ja';
import en from './languages/en';

export default {
  ja,
  en,
};

index.jsi18nの設定を行います。

13行目の設定はVuexなど、Vueコンポーネントの外でi18nにアクセスできるようにするための設定です。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './messages';

Vue.use(VueI18n);

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

Vue.i18n = i18n;

export default i18n;

設定した内容をエントリーポイントで読み込んで、アプリケーションに組み込みます。

index.js
import Vue from 'vue';
import App from '@/App';
import i18n from '@/i18n';

new Vue({
  components: { App },
  i18n,
  template: '<App/>',
}).$mount('#app');

使い方

コンポーネント内の処理では以下のようにしてメッセージを取得できます。

$(キー)で、設定中の言語に対応した言語ファイルから、キーに該当する文言を取得します。

methods: {
  greet() {
    alert(this.$t('hello'));
  }
}

Vuexなど、Vueコンポーネントの外でアクセスする場合は以下のようにします。

vue-i18nの設定時にVue.i18n = i18n;を忘れないようにしてください。

mutations: {
  setHello(state) {
    state.hello = Vue.i18n.t('hello');
  },
},

言語の切り替え

言語の切り替えは以下のように行います。

methods: {
  changeLocale () {
    this.$i18n.locale = 'en';
  },
},
mutations: {
  changeLocale(state) {
    Vue.i18n.locale = 'en';
  },
},


関連記事