VueValidateのVer3を使う

Vue.js

VueValidate

Inputフォームなどのユーザー入力のバリデーションをやってくれるライブラリのようです。

Ver3

Qiitaの記事とかで見つけたのですが、
そのときの記事はVer2系だったようで、Ver3では随分と書き方が変わっているようで、メモしておきます

インストール

logaretm.github.io

yarn add vee-validate

Vueへの登録

import { ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationProvider
  }
};

このように、コンポーネントとしてimportします。(helloWorld.vueなどで個別にインポートする）
単一ファイルコンポーネントそれぞれ使うタイミングでインポートすればOKということのようです。（これが公式推奨）

しかしながら、自分はグローバルにimportしました。

import { ValidationProvider } from 'vee-validate';

Vue.component('ValidationProvider', ValidationProvider);

これをmain.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'
});

使い方というと、

<ValidationProvider name="email" rules="required|email" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

このように、importしたコンポーネントでinputを囲うように使用します。
これでemailのルールが適用されます。

非常に便利