Vue2でVeeValidateの使い方

VeeValidateの2.xと3.xで色々変わってヒットした記事が合わなかったので備忘録として残しておきます
ドキュメントは[こちら](https://vee-validate.logaretm.com/v3/overview.html)

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

# インストール

```
npm install vee-validate@3 --save
```

# コンポーネントの登録

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

```js:app.js
import { ValidationProvider } from 'vee-validate';

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

## シングルファイルコンポーネント
一部のコンポーネント内のみで使用する場合

```vue:hoge.vue
<script>
import { ValidationProvider } from "vee-validate";

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

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

vee-validateが初期で用意しているバリデーションルールは[こちら](https://vee-validate.logaretm.com/v3/guide/rules.html#importing-the-rules)
カスタマイズもできますが、まずは基本的なルールを使用してみます。

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

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

## グローバル

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

extend('required', required)

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

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

```vue: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. 必要な理由は[こちら](https://vuejs.org/v2/guide/components-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots)
5. errors変数内のエラーメッセージを表示する。

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

```vue: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`インポートする
ロケールの設定とアクティブ化をします。

**グローバル**

```js: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);
```

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

```vue: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`を追加し、フィールド名のプロパティと日本語の名称を設定します。

```js
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: "名前",
    },
  },
});

```

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