“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
- 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.
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.
Whichever approach you prefer to use, both flavors can be used interchangeably. So you can mix and match between the two approaches as needed.
Most examples in the docs use the new script setup SFC syntax for brevity. In case you’re having difficulty following along, take some time to learn about it.
Using a package manager
For a more modern workflow with a bundler, you can install vee-validate using a package manager like
yarn add vee-validate
npm i vee-validate --save
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:
This will inject a
VeeValidate global object, which you will use to access the various components and functions exposed by vee-validate.