Form Validation in a Vue 3 App with Vee-Validate 4 — Validation and Submission
Published in
3 min readFeb 21, 2021
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.