---
layout: ../../layouts/PageLayout.astro
title: Overview
description: Getting started with VeeValidate
order: 1
---

import DocTip from '@/components/DocTip.vue';

# 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](/examples/ui-libraries/) 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.

<DocTip title="Setup SFC">

Most examples in the docs use the new [script setup](https://vuejs.org/api/sfc-script-setup.html#script-setup) SFC syntax for brevity. In case you're having difficulty following along, take some time to learn about it.

</DocTip>

### 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`:

```sh
yarn 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.
