You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Most popular Vue.js UI libraries come with their own built-in validation logic in their form components. If you find yourself not satisfied with said library's validation logic, you can use vee-validate to validate those components.
12
+
Most popular Vue.js UI libraries come with their own built-in form logic and some may tackle a lot of what vee-validate tackles. If you find yourself not satisfied with said library's logic, you can add vee-validate power up these components.
13
13
14
-
vee-validate is UI-agnostic, it doesn't offer any special treatment for the elements/components under validation as long as they emit the right events.
14
+
vee-validate is UI-agnostic, it doesn't offer any special treatment for the elements/components as long as they emit the right events.
15
15
16
-
Integrating vee-validate can be different for each UI library, it mostly depends on the library's ability to outsource the validation logic to 3rd party logic and how it tracks the form field values.
16
+
Integrating vee-validate can be different for each UI library, it mostly depends on the library's ability to outsource the form logic to 3rd party logic and how it tracks the form field values.
17
17
18
18
In the next few examples you will find examples on how to do that in various ways with the most popular Vue.js libraries in no particular order.
Copy file name to clipboardExpand all lines: docs/src/pages/guide/overview.mdx
+14-11Lines changed: 14 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,30 +7,33 @@ order: 1
7
7
8
8
importDocTipfrom'@/components/DocTip.vue';
9
9
10
-
# Overview
10
+
# Why vee-validate
11
11
12
-
Form validation 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.
12
+
"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.
13
13
14
-
Doing form validation by hand is a lot of work and you probably won't cover all your needs if you decide to build your own.
14
+
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.
15
15
16
-
**The time you spend working on a custom form validation solution is better spent building your application logic**.
16
+
**The time you spend working on a custom form solution is better spent building your application logic**.
17
17
18
-
Most validation libraries will save you a lot of time, but `vee-validate` tackles the major pain points of form validation and addresses them in a very flexible way:
18
+
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:
19
19
20
-
-Tracking form state
21
-
-UI and UX
20
+
-Form state and value tracking
21
+
- UX
22
22
- Synchronous and Asynchronous Validation
23
23
- Handling submissions
24
24
25
-
By only handling the complex stuff, vee-validate gets out of your way of building your awesome forms.
25
+
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.
26
+
27
+
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.
28
+
29
+
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.
26
30
27
31
## Getting Started
28
32
29
33
vee-validate makes use of two flavors to add validation to your forms.
30
34
31
-
The first approach is using higher-order components (HOC) to validate your fields. In the next examples you will find the `Field`, `Form`, and `ErrorMessage` components being used.
32
-
33
-
The second flavor is using the composition API to add validation logic into your existing components. You will be using `useField` and `useForm` to validate your fields and data.
35
+
-**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.
36
+
-**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.
34
37
35
38
Whichever approach you prefer to use, both flavors can be used interchangeably. So you can mix and match between the two approaches as needed.
0 commit comments