nuxt.jsでフォームにバリデーションをつける。 #Nuxt

個人でRailsとnuxtを利用したWebアプリケーション開発を行なっています。
nuxt(Vue)でフォームに対してバリデーションをつけたいと思ったときに使われるVeeValidateがお手軽だったので、導入方法をまとめます。

前提として

nuxt.jsのアプリケーションが作成手順に関してはこの記事では割愛します。
- 公式を参考に作成をしてください。
yarnのコマンドを書いておりますが、npmを利用の場合は適宜変更をお願いします。

導入手順

VeeValidateのインストール

nuxt.jsのアプリケーションのディレクトリで下記コマンドを実行します。

$ yarn add vee-validate

package.json内にVeeValidateがインストールされてるかと思います。(dependencies下に追加されてればOKです。)

package.json

{
   "dependencies": {
      "vee-validate": "^3.0.11"
   }
}

Pluginとして読み込む

pulgins下にVeeValidateの設定用のファイルを作成します。

plugins/vee-validate.js

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージを日本語化します
import { required, numeric } from 'vee-validate/dist/rules' // 使用するバリデーションルールを指定します。

// VeeValidateが用意している各ルールを使用するよう指定
extend('required', required) // 必須項目のバリデーション
extend('numeric', numeric)

// 下記は固定で書く
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
localize('ja', ja)

nuxt.config.jsで作成した設定用のファイルを読み込むよう編集します。

nuxt.config.js

plugins: [
    // 下記追加
    '~/plugins/vee-validate'
]

build: {
    // 下記追加
    transpile: [
      "vee-validate/dist/rules"
    ]
}

フォームのバリデーションを実現する

今回はお試しとしてもともとあるvueファイルに編集する形でフォームを作成します。

pages/index.vue

<template>
  <div class="form">
    <div class="field">
      <label class="label">ID</label>
      <div class="control">
        <validation-provider v-slot="{ errors }" rules="required" name="ID">
          <input v-model="id" class="input" type="text" />
          <p v-show="errors.length" class="help is-danger">
            {{ errors[0] }}
          </p>
        </validation-provider>
      </div>
    </div>
    <div class="field">
      <label class="label">PASSWORD</label>
      <div class="control">
        <validation-provider v-slot="{ errors }" rules="required" name="パスワード">
          <input v-model="password" class="input" type="password">
          <p v-show="errors.length" class="help is-danger">
            {{ errors[0] }}
          </p>
        </validation-provider>
      </div>
    </div>
  </div>
</template>

<style scoped>

.container {
  text-align: center;
}

.is-danger {
  color: red;
}
</style>

<script>

export default {
  data () {
    return {
      id: '',
      password: ''
    }
  }
}
</script>

下記のように入力が何もないと、エラーメッセージが出るようになります。(bulmaとか当てると綺麗なフォームになるのですが、今回は適当にスタイル当ててます。)
エラーメッセージが存在するときには作成ボタンを押せないようにするフラグなどを用意すれば、今風のフォームが出来そうですね！

提供されているバリデーション

VeeValidateには標準でバリデーションのルールが備わっています。
ルールのソースを見ると何があるかは網羅できます

rules	出来ること
require	入力を必須にする
numeric	数字の入力のみ受けつける
email	Eメールの入力のみ受けつける
max	最大文字数を制限する
min	最小文字数を制限する
max_value	数値の最大値を制限する
min_value	数値の最小値を制限する
between	指定した間の数値に制限する

導入がすんなり出来てルールも豊富なので非常に使い勝手が良いと感じました！
エラーメッセージの内容やカスタムバリデーションによる拡張も可能とのことで、今後も触ってみようと思います！
またこういった形でプラグイン等触ってみて良さそうなの見つけたら導入方法から発信していこうと思います！