Using Vue3 And VeeValidate for Forms and Form Validation

Overview

Forms and Form Validation are a key part of many applications so I wanted to create a small sample application showing one library VeeValidate Template Based Validation for Vue.js, and how to integrate it with the new Vue3 Release.

Since a lot of folks who read my content know I work with Ionic Framework, I have implemented this solution with Ionic Vue3 Web Components

Video

• See Source Code from Video

Additional Examples

• See Source Code for Additional Examples

Setting Initial Values

<v-form v-slot="{ values }" 
   @submit="onSubmit" 
   :initialValues="formData">
</v-form>

In the script, define the object with the appropriate key/value pairs to be assigned to the form

setup() {
  // set some initial values
  const formData = ref<any>({
    title: "Aaron",
    body: null,
    gender: "MALE",
    save : false
  });

  return { formData };
},

Working With Toggle, CheckBoxes

<ion-item>
  <ion-label>SAVE IT</ion-label>
  <v-field name="save" v-slot="{ field }">
    <!-- we need to set the checked property -->
    <ion-toggle v-bind="field" name="save" 
       :checked="field.value">
    </ion-toggle>
  </v-field>
</ion-item>

Links

• Announcing the (new) Ionic Vue Beta
• Vue3 Release
• VeeValidate Template Based Validation for Vue.js