NuxtJSでVeeValidate 3.x系を使う

前回の記事で書いたプロフィールサイトでお問い合わせ画面を作ってます。
どうせ作るんならフォームバリデーションを追加してみることにします。なのでVeeValidateを使ってみます。
tekitoumemo.hatenablog.com

Nuxtの設定は以下をほぼパクリました設定から「こんぐらい使えれば一通り大丈夫だよね」ってところまで書きます。
Available Rules | VeeValidate

設定

pluginsに以下作成
plugins/vee-validate.js

import { extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

// No message specified.
extend('email', email)

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
})

nuxt.config.jsに以下追加

  plugins: ['~/plugins/vee-validate.js'],

で起動すると以下のエラー

これはvee-validate/dist/rulesがES6なのでBabel で変換しないといけません。
なのでbuild. transpileに以下を追加します。

build: {
    transpile: ['vee-validate/dist/rules'],

    extend(config, ctx) {}
    ...
  }

これでVeeValidateの準備が出来ました。

あとはこんな感じ（いきなり雑）

<ValidationProvider v-slot="{ errors }"  rules="required">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
import { ValidationProvider } from 'vee-validate'

export default {
  components: {
    ValidationProvider
  },
}

こんな感じになります。

emailなど、空白＋アドレスの形式確認みたいな複数条件の場合はパイプでつなげばどちらのバリデーションが有効になります。
rules="required|email"

独自のエラーメッセージを入力したい場合は{_field_}プレースホルダーを使います。

// Override the default message.
extend('required', {
  ...required,
  message: '{_field_}は必須項目です。'
})

こんな感じになります。

カスタムバリデーション

カスタムバリデーションに引数を渡すことも可能です。rules="max:10"は10文字以上入力された場合、エラーにします。

extend('max', {
  validate: (value, args) => {
    return value.length <= args.length
  },
  message: '{_field_}長すぎやろ',
  params: ['length']
})

どれか１つでもエラーの場合はボタンをdisableにする

ValidationObserverを使います。invalidはどれか１つでも無効の場合にtrueになります。いろいろあるのでここ参考に

<ValidationObserver v-slot="{ invalid }" slim>
    <ValidationProvider
              v-slot="{ errors }"
              name="メールアドレス"
              rules="required|email"
            >
    </ValidationProvider>
    ....
</ValidationObserver>

ここまでできればformについては大体まかなえそう。

まとめ

Angularはreactive-formsがあるからform強いなーと思ってたけど、VeeValidate相当使いやすい。2系は設定がちょっとだるいらしいのでシンプルでよかった。