People searching “Inertia Form component Vue” want the form that ships with @inertiajs/vue3, not a third-party form library. The Wayfinder guide passes a generated action into it. The file upload guide uses the same component for a file. This page is the error slot.
TL;DR
- The Inertia Form component posts the fields and exposes errors.
- Wayfinder can supply the action.
- Do not install Vue Router so this form can “have a route”.
The fix#
<script setup lang="ts">
import { Form } from "@inertiajs/vue3";
</script>
<template>
<Form action="/posts" method="post" v-slot="{ errors, processing }">
<input name="title" />
<p v-if="errors.title">{{ errors.title }}</p>
<button type="submit" :disabled="processing">Save</button>
</Form>
</template>Fields need a name. The component submits those names. A v-model without a name is not sent. errors.title matches the Laravel rule key, the same way form.errors.title does with useForm.
When the action comes from Wayfinder, drop method="post" and use :action="store()". The generated object already carries the method. Adding both is how a GET form gets posted twice in tutorials that mix the two styles.
What to avoid#
Gotcha
Do not install Vue Router so this form can “have a route”. The route is the Laravel URL in action.
FAQ#
How do I use the Inertia Form component in Vue?
The Inertia Form component posts the fields and exposes errors. Wayfinder can supply the action.
What goes wrong with Inertia Form component Vue?
Many developers want the form that ships with @inertiajs/vue3, not a third-party form library. Do not install Vue Router so this form can "have a route".
