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

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

Originally published at https://dev.to on March 19, 2021.

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store