vee-validate and yup

package.json

@@ -27,10 +27,13 @@
         "laravel-echo": "^1.13.0",
         "pusher-js": "^7.3.0",
         "sweetalert2": "^11.4.23",
+        "vee-validate": "^4.12.4",
         "vue-google-charts": "^1.1.0",
         "vue-multiselect": "^3.0.0-beta.3",
+        "vue-recaptcha": "^3.0.0-alpha.2",
         "vue3-easy-data-table": "^1.5.47",
         "vue3-multiselect-checkboxed": "^0.0.9",
-        "vuedraggable": "^4.1.0"
+        "vuedraggable": "^4.1.0",
+        "yup": "^1.3.3"
     }
 }

resources/js/Pages/IkeaAbout.vue

@@ -1,37 +1,34 @@
 <script setup>
-import {
-    getCurrentInstance,
-    ref,
-    onMounted,
-    onUnmounted,
-    nextTick,
-    computed
-} from 'vue';
-import GuestLayout from '../Layouts/GuestLayout.vue';
-import { useForm} from '@inertiajs/inertia-vue3'
-import axios from 'axios';
 
-const form = useForm({
+import GuestLayout from '../Layouts/GuestLayout.vue';
-    name: "",
+//import { useForm} from '@inertiajs/inertia-vue3'
-    email: "",
+import axios from 'axios';
-    subject: "",
+import { Form, Field } from 'vee-validate';
-    message: "",
+import * as yup from 'yup';
+import { defineProps } from "vue";
+import Swal from "sweetalert2";
+
+const schema = yup.object().shape({
+    name: yup.string().required('Name is required'),
+    email: yup.string().email('Email is invalid').required('Email is required'),
+    subject: yup.string().required('Subject is required'),
+    message: yup.string().required('Message is required'),
+  //  recaptcha: yup.string().required('Please verify you are human'),
 });
 
-const submit = async (data) => {
+function onSubmit(data) {
     console.log("DATA=", data);
-    console.log("FORM=", form);
     try {
-        const response = await axios.post(route("ajax.send.email"), {
+        const response = axios.post(route("ajax.send.email"), {
-            name: form.name,
+            name: data.name,
-            email: form.email,
+            email: data.email,
-            subject: form.subject,
+            subject: data.subject,
-            message: form.message,
+            message: data.message,
         });
 
         console.log("TEST=", response.data);
     } catch (e) {
-        const response = await Swal.fire({
+        const response =  Swal.fire({
             title: __("are you want to try again") + "?",
             text: __(`${e}`),
             icon: "question",
@@ -39,8 +36,9 @@ const submit = async (data) => {
             showCloseButton: true,
         });
 
-        response.isConfirmed && fetch();
+       response.isConfirmed && fetch();
     }
+
 };
 </script>
 
@@ -112,13 +110,17 @@ const submit = async (data) => {
                 </div>
             </div>
 
-            <form class="ml-auo space-y-4" @submit.prevent="submit">
+            <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors }" >
-                <input type='text' placeholder='Name' v-model="form.name" class="w-full rounded-md py-2.5 px-4 border text-sm outline-[#007bff]" />
+                <Field type='text' placeholder='Name' name="name" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
-                <input type='email' placeholder='Email' v-model="form.email" class="w-full rounded-md py-2.5 px-4 border text-sm outline-[#007bff]" />
+                <div class="">{{ errors.name }}</div>
-                <input type='text' placeholder='Subject' v-model="form.subject" class="w-full rounded-md py-2.5 px-4 border text-sm outline-[#007bff]" />
+                <Field type='email' placeholder='Email' name="email" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
-                <textarea placeholder='Message' rows="6" v-model="form.message" class="w-full rounded-md px-4 border text-sm pt-2.5 outline-[#007bff]"></textarea>
+                <div class="">{{ errors.email }}</div>
+                <Field type='text' placeholder='Subject' name="subject" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
+                <div class="">{{ errors.subject }}</div>
+                <Field type='textarea' as='textarea' placeholder='Message' rows="6" name="message" class="w-full rounded-md px-4 border text-sm pt-2.5 outline-[#007bff]" />
+                <div class="">{{ errors.message }}</div>
                 <button type='submit' class="text-white bg-[#007bff] hover:bg-blue-600 font-semibold rounded-md text-sm px-4 py-2.5 w-full">Send</button>
-            </form>
+            </Form>
         </div>
     </div>
 </GuestLayout>