Vue2でVeeValidateの使い方

VeeValidateの2.xと3.xで色々変わってヒットした記事が合わなかったので備忘録として残しておきます
ドキュメントはこちら

前提

Vueの2系を使用しています。

インストール

npm install vee-validate@3 --save

コンポーネントの登録

グローバル

どのコンポーネントからでも使用できるようにする場合

app.js

import { ValidationProvider } from 'vee-validate';

Vue.component('validation-provider', ValidationProvider);

シングルファイルコンポーネント

一部のコンポーネント内のみで使用する場合

hoge.vue

<script>
import { ValidationProvider } from "vee-validate";

export default {
  components: {
    ValidationProvider,
  },
}
</script>

バリデーションをインポートする

vee-validateが初期で用意しているバリデーションルールはこちら
カスタマイズもできますが、まずは基本的なルールを使用してみます。

バリデーションを適用する場合、まずはルールのインポートが必要になります。

extendと必要なルールの追加をします。

グローバル

app.js

// extendを追加してます
import { ValidationProvider, extend } from "vee-validate";
import { required } from 'vee-validate/dist/rules';

extend('required', required)

Vue.component('validation-provider', ValidationProvider);

シングルファイルコンポーネント

hoge.vue

<script>
import { ValidationProvider, extend } from "vee-validate";
import { required } from 'vee-validate/dist/rules';

// mountedでも可
extend('required', required)

export default {
  components: {
    ValidationProvider,
  },
}
</script>

バリデーションを適用する

実際に先程設定したrequiredルールを使用してみます。

1. バリデーションをかける項目をvalidation-providerタグで囲みます。
2. rulesにextendで設定したルール名を入れる
3. nameに属性名を入れる(エラーメッセージで◯◯は必須です の◯◯に使用される)
4. v-slot={ errors }を追加する。
   1. 必要な理由はこちら
5. errors変数内のエラーメッセージを表示する。

これでバリデーションがかかります

hoge.vue

<template>
  <validation-provider rules="required" name="firstName" v-slot={ errors }>
     <input v-model="name">
     <span>{{ errors[0] }}</span>
  </validation-provider>
</template>

<script>
import { ValidationProvider, extend } from "vee-validate";
import { required } from 'vee-validate/dist/rules';

// mountedでも可
extend('required', required)

export default {
  data(){
    return {
      name: ''
    }
  },
  components: {
    ValidationProvider,
  },
}
</script>

日本語化

localizeと言語のjsonインポートする
ロケールの設定とアクティブ化をします。

グローバル

hoge.js

import { ValidationProvider, extend, localize } from "vee-validate";
import ja from "vee-validate/dist/locale/ja.json";

extend('required', required);
localize('ja', ja);

Vue.component('validation-provider', ValidationProvider);

シングルファイルコンポーネント

hoge.vue

<script>
import { ValidationProvider, extend, localize } from "vee-validate";
import { required } from 'vee-validate/dist/rules';
import ja from "vee-validate/dist/locale/ja.json";

// 両方mountedでも可
extend('required', required);
localize('ja', ja);

export default {
  components: {
    ValidationProvider,
  },
}
</script>

これで日本語にはなりますが、フィールド名がnameに設定したもののままになっているので
firstNameは必須項目ですのようになっていまいます

フィールド名の日本語化

localize('ja', ja);はロケールの設定とアクティブ化を行っています。
フィールド名の設定は別で必要になります。
ロケールのオブジェクトにnamesを追加し、フィールド名のプロパティと日本語の名称を設定します。

import { ValidationProvider, extend, localize } from "vee-validate";
import { required } from 'vee-validate/dist/rules';
import ja from "vee-validate/dist/locale/ja.json";

extend('required', required);

// 
localize('ja', ja);
localize({
  ja: {
    names: {
      firstName: "名前",
    },
   },
});

// 下記のようにもかけます
localize('ja'); // 言語を日本語に
localize({
  ja: {
    messages: ja.messages, // メッセージのアクティブ化
    names: {
      firstName: "名前",
    },
  },
});

以上で基本的な使い方になります。
ドキュメントがしっかりしてあるので色々なんとかなりそうです。