Laravel Precognition always returns a 204 success

[brodenbrett]

I'm using a fresh install of Laravel, Inertia, and Vue. Here is my set up:

// routes/web.php
use App\Http\Requests\EmailRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
use Illuminate\Support\Facades\Route;

Route::inertia('/', 'Welcome')->name('home');
Route::post('/', function (EmailRequest $request) {
    dd(request()->all(), request()->safe());
})->middleware(HandlePrecognitiveRequests::class);

<?php
// app\Http\Requests\EmailRequest.php
namespace App\Http\Requests;

use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Foundation\Http\FormRequest;

class EmailRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            'email' => 'email',
        ];
    }
}

// resources\js\pages\Welcome.vue
<script setup lang="ts">
import { Form } from '@inertiajs/vue3';
</script>

<template>
    <Form method="post" #default="{errors, validate}">
        <input name="email" value="123">
        <p>{{ errors.email }}</p>
        <a @click="validate()">Validate</a><br>
        <button>Submit</button>
    </Form>
</template>

Clicking Submit will display the error, but clicking Validate will return have precognition return 204 response. Am I missing some code somewhere to make this work?

[wi5nuu]

The issue is that Inertia's built-in <Form> component does not send the Precognition: true header that Laravel needs to identify a precognitive request. Without that header, Laravel treats it as a normal POST and returns 204 No Content regardless of validation state.

Fix

You need to use useForm from the laravel-precognition-vue-inertia package, which is the officially recommended integration for Vue + Inertia.

1. Install the package:

npm install laravel-precognition-vue-inertia

2. Update Welcome.vue:

<script setup lang="ts">
import { useForm } from 'laravel-precognition-vue-inertia';

const form = useForm('post', '/', {
    email: '',
});
</script>

<template>
    <form @submit.prevent="form.submit()">
        <input
            v-model="form.email"
            name="email"
            type="email"
        />
        <p v-if="form.invalid('email')">{{ form.errors.email }}</p>

        <a @click="form.validate('email')">Validate</a><br />
        <button type="submit">Submit</button>
    </form>
</template>

Why this happens

• Inertia's <Form> component has no knowledge of Precognition — it does not attach the required Precognition: true header when validate() is called.
• Laravel's HandlePrecognitiveRequests middleware only activates when that header is present. Without it, the request falls through as a normal POST and returns 204.
• useForm from laravel-precognition-vue-inertia handles all Precognition headers automatically and tracks per-field validation state.

Official docs: https://laravel.com/docs/precognition#using-vue-and-inertia

[brodenbrett]

Thanks! I haven't tried using that package yet. However Inertia's documentation says the <Form> component should have full support for Precognition. I tested this again and it does attach the Precognition: true header to the validation request.

Here are the full headers of the request after executing validate() for reference.

Payload:
{"email":"123"}

Request:
POST / HTTP/1.1
Host: precog-test.test
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0
Accept: application/json
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate
Referer: http://precog-test.test/
Content-Type: application/json
Precognition: true
Precognition-Validate-Only: email
X-XSRF-TOKEN: eyJpdiI6IngrZTVFbk40a2kxdmxZM05qZFB1NVE9PSIsInZhbHVlIjoiTkZqVWM0blpnTVJabm1nQzVVNGppNDRvd0h6UXNlRzFvakpoSjQrbmRqeElycmVxd0NkT1ZqdVJtTHBDU2xLbnVtMWFucWkyODM4QWJvcHlzYUlORXN0ZlhNRng5clBIZ0MxcU9UTExQQ2ljM2cycUY0dG9OWklybC9TTC9oUXoiLCJtYWMiOiJkZWRjOWYzYjJlOTg5MDJmM2E3Zjk2OWNmNTgzMjVjNGNjNGVkNjFhOThmMDljNWFhMzgzN2UwYjNlZDdjZTAzIiwidGFnIjoiIn0=
Content-Length: 15
Origin: http://precog-test.test
Sec-GPC: 1
Connection: keep-alive
Cookie: XSRF-TOKEN=eyJpdiI6IngrZTVFbk40a2kxdmxZM05qZFB1NVE9PSIsInZhbHVlIjoiTkZqVWM0blpnTVJabm1nQzVVNGppNDRvd0h6UXNlRzFvakpoSjQrbmRqeElycmVxd0NkT1ZqdVJtTHBDU2xLbnVtMWFucWkyODM4QWJvcHlzYUlORXN0ZlhNRng5clBIZ0MxcU9UTExQQ2ljM2cycUY0dG9OWklybC9TTC9oUXoiLCJtYWMiOiJkZWRjOWYzYjJlOTg5MDJmM2E3Zjk2OWNmNTgzMjVjNGNjNGVkNjFhOThmMDljNWFhMzgzN2UwYjNlZDdjZTAzIiwidGFnIjoiIn0%3D; laravel-session=eyJpdiI6ImdpWFdDbklhVmlBZUxwaDRvRW1GZGc9PSIsInZhbHVlIjoieTlUQjhEK0JQMmdEbXFiTGs3bUN4a0pvVlZhdjJHbStkSExjMmh3OFNsb0tjdjQ0UXROdGZVYkhrTzlYTEFmNzBOMXFaNllmZXRqdmxjZVdrZHFKeFF1UWZCZnkxSWZtM1lZWlhDY1RUVy9ZTE1HVHlJOWVUUkhRNjNiREtrVkEiLCJtYWMiOiI5NDc1YTViNzQ3NWJhZDdiN2UxYjU4NjU4YWM5ZDg1N2NhZWM2MjU1NDEwNTNlNTQxMTVmYjc1ZTk4ZTkxNjY2IiwidGFnIjoiIn0%3D
Priority: u=0

Response:
HTTP/1.1 302 Found
Server: nginx/1.25.2
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: PHP/8.4.22
Cache-Control: no-cache, private
Date: Mon, 29 Jun 2026 00:46:55 GMT
Location: http://precog-test.test/
Vary: X-Inertia, Precognition
Precognition: true
Set-Cookie: XSRF-TOKEN=eyJpdiI6IkhkbnVCam5uTXhGbU1oL3p3RndzN2c9PSIsInZhbHVlIjoiZGFWUmkySWk4d1NsS1JWWFB1bUZBbVVQR2QrSXJ0RGtpTExHNVlRNENnM3NOekJ4Ny9uMzhYYjhGVDY4NmdJM1N1Y3VGRHltWXRIVlVobk96R2lVWm5QUVBSQ3hOSFluY05uMmk1OWlOcTlkUVdKbHNGMkY1YmZEbkNlKzNqTnEiLCJtYWMiOiJhMTc4YWRhNjliMjBmZGRjMTI1ZDliYTI0YjRhYTY2NTU0Y2IzNDdlYTVmY2JmYTI3YWQ5YmY0OGM2NjNiMjhlIiwidGFnIjoiIn0%3D; expires=Mon, 29 Jun 2026 02:46:55 GMT; Max-Age=7200; path=/; samesite=lax
laravel-session=eyJpdiI6InM5QWxDamRFZ1l4ekM3R2hJZ0xQZ3c9PSIsInZhbHVlIjoiaHRjT3pYbS9NQVhhWjI2bGU1Z0gxOUR6V1VqekRDZ2dDU0JGUVZwOVRwOG9GZXFnWENrTDBQU2c1dllUelVVbVpESStLNiswT2lFVkxtQVZCMWs4Tm9DTDVMQTA3MlUxTXREaDJWWnROU3hZbnFPaHdpakliZStVM2R3eVZSWW0iLCJtYWMiOiJjZGJkNjcwZjdhNzQ5MDEzYjQ1YWRiNTcxMjgxYmZlOTc0NWJmODBjOTk5YTAwMWUxY2MwMDRlMzc3YzU1ZGMzIiwidGFnIjoiIn0%3D; expires=Mon, 29 Jun 2026 02:46:55 GMT; Max-Age=7200; path=/; httponly; samesite=lax

[brodenbrett]

This was solved by laravel/maestro#173. Thanks @RobertBoes!