<p>Managing Form Validation with Custom Form Components And <a target="_blank" href="https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms">Vee-Validate</a> Composition API</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616172214177/8v0x6W_rR.png" alt="Alt Text" /></p>
<p>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 <a target="_blank" href="https://github.com/jquense/yup#readme">Yup</a> to validate and submit the form. </p>
<p>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.</p>
<p>The code can work with any Vue 3 application, I am just using <a target="_blank" href="https://ionicframework.com/vue">Ionic Framework UI Components</a> because that is what I work with every day</p>
<h3 id="video">Video</h3>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=2ET7IH57XwQ">https://www.youtube.com/watch?v=2ET7IH57XwQ</a></div>
<h3 id="links">Links</h3>
<ul>
<li>Vee Validate - <a href="https://vee-validate.logaretm.com/v4/guide/composition-api/validation" class="autolinkedURL autolinkedURL-url" target="_blank">vee-validate.logaretm.com/v4/guide/composit..</a></li>
<li>ionic Vue - <a href="https://ionicframework.com/docs/vue/overview" class="autolinkedURL autolinkedURL-url" target="_blank">ionicframework.com/docs/vue/overview</a></li>
<li>Source Code - <a href="https://github.com/aaronksaunders/ionic-vue3-veevalidate-composition-api" class="autolinkedURL autolinkedURL-url" target="_blank">github.com/aaronksaunders/ionic-vue3-veeval..</a></li>
<li>Vue Vee Validate Playlist - <a href="https://buff.ly/30U15iV" class="autolinkedURL autolinkedURL-url" target="_blank">buff.ly/30U15iV</a></li>
</ul>


Managing Form Validation with Custom Form Components And [Vee-Validate](https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms) Composition API

![Alt Text](https://cdn.hashnode.com/res/hashnode/image/upload/v1616172214177/8v0x6W_rR.png)

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](https://github.com/jquense/yup#readme) 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](https://ionicframework.com/vue) because that is what I work with every day

### Video
%[https://www.youtube.com/watch?v=2ET7IH57XwQ]

### Links
- Vee Validate - https://vee-validate.logaretm.com/v4/guide/composition-api/validation
- ionic Vue - https://ionicframework.com/docs/vue/overview
- Source Code - https://github.com/aaronksaunders/ionic-vue3-veevalidate-composition-api
- Vue Vee Validate Playlist - https://buff.ly/30U15iV


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

Ionic Framework React Native Javascript ReactJS VueJS Web Development Mobile Development Expo Tutorials Video Tutorials