Form Validation in a Vue 3 App with Vee-Validate 4 — Validation and Submission

Photo by Smartworks Coworking on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Handling Submissions

We can submit form data directly to a given URL.

For example, we can write:

<template>
  <Form
    method="post"
    action="https://reqres.in/api/users"
    :validation-schema="schema"
  >
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />
    <input type="submit" />
  </Form>
</template>
<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";
export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });
    return {
      schema,
    };
  },
};
</script>

We set the method to 'post' and action to the URL that we want to submit our form data to do to the submission.