How do I use VeeValidate with Vue 3?

How do I use VeeValidate with Vue 3?

To use VeeValidate with Vue 3, first install it via npm: npm install vee-validate. Then, import and configure it in your Vue app.

Can you show me a simple example of form validation?

Sure! Here's a basic example:

import { defineRule, Form, Field } from 'vee-validate';
import * as rules from '@vee-validate/rules';

// Register rules
Object.keys(rules).forEach(rule => {
  defineRule(rule, rules[rule]);
});

const MyForm = {
  template: `
    <Form @submit="onSubmit">
      <Field name="email" rules="required|email" />
      <button type="submit">Submit</button>
    </Form>
  `,
  methods: {
    onSubmit(values) {
      console.log(values);
    }
  }
};

This will validate the email field to ensure it's required and in the correct format.

What if I want to customize error messages?

You can customize error messages by using the setLocale method. For example:

import { setLocale } from 'vee-validate';

setLocale('en', {
  messages: {
    required: 'This field is mandatory!',
    email: 'Please enter a valid email address!'
  }
});

This will change the default messages to your custom ones.

Is VeeValidate compatible with Composition API?

Yes, VeeValidate works seamlessly with Vue 3's Composition API. You can use useForm and useField hooks to manage form state and validation.