Nuxt.jsでバリデーションするためにVeeValidateを使う

$ npm install vee-validate --save

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate' // 使用する機能
import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージの日本語化用
import { required, max, email } from 'vee-validate/dist/rules' // 使用するバリデーションルール

// VeeValidateがデフォルトで用意している各ルールを使用するよう指定
extend('required', required) // 必須項目のバリデーション
extend('email', email) // emailのバリデーション
extend('max', max) // 最大文字数のバリデーション

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

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate' // 使用する機能
import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージの日本語化用
import * as rules from 'vee-validate/dist/rules' // 全てのバリデーションルール

// forループで全てのバリデーションルールをextendで登録する
for (let rule in rules) {
  extend(rule, rules[rule])
}

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

module.exports = {
  mode: 'universal',
// ...省略...
/*
  ** Plugins to load before mounting the App
  */
  plugins: [
     // 以下を追記
    { src: '@/plugins/vee-validate'}
  ],

// ...省略...

 build: {
    // 以下を追記
    transpile: [
      "vee-validate/dist/rules"
    ],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }

<template>
  <section class="section">
    <div class="columns is-mobile">
      <div class="field">
        <label class="label">テキストフォーム</label>
          <div class="control">
            <validation-provider v-slot="{ errors }" rules="required" name="テキスト項目">
             <input v-model="textValue" class="input" type="text" placeholder="Text input" />
             <p v-show="errors.length" class="help is-danger">
               {{ errors[0] }}
             </p>
           </validation-provider>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Card from '~/components/Card'

export default {
  name: 'HomePage',
  data () {
    return {
      textValue: ''
    }
  }
}
</script>

<template>
  <section class="section">
    <div class="columns is-mobile">
      <validation-observer v-slot="{ invalid }">
      <div class="field">
        <label class="label">お名前</label>
          <div class="control">
            <text-field-with-validation v-model="textValue" rules="required" fieldname="お名前" />
        </div>
      </div>
      <div class="field">
        <label class="label">メールアドレス</label>
          <div class="control">
            <text-field-with-validation v-model="emailValue" rules="required|email" fieldname="メールアドレス" />
        </div>
      </div>
      <div class="field">
          <div class="control">
            <button class="button is-link" :disabled="invalid">送信する</button>
            <p v-show="invalid" class="help is-danger">
             全ての必須項目を入力すると「新規追加」ボタンが有効化されます。
            </p>
        </div>
      </div>
    </validation-observer>
    </div>
  </section>
</template>

<script>
import TextFieldWithValidation from '@/components/TextFieldWithValidation'

export default {
  name: 'HomePage',
  components: {
    TextFieldWithValidation
  },
  data () {
    return {
      textValue: '',
      emailValue: ''
    }
  }
}
</script>

<template>
  <validation-provider v-slot="{ errors }" :rules="rules" :name="fieldname">
    <input
       v-model="innerValue"
      :placeholder="fieldname"
    />
    <p v-show="errors.length" class="help is-danger">
      {{ errors[0] }}
    </p>
  </validation-provider>
</template>

<script>
export default {
  name: 'TextFieldWithValidation',
  props: {
    rules: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    fieldname: {
      type: String,
      required: true
    }
  },
  computed: {
    innerValue: {
      get () {
        return this.$props.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<template>
  <validation-observer v-slot="{ invalid, passes }">
    <form @submit.prevent="passes(submit)">
      <text-field-with-validation rules="required" v-model="first" />

      <text-field-with-validation rules="required" v-model="second" />

      <button :disabled="invalid">Submit</button>
    </form>
  </validation-observer>
</template>

<script>
export default {
  methods: {
    submit() {
      // メソッドには追記修正不要
    }
  }
};
</script>

<template>
  <validation-observer ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
      <text-field-with-validation rules="required" v-model="first" />

      <text-field-with-validation rules="required" v-model="second" />

    <button :disabled="invalid">Submit</button>
  </validation-observer>
</template>

<script>
export default {
  methods: {
    async submit () {
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        // バリデーションが通る前に送信ボタンがクリックされた場合の処理
      }
       // バリデーションが通っている状態で送信ボタンがクリックされた場合の処理
    }
  }
};
</script>

<template>
  <validation-observer ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
      <text-field-with-validation rules="required" v-model="first" />

      <text-field-with-validation rules="required" v-model="second" />

    <button :disabled="invalid">Submit</button>
  </validation-observer>
</template>

<script>
export default {
  methods: {
    async submit () {
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        // バリデーションが通る前に送信ボタンがクリックされた場合の処理
      }
       // バリデーションが通っている状態で送信ボタンがクリックされた場合の処理
       // フォーム送信などの処理完了後、以下のリセットを呼び出す。
       requestAnimationFrame(() => {
        this.$refs.observer.reset()
      })
    }
  }
};
</script>