VeeValidate Hellow World

VeeValidate.vue

<script lang="ts">
import { Field, Form, ErrorMessage } from 'vee-validate';

export default {
  components: {
    Form,
    Field,
    ErrorMessage
  },
  methods: {
    onSubmit(values: any) {
      console.log(values);
    },
    validateEmail(value: any) {
      // if the field is empty
      if (!value) {
        return 'This field is required';
      }

      // if the field is not a valid email
      const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
      if (!regex.test(value)) {
        return 'This field must be a valid email';
      }

      // All is good
      return true;
    },
  },
};
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <Form @submit="onSubmit">
      <Field type="email" name="email" :rules="validateEmail"/>
      <p>
        <ErrorMessage name="email" />
      </p>
      <button>Sign up for newsletter</button>
    </form>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>