Vue のバリデーションライブラリ Vuelidate について
Yuki Yamadaはじめに
今回は Vueitfy のバリデーションに Vuelidate を利用する方法についてまとめてようと思います。
動作環境は、Nuxt.js に Nuxt Composition API ライブラリと Vuetify を導入済みのプロジェクトです。
VeeValidate と Vuelidate の比較
Vuetify の Form のページではバリデーションのライブラリとして、VeeValidate と Vuelidate の2つのライブラリが紹介されています。
VeeValidate は GitHub のスター数でも Vuelidate よりも多く、使用例も多く見つかるライブラリです。
現在は v4 がリリースされています。
VeeValidate は v3 と v4 でかなり書き方が変わっていおり、v4 からは vue3 のみをサポートするため現状の Nuxt.js での利用を考えると v3 を利用することになります。
一方の Vuelidate は現在、v2 のアルファ版を提供しています。
こちらは、vue2、vue3のどちらでも動作します。
Nuxt.js の Composition API でバリデーションライブラリを導入する際に、VeeValidate の方はプラグインなどの設定が必要なのですが、Vuelidate は非常に簡単に導入できます。
また Nuxt.js は近いうちに v3 へのメジャーアップデートも控えているので、同じコードベースで動作することは魅力的です。
Yuki Yamadaプロジェクトに Vuelidate の導入
Nuxt v2 で Vuetify が導入済みのプロジェクトを前提としています。
パッケージマネージャーは yarn の利用を想定しています。
@vuelidate/coreと@vuelidate/validatorsのパッケージを追加します。
yarn add @vuelidate/core @vuelidate/validators
あとは各コンポーネントファイルで適宜インポートすることで普通に使えます。