Why vee-validate

“Forms” is a difficult subject in frontend development. Not only do you have to deal with ensuring that correct values are submitted, but you should also provide a pleasant UX for your users.

Building forms from scratch is a lot of work and you probably won’t cover all your future needs as your requirements change over time, and as you add more features.

The time you spend working on a custom form solution is better spent building your application logic.

Most form libraries will save you a lot of time, but vee-validate tackles the major pain points of forms and then gets out of your way, some of those are:

• Form state and value tracking
• UX
• Synchronous and Asynchronous Validation
• Handling submissions

vee-validate tries to handle all of the above and more by providing abstractions to these problems without any UI. This could be viewed as a double-edged sword, however, overriding UI and styles was the downfall of many component libraries and design languages.

Because of that, vee-validate abstracts away the hard parts into pure logic compositions that you can add to your existing UI and component. There is nothing to override, there is no hidden cost. You can also use vee-validate to power your components internally, and as a result you can build up your form library without having to think about the hard parts.

A great showcase of this approach is how vee-validate seamlessly integrate with almost every component UI library for Vue.js out there without any special treatment or hacks.

Getting Started

vee-validate makes use of two flavors to add validation to your forms.

• Composition API: This is the best way to use vee-validate as it allows seamless integrations with your existing UI, or any 3rd party component library.
• Higher-order components (HOC): This approach is easy to use and is strictly used within the template, you can use it if you have simple forms and don’t want to write a lot of JavaScript.

Whichever approach you prefer to use, both flavors can be used interchangeably. So you can mix and match between the two approaches as needed.

Using a package manager

For a more modern workflow with a bundler, you can install vee-validate using a package manager like yarn, npm or pnpm:

shyarn add vee-validate
# or
npm i vee-validate --save
# or
pnpm add vee-validate

Using a script tag

You can use vee-validate with a script tag and a CDN, import the library like this:

html<script src="https://unpkg.com/vee-validate"></script>

This will inject a VeeValidate global object, which you will use to access the various components and functions exposed by vee-validate.