インストール

yarn add vee-validate

設定

設定ファイル作成

勢いよく取り組んでみたものの、早速ここでドハマリしてしまう。

app/plugins/veeValidate.js

（よくある記載例）

import Vue from "vue"
import { ValidationProvider, ValidationObserver } from "vee-validate"

Vue.component("ValidationProvider", ValidationProvider)
Vue.component("ValidationObserver", ValidationObserver)

今回ネットの記事や公式を参考に上記の通り記載したにも関わらず、componentファイルでVue.componentしたcomponentを呼び出す事が出来なかった。解決出来なかったため、以下の通りルールだけ共通化した。（面倒だがcomponentは各componentファイルで呼び出す・・・）

（今回使用した設定）

import { extend } from "vee-validate"
import { required } from "vee-validate/dist/rules"

extend("required", {
  ...required,
  message: "必須項目です",
})

（参考）Basics | VeeValidate

nuxt.config.jsへ追加

  plugins: [
    '@/plugins/utils',
    '@/plugins/axios',
    '@/plugins/veeValidate.js'
  ],

使ってみる

その1_必須入力箇所×ボタン押下制御

必須入力箇所を設けて、入力されるまで押下不可能なボタンを作りました。

<ValidationObserver v-slot="{ invalid }">
  <ValidationProvider v-slot="{ errors }" rules="required">
    <b-input
      id="inline-form-input-name"
      v-model="book.title"
      class="mb-2 mr-sm-2 mb-sm-0"
      placeholder="タイトル"
    />
    <span class="text-danger">{{ errors[0] }}</span>
  </ValidationProvider>
  <b-button
    class="mb-2 mr-sm-2 mb-sm-0 mt-3"
    variant="primary"
    :disabled="invalid"
    @click="addReadingList()"
  >
    読んでるリストに追加する
    <b-icon-plus />
  </b-button>
</ValidationObserver>
<script>
import { ValidationProvider, ValidationObserver } from "vee-validate"
</script>

f:id:hatehate-nazenaze:20200812172105p:plain

ValidationProvider

ざっくり説明すると、バリデーションを設定したい要素をこのコンポーネント配下に配置することでバリデーションを設定する事が可能。
v-slot="{ errors }"の中に配列形式でエラーメッセージが入っており、このコンポーネント配下では{{}}で囲んで表示させる事が可能。今回はspanタグを使ってエラーメッセージを表示させました。

ValidationObserver

ざっくり説明すると、ValidationProviderをこのコンポーネント配下に配置（複数可）する事で、バリデーションが通っているかチェックする事が出来る。observerは日本語で監視者・観測者の意味だそう。
v-slot="{ invalid }"で使用しているinvalidは配下のValidationProviderの要素が1つでもバリデーションに引っかかっていたらtrueとなる要素。今回はそれを利用してボタンをdisableにしている。その他にも色々な検知条件がある。（下のリンク参照）
Validation Observer | VeeValidate

その2_必須入力箇所×入力形式制御×ボタン押下制御

その1の例にメールアドレス形式縛りも加えてみました。（タイトルなのにメールアドレス形式・・・）

<ValidationObserver v-slot="{ invalid }">
  <ValidationProvider v-slot="{ errors }" rules="required|email">
    <b-input
      id="inline-form-input-name"
      v-model="book.title"
      class="mb-2 mr-sm-2 mb-sm-0"
      placeholder="タイトル"
    />
    <span class="text-danger">{{ errors[0] }}</span>
  </ValidationProvider>
  <b-button
    class="mb-2 mr-sm-2 mb-sm-0 mt-3"
    variant="primary"
    :disabled="invalid"
    @click="addReadingList()"
  >
    読んでるリストに追加する
    <b-icon-plus />
  </b-button>
</ValidationObserver>