News

Inertia 2.3 Adds Precognition Support

Published Updated
Inertia 2.3 Adds Precognition Support image

Inertia v2.3 was released, adding Laravel Precognition support to the Form component and useForm() out of the box. This update makes it super simple to start validating forms on the frontend using your Laravel validation rules.

No additional packages are needed anymore. Laravel Precognition provides live validation (among other things) for your frontend using your backend validation rules. It hits your route's middleware and validation without running the controller code.

The Form Component

The Form component now has direct support for Precognition and provides useful methods such as valid() and invalid():

<template>
 <Form action="/users" method="post" #default="{ errors, invalid, validate, validating }">
   <div>
     <input name="name" @change="validate('name')" />
     <p v-if="invalid('name')"> {{ errors.name }} </p>
   </div>
 
   <div>
     <input name="email" @change="validate('email')" />
     <p v-if="invalid('email')"> {{ errors.email }} </p>
   </div>
 
   <p v-if="validating">Validating...</p>
 </Form>
</template>

There are many more options and customizations available with this release. See Pull Request #2700 for implementation details. The documentation will help you get started with Precognition with the <Form/> component.

The useForm() Helper

You can use Precognition with the useForm() helper using the withPrecogition() method like so:

import { useForm } from '@inertiajs/vue3'
 
const form = useForm({
   name: '',
   email: '',
}).withPrecognition('post', '/users')

See Pull Request #2684 for implementation details, and the documentation for using Precognition with useForm().

Release notes

You can see the complete list of new features and updates below and the diff between 2.2.21 and 2.3.0 on GitHub. The following release notes are directly from the changelog:

v2.3.0

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Sponsored

laravelcloud logo
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud

The latest

View all →
Sidecar Brings Statamic's Control Panel to Your Existing Markdown Sites image

Sidecar Brings Statamic's Control Panel to Your Existing Markdown Sites

Read article
Collections chunkBy() and Storage Path Hardening in Laravel 13.30 image

Collections chunkBy() and Storage Path Hardening in Laravel 13.30

Read article
Forte: Parse and Rewrite Laravel Blade Templates image

Forte: Parse and Rewrite Laravel Blade Templates

Read article
Compoships: Eloquent Relationships on Multiple Columns image

Compoships: Eloquent Relationships on Multiple Columns

Read article
MKSine: A Filament CMS with Plugins, Themes, and Blocks image

MKSine: A Filament CMS with Plugins, Themes, and Blocks

Read article
Cancel In-Flight Form Submissions in Inertia.js v3.7 image

Cancel In-Flight Form Submissions in Inertia.js v3.7

Read article