Setup Vue.js Form Validation using VeeValidate with Bootstrap 4

May 31, 2019


yarn add vee-validate


npm install vee-validate --save


Edit src/main.js to include

import Vue from 'vue';
import VeeValidate from 'vee-validate';


Vue.js Component

This is a simple form with email input and a submit button.

  • Validation UI will not trigger before button is clicked (controlled by state.isValidation).
  • After button is clicked, validation UI is updated as the text input changed.
    <form @submit.prevent="onSubmit" class="needs-validation" novalidate>
      <div class="form-row  justify-content-md-center">
        <div class="my-3">Join our early access program and be the first to experience the warmth of 暖心芽.</div>
      <div class="form-row justify-content-md-center">
        <div class="col-md-auto mb-3">
          <label for="inputEmail" class="sr-only">Your email</label>
          <input v-model="email" v-validate="{ required: true, email: true }" :class="{'form-control': true, 'is-invalid': errors.has('email') && state.isValidation, 'is-valid': !errors.has('email')} && state.isValidation" name="email" type="email" id="inputEmail" placeholder="Your email">
          <div class="invalid-feedback">{{ errors.first('email') }} </div>
        <div class="col-md-auto mb-3">
          <button type="submit" class="btn btn-primary">Request Invite</button>

export default {
  data() {
    return {
      email: '',
      state: {
        isValidation: false
  methods: {
    onSubmit() {;
    save() {
      this.isValidation = true
      this.$validator.validate().then(valid => {
        if (!valid) {

        else {
          // do something

NOTE: Refer Setup Bootstrap 4 With Vue Cli 3 Webpack.

NOTE: There is also an option to use Bootstrap - Forms Tooltips for error messages.


This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.