laravel-precognition-vue

import { defineComponent, reactive } from 'vue'; import { useForm } from 'laravel-precognition-vue'; export default defineComponent({ setup() { const form = useForm('post', '/api/register', { name: '', email: '', password: '', password_confirmation: '', }); const submit = async () => { try { await form.submit(); alert('Registration successful!'); form.reset(); } catch (e) { console.error('Submission failed:', e); // Errors are automatically populated in form.errors } }; // Example of real-time validation on input change const validateField = (field) => { if (form[field]) { // Only validate if field has content form.validate(field); } }; return { form, submit, validateField }; }, template: ` <form @submit.prevent="submit"> <div> <label for="name">Name</label> <input id="name" type="text" v-model="form.name" @input="validateField('name')"> <div v-if="form.errors.name">{{ form.errors.name }}</div> </div> <div> <label for="email">Email</label> <input id="email" type="email" v-model="form.email" @input="validateField('email')"> <div v-if="form.errors.email">{{ form.errors.email }}</div> </div> <div> <label for="password">Password</label> <input id="password" type="password" v-model="form.password" @input="validateField('password')"> <div v-if="form.errors.password">{{ form.errors.password }}</div> </div> <div> <label for="password_confirmation">Confirm Password</label> <input id="password_confirmation" type="password" v-model="form.password_confirmation" @input="validateField('password_confirmation')"> <div v-if="form.errors.password_confirmation">{{ form.errors.password_confirmation }}</div> </div> <button type="submit" :disabled="form.processing">Register</button> <button type="button" @click="form.reset()">Reset</button> </form> ` });