Using Vue3 And VeeValidate for Forms and Form Validation


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


Additional Examples

Setting Initial Values

<v-form v-slot="{ values }" 

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-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"


DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions.

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