Live validation with Laravel Precognition and Vue

Users fill in a long form, hit Save, and only then learn the title was too long. Precognition runs your real Laravel rules as they type, without running the controller. Inertia 3’s <Form> already supports it; here is the server opt-in and the Vue slot.

The CRUD form shows errors after submit. Precognition shows them when the field changes, using the same Laravel rules. Inertia 3’s <Form> component already does this. Older tutorials install laravel-precognition-vue-inertia and call useForm from that package. You do not need that package on a current Inertia app. Remove it if a previous tutorial added it.

This page does not cover optimistic UI. The form still waits for the server. The stack choice is Inertia, a SPA, or Nuxt.

The server still has to opt in#

Put the rules in a form request so the precognitive call and the real submit share them.

php artisan make:request StorePostRequest

public function rules(): array
{
    return [
        'title' => ['required', 'string', 'max:255'],
        'excerpt' => ['required', 'string'],
    ];
}

use App\Http\Requests\StorePostRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
use Illuminate\Routing\Controllers\HasMiddleware;
use Illuminate\Routing\Controllers\Middleware;

class PostController extends Controller implements HasMiddleware
{
    public static function middleware(): array
    {
        return [
            new Middleware(HandlePrecognitiveRequests::class, only: ['store', 'update']),
        ];
    }

    public function store(StorePostRequest $request): RedirectResponse
    {
        Post::create([
            'title' => $request->string('title')->toString(),
            'excerpt' => $request->string('excerpt')->toString(),
            'slug' => str($request->string('title')->toString())->slug(),
            'published_at' => now(),
        ]);

        return to_route('posts.index');
    }
}

store only runs on the real submit. The live check stops at StorePostRequest.

The Vue slot#

validate('title') sends the precognitive request. invalid('title') is true only after a response says the field failed. validating is true while that request is in flight. A field that still has its initial value does not send a request.

<Form
  action="/posts"
  method="post"
  #default="{ errors, invalid, validate, validating }"
  class="space-y-4"
>
  <div>
    <label for="title">Title</label>
    <input id="title" name="title" @change="validate('title')" class="w-full border px-3 py-2" />
    <p v-if="invalid('title')">{{ errors.title }}</p>
  </div>

  <div>
    <label for="excerpt">Excerpt</label>
    <textarea id="excerpt" name="excerpt" @change="validate('excerpt')" class="w-full border px-3 py-2" />
    <p v-if="invalid('excerpt')">{{ errors.excerpt }}</p>
  </div>

  <p v-if="validating">Checking...</p>
  <button class="border px-4 py-2">Save</button>
</Form>

Import Form from @inertiajs/vue3, the same component the CRUD guide uses. Submit still posts the form. You do not add a second @submit handler.

Files and expensive rules#

'cover' => [
    ...$this->isPrecognitive() ? [] : ['required'],
    'image',
    'max:2048',
],

max:2048 is kilobytes. The same split works for a password check you only want on submit, such as an uncompromised-password lookup. Read $this->isPrecognitive() inside the form request and choose the cheaper rule for the live call.

Where this stops#

The errors after a normal submit are still the CRUD form. Who is allowed to submit is a permission or a policy. Precognition does not replace either one.

Recap#

• Form request + HandlePrecognitiveRequests = live validation with your real rules.
• The controller only runs on the real submit.
• Use the <Form> slot helpers; no extra package.
• Treat files and expensive rules differently with isPrecognitive().

FAQ#

Next steps#

• CRUD with Inertia and Vue
• Upload files with Laravel and Vue
• Show Laravel validation errors in Vue

Sources#

• Laravel 13: Precognition
• Inertia v3: Forms