VeeValidate is a popular form validation library for Vue.js, designed to make form validation easy and intuitive. This tutorial will guide you through the basics of using VeeValidate in a Vue.js application.

Step 1: Setup Your Vue.js Application

First, make sure you have a Vue.js application set up. You can create a new Vue project using Vue CLI:

npm install -g @vue/cli
vue create my-veevalidate-app
cd my-veevalidate-app

Step 2: Install VeeValidate

Install VeeValidate using npm or yarn:

npm install vee-validate
# or
yarn add vee-validate

Step 3: Basic Usage of VeeValidate

To get started, let’s create a simple form to collect user information (name and email) and validate it using VeeValidate.

1. Set up VeeValidate in your main.js:

import { createApp } from 'vue';
import App from './App.vue';
import { Field, Form, ErrorMessage, defineRule, configure } from 'vee-validate';
import * as rules from '@vee-validate/rules';
import { localize, setLocale } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';

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

// Configure VeeValidate
configure({
  generateMessage: localize({ en }), // Load the locale object
  validateOnInput: true, // Validate on input
});

setLocale('en');

const app = createApp(App);

app.component('Field', Field);
app.component('Form', Form);
app.component('ErrorMessage', ErrorMessage);

app.mount('#app');

2. Create a form component (e.g., MyForm.vue):

<template>
  <div>
    <Form @submit="handleSubmit">
      <div>
        <label for="name">Name</label>
        <Field name="name" rules="required|max:15" />
        <ErrorMessage name="name" />
      </div>
      <div>
        <label for="email">Email</label>
        <Field name="email" rules="required|email" />
        <ErrorMessage name="email" />
      </div>
      <button type="submit">Submit</button>
    </Form>
  </div>
</template>

<script>
export default {
  methods: {
    handleSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

Step 4: Adding Custom Validation Rules

You can define custom validation rules in VeeValidate.

1. Define a custom rule:

import { defineRule } from 'vee-validate';

defineRule('noAdmin', value => {
  if (value === 'admin') {
    return 'Username cannot be "admin"';
  }
  return true;
});

2. Use the custom rule in your form:

<template>
  <div>
    <Form @submit="handleSubmit">
      <div>
        <label for="username">Username</label>
        <Field name="username" rules="required|noAdmin" />
        <ErrorMessage name="username" />
      </div>
      <div>
        <label for="email">Email</label>
        <Field name="email" rules="required|email" />
        <ErrorMessage name="email" />
      </div>
      <button type="submit">Submit</button>
    </Form>
  </div>
</template>

<script>
export default {
  methods: {
    handleSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

Step 5: Localization

VeeValidate supports multiple languages and localization.

1. Install the i18n package:

npm install @vee-validate/i18n
# or
yarn add @vee-validate/i18n

2. Configure localization in your main.js:

import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import fr from '@vee-validate/i18n/dist/locale/fr.json';

configure({
  generateMessage: localize({
    en,
    fr
  }),
});

setLocale('en'); // Set default locale

3. Switching locales dynamically:

<template>
  <div>
    <select v-model="locale" @change="changeLocale">
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
    <Form @submit="handleSubmit">
      <div>
        <label for="name">Name</label>
        <Field name="name" rules="required|max:15" />
        <ErrorMessage name="name" />
      </div>
      <div>
        <label for="email">Email</label>
        <Field name="email" rules="required|email" />
        <ErrorMessage name="email" />
      </div>
      <button type="submit">Submit</button>
    </Form>
  </div>
</template>

<script>
import { setLocale } from '@vee-validate/i18n';

export default {
  data() {
    return {
      locale: 'en'
    };
  },
  methods: {
    handleSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
    changeLocale() {
      setLocale(this.locale);
    }
  }
};
</script>

Conclusion

VeeValidate is a comprehensive form validation library for Vue.js, providing a range of features to handle form validation efficiently. This tutorial covers the basics, but VeeValidate offers a lot more functionality that you can explore in its official documentation.