People searching “Laravel Vue validation errors” want the sentence under the input. The CRUD guide already posts the form. This page is only that sentence.
TL;DR
- Put the Laravel validation message under the matching Vue input.
- Inertia already sends form.errors.
- Do not return
response()->json(['errors' => ...], 422)from an Inertia route. - Do not pass
$request->all()intoPost::create().
The fix#
A failed validate() throws ValidationException. Inertia turns it into a redirect back to this page. It does not show you a 422 in the Vue catch. form.errors.title is the first message for that field.
<script setup lang="ts">
import { useForm } from "@inertiajs/vue3";
const form = useForm({ title: "" });
function submit() {
form.post("/posts");
}
</script>
<template>
<form @submit.prevent="submit">
<input v-model="form.title" name="title" />
<p v-if="form.errors.title">{{ form.errors.title }}</p>
<button type="submit">Save</button>
</form>
</template>$validated = $request->validate([
'title' => ['required', 'string', 'max:120'],
]);
Post::create(['title' => $validated['title'], 'user_id' => $request->user()->id]);The input name, the v-model key, and the rule key have to be the same word. form.errors.title stays empty when the rule was name and the input was title.
What to avoid#
Gotcha
Do not return response()->json(['errors' => ...], 422) from an Inertia route. The client is waiting for a redirect. Do not pass $request->all() into Post::create().
FAQ#
How do I show Laravel validation errors in Vue?
Put the Laravel validation message under the matching Vue input. Inertia already sends form.errors.
What goes wrong with Laravel Vue validation errors?
Many developers want the sentence under the input. Do not return response()->json(['errors' => ...], 422) from an Inertia route.
