vee-validate/nuxtjsに導入する

はじめに

• 前回、nuxtjs+vuetifyjs/vee-validateを調査しましたが、vuetifyjsを利用しない場合の実装方法が異なったので調査した内容を下記にまとめました。 px-wing.hatenablog.com

コード

• 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, max, min, email, size } from 'vee-validate/dist/rules'

# 利用するルールを指定する
extend('required', required)
extend('email', email)
extend('max', max)
extend('min', min)
extend('size', size)

Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
localize('ja', ja)

• nuxt.confg.jsファイルに下記の記述を追記する

  plugins: [
    '@/plugins/vee-validate.js'
  ],
  build: {
    transpile: [
      "vee-validate/dist/rules"
    ]    
  },

• pageの埋め込みたい場所に下記のフォームを追加する

    <validation-observer v-slot="{ handleSubmit }">
      <form ref="form" model="valid" lazy-validation @submit.prevent>
      <table>
        <tr>
          <td>メールアドレス</td>
          <td>
            <validation-provider v-slot="{ errors }" rules="required|email" name="メールアドレス">
              <input v-model="email" type="text" placeholder="メールアドレス">
              <p class="error-message">{{ errors[0] }}</p>
            </validation-provider>
          </td>
        </tr>
        <tr>
          <td>パスワード</td>
          <td>
            <validation-provider v-slot="{ errors }" rules="required" name="パスワード">
              <input v-model="passworfd" type="text" placeholder="パスワード">
              <p class="error-message">{{ errors[0] }}</p>
            </validation-provider>
          </td>
        </tr>
        <tr>
        <td colspan="2">
        <button class="form-btn2" style="background-color: gray; color: white" @click="handleSubmit(validate)">
          ログイン
        </button>
        </td>
        </tr>
      </table>
      </form>
    </validation-observer>

実際の画面