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

Vue.js

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

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

前提条件

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

インストール

です。

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

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

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

テンプレート例

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

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

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

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

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