How can I use VeeValidate with validation schemas in Vue.js?

How can I use VeeValidate with validation schemas in Vue.js?

You can use VeeValidate by defining validation schemas using Yup or your own custom validation logic. Would you like an example?

Yes, please provide an example of a validation schema using Yup.

Sure! Here's a simple example:

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
});

This schema validates an email and a password. Would you like to know how to integrate this with a form?

Yes, how do I integrate this schema with a form in Vue?

You can use the useForm hook from VeeValidate to integrate the schema. Here's a quick example:

import { useForm } from 'vee-validate';

const { handleSubmit, errors } = useForm({
  validationSchema,
});

const onSubmit = handleSubmit((values) => {
  console.log(values);
});

This will handle form submission and validation. Do you need help with anything else?