DEV Community

Cover image for Managing Form Validation In Vue with Custom Form Components And Vee-Validate Composition API
Aaron K Saunders
Aaron K Saunders

Posted on

Managing Form Validation In Vue with Custom Form Components And Vee-Validate Composition API

Managing Form Validation In Vue with Custom Form Components And Vee-Validate Composition API

Alt Text

We are going to show how to create decoupled form components that can be used/reused in your application and utilizing the composition API functionality of Vee Validate and Yup to validate and submit the form.

In the graphic above, the Credentials section is a separate component from the Personal Info section yet we are able to manage retrieving the values of the components and properly validate the form fields as if both components were just elements in one form.

The code can work with any Vue 3 application, I am just using Ionic Framework UI Components because that is what I work with every day

Video

Links

Top comments (1)

Collapse
 
roblevintennis profile image
Rob Levin

vee-validate and its useField composition api module et al seems pretty sweet. I've recently done something similar using Vest which I really like because:

  • I can use it with Svelte, Vue, React, etc.
  • It's DSL is familiar as it looks just like a unit-testing framework
  • It's modular and orthogonal so I can, for example, use it with my own fairly large UI component framework

I just made a little demo script:
dev.to/roblevintennis/agnosticui-v...

I'll have to play with vee-validate though -- it does look pretty sweet and I like it's first-class composition api vue support 👍