--- name: vue-forms description: Inertia form handling with DTOs. Use when creating forms that submit to Laravel. Always initialize from props and use form.submit(). allowed-tools: Read, Grep, Glob, Write, Edit, Bash --- # Inertia Form Handling ## When to Apply Apply when: - Creating forms with Inertia - Handling form validation - Submitting data to Laravel - Managing form state ## Form Initialization ```typescript \/\/ Always initialize from props (never empty forms) const props = defineProps<{ resource: App.Data.UserData; }>(); const form = useForm(props.resource); \/\/ With defaults for optional fields const form = useForm({ ...props.resource, tags: props.resource.tags ?? [], }); ``` ## Form Submission ```typescript \/\/ Always use form.submit() - Wayfinder includes HTTP method const createUser = () => { form.submit(Controllers.UserController.store(), { onSuccess: () => { form.reset(); toast.success('User created'); }, onError: () => { toast.error('Please check the form errors'); }, }); }; \/\/ Update with route parameters const updateProject = () => { form.submit(Controllers.ProjectController.update({ project: props.project.id }), { preserveScroll: true, onSuccess: () => toast.success('Project updated'), }); }; \/\/ Delete with confirmation const deleteResource = () => { if (!confirm('Are you sure?')) return; form.submit(Controllers.ResourceController.destroy({ resource: props.resource.id })); }; ``` ## Validation Errors ```vue