laravel-precognition-vue-inertia

import { defineComponent } from 'vue'; import { useForm } from 'laravel-precognition-vue-inertia'; interface UserForm { name: string; email: string; password?: string; } export default defineComponent({ setup() { const form = useForm<UserForm>('post', '/users', { name: '', email: '', password: '', }); const submit = () => { form.submit({ onSuccess: () => { console.log('User created successfully, redirecting...'); form.reset(); // Example: Inertia.visit('/users'); }, onError: (errors) => { console.error('Validation errors:', errors); }, }); }; return { form, submit, }; }, template: ` <form @submit.prevent="submit"> <div> <label for="name">Name:</label> <input id="name" type="text" v-model="form.name" @change="form.validate('name')" /> <div v-if="form.hasErrors('name')" style="color: red;">{{ form.errors.name }}</div> </div> <div> <label for="email">Email:</label> <input id="email" type="email" v-model="form.email" @change="form.validate('email')" /> <div v-if="form.hasErrors('email')" style="color: red;">{{ form.errors.email }}</div> </div> <div> <label for="password">Password:</label> <input id="password" type="password" v-model="form.password" @change="form.validate('password')" /> <div v-if="form.hasErrors('password')" style="color: red;">{{ form.errors.password }}</div> </div> <button type="submit" :disabled="form.processing || form.hasErrors()"> Create User </button> </form> ` });