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

Vuetify メッセージを日本語化（多言語対応）する

Vuetifyの表示メッセージを日本語化する方法を紹介します。

また複数の言語を切り替える多言語対応の方法も紹介します。

例えばコンボボックスの選択肢が存在しないとき、デフォルトだと英語でメッセージが表示されます。

vuetify-english

日本語化するとこのようなシステムメッセージが日本語で表示されるようになります。

vuetify-japanese

設定方法

以下のように日本語の言語ファイルを読み込み、Vuetifyのオプションに設定します。

import Vuetify from 'vuetify';
import ja from 'vuetify/es5/locale/ja';

const opts = {
  lang: {
    locales: { ja },
    current: 'ja',
  },
};

export default new Vuetify(opts);

多言語対応

多言語対応する場合は、まず以下のように、使用したい言語をすべてlocalesに設定しておきます。

import Vuetify from 'vuetify';
import en from 'vuetify/es5/locale/en';
import ja from 'vuetify/es5/locale/ja';

const opts = {
  lang: {
    locales: { en, ja },
    current: 'ja',
  },
};

const vuetify = new Vuetify(opts);

export default vuetify;

言語の切替

コンポーネント内で言語を切り替える場合は以下のようにします。

methods: {
  changeLocale () {
    this.$vuetify.lang.current = 'en';
  },
},

VuexのMutationなど、コンポーネント以外の処理で切り替える場合は、まずVue.vuetifyでvuetifyにアクセスできるように設定しておきます。

import Vue from 'vue';
import Vuetify from 'vuetify';
import en from 'vuetify/es5/locale/en';
import ja from 'vuetify/es5/locale/ja';

const opts = {
  lang: {
    locales: { en, ja },
    current: 'ja',
  },
};

const vuetify = new Vuetify(opts);

Vue.vuetify = vuetify;

export default vuetify;

以下のようにして変更します。

mutations: {
  changeLocale(state) {
    Vue.vuetify.framework.lang.current = 'en';
  },
},
Vuetify

関連記事