Using Vue JS And Ionic with VeeValidate for Forms and Form Validation

Using Vue3 And Ionic Framework with VeeValidate for Forms and Form Validation
#ionic #vuejs #vue3

🆕 Updated Video Available
Vue JS Form Validation and Nested Field Arrays/Dynamic Form Fields with Vee-Validate

I am using the latest beta release of the Ionic integration with Vuejs. I am using typescript in the example and relying heavily on the new pattern of composition when creating single file components.

Created project using latest cli from Ionic using ionic start --tag vue-beta

⏰ TIMESTAMPS
0:00 - Introduction
0:26 - CLI to generate App, npm installs
1:46 - Lets Code
2:42 - Create A Form With Fields
5:07 - Adding setup to component
5:47 - Adding VeeValidate. Fields, and errors
8:58 - Adding VeeValidate. Form and Form submit
12:00 - Adding VeeValidate Rules
14:00 - Adding VeeValidate Pre-Packaged Rules
16:32 - Final Testing and Wrap Up

## BLOG POST ##

## VUE JS PLAYLIST ##

## NEWSLETTER ##

## SOURCE CODE & LINKS ##

#vue #vue3 #ionic #ionicframework #veevalidate #thefutureiswrittenincode #webdevelopment #tutorial

-~-~~-~~~-~~-~-
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
-~-~~-~~~-~~-~-

[pauln]

Your Ionic Vue stuff has been so helpful! Much appreciated!

[alexcordovac]

0:18 "I almost forgot to say that" Lol hahaha, btw nice video man I appreciate your effort to give us some nice videos

[AaronSaundersCI]

🆕Updated Video Available - VueJS Form Validation and Nested Field Arrays/Dynamic Form Fields with Vee-Validate

[unpopulargameplayer]

Thanks for your tutorial video!
I tried to import the defineRule but it says 'cannot find module'. Is there any solution to fix this issues? Thanks in advance!

[noopurp]

Hi Aaron, does Vee Validate only support the composition API or does it also support the options API? I tried it with the options API, but I got issues, especially the part where I reset the form. When I try to reset the form, the moment the field values are reset, I see the errors for those fields again. Also, when I power initialValues for the form through props (I am getting the id from the route, using which I fetch the appropriate object from the store and pass that object to the component which renders the Form element), if I clear the input which was prefilled when the form component rendered, and then go back to the component rendering the list of objects, all having an edit button and then click on edit again to go to the prefilled form, the form is not prefilled anymore, it renders the last state where I cleared the input.

[pradeepmax]

Any idea when stable version will be release with Vue?