vuetify-and-vee-validate-and-vue-i18n

なにこれ

Vuetify + VeeValidateで入力チェックする際に、VueI18nを使ってエラーメッセージを多言語対応・共通化する方法について紹介します。

定義方法

VeeValidate

VeeValidateであらかじめ言語毎にエラーメッセージを用意しているので、そちらを使います。 ※i18nRootKeyについては後述のvuei18nのメッセージファイルで詳細を説明します。

VeeValidateの定義
import Vue from 'vue';
import VeeValidate from 'vee-validate';
// VeeValidateで用意されている日本語版入力チェックエラーメッセージを使う
import ja from 'vee-validate/dist/locale/ja';
// VeeValidateで用意されている英語語版入力チェックエラーメッセージを使う
import en from 'vee-validate/dist/locale/en';
// VueI18nオブジェクトをインポートする
import { i18n } from './i18n';

Vue.use(VeeValidate, 
  // オプションでi18nを指定する
  {
    i18n,
    i18nRootKey: 'validations',
    dictionary: { ja, en },
  }
);

VueI18n

こちらは以前「VueI18nをscriptタグやJSファイル内で使う方法」で紹介したものと同様です。

VueI18nの定義
import Vue from 'vue';
import VueI18n from 'vue-i18n';
// メッセージ定義はjsonファイルから読み込む
const messages = require('./i18n.json');

Vue.use(VueI18n);

// ブラウザ言語を取得
const language = (
  (
    window.navigator.languages
    && window.navigator.languages[0]
  )
  || window.navigator.language
  || window.navigator.userLanguage
  || window.navigator.browserLanguage
  || 'ja'
);

const locale = language.substr(0, 2) === 'ja' ? 'ja' : 'en';

// VueI18nで使う言語はブラウザ言語とする
export const i18n = new VueI18n({
  locale,
  messages,
});

VueI18nのメッセージファイル

VeeValidateの定義でi18nRootKey: 'validations',と指定したので、 メッセージファイルでは、言語別にvalidationsというプロパティを定義します。 その中のattributesでエラー項目名を指定できます。

VueI18nのメッセージファイル(JSONファイル)
{
  "ja": {
    "validations": {
      "attributes": {
        "contractName": "契約名",
      }
    }
  },
  "en": {
    "validations": {
      "attributes": {
        "contractName": "ContractName",
      }
    }
  },
}

Vueファイルでの使い方

Vuetifyのv-text-fieldタグの場合、以下のように実装します。

<template>
  <v-text-field
    v-model="editedItem.name"
    <!-- VeeValidateでの項目名を定義 -->
    <!-- ※i18nのメッセージファイルで定義している項目名と合わせる -->
    data-vv-name="contractName"
    <!-- data-vv-nameで定義した名前でエラーメッセージを取得する -->
    :error-messages="errors.collect('contractName')"
    >
  </v-text-field>
  <button @click="validate">入力チェック</button>
</template>
<script>
export default {
  data() {
    return {
      editedItem: {
        name: '',
      },
    };
  },
  methods: {
    async validate() {
      const valid = await this.$validator.validateAll();
      if (!valid) {
        console.log('入力チェックNGです!!!');
      }
    }
  }
}
</script>

以上です🍅

参考