vee-validateをNuxt・Vuetifyで利用する

vee-validateはフォームバリデーションのルールをシンプルに記述できる便利なライブラリです。

Vue.jsのテンプレート内にvee-validateのコンポーネントを利用することで、比較的簡単にバリデーションを設定することができます。

前提条件

• Nuxt.jsのプロジェクトがインストールされている
• Vuetifyがインストールされている

インストール

$ yarn add vee-validate
or
$ npm install vee-validate --save

です。

プラグインファイルの作成

pluginsディレクトリにvee-validate.jsを作成します。

import { ValidationProvider, extend, localize } from "vee-validate";
import { required, max } from "vee-validate/dist/rules";
import ja from "vee-validate/dist/locale/ja.json";



extend("required", {
  ...required
});

extend("max", {
  ...max
});

localize("ja", ja);

localize()メソッドでメッセージを日本語することができます。

テンプレート例

Vuetifyのinputフィールドやボタンのコンポーネントを利用し、フォームを作成しました。

<ValidationObserver>タグでフォーム全体を囲み、

<ValidationProvider>タグで１つ１つのフォームを囲みます。

ValidationProviderタグにname属性を追加することで、画像のようなタイトルは必須項目ですというメッセージを出力することができます。

name属性を指定しないと{field}は必須項目です。といった表記になるので注意してください。