Want to play with the new Inertia v3 features? @pascalbaljet.bsky.social built a comprehensive demo app!
Links straight to both the docs and the source code for every example, so you can try it in the browser and immediately see how it's implemented.
demo-v3.inertiajs.com
My Table package uses Dusk for E2E tests (moving to Pest soon). Yesterday CI suddenly became very slow on my Mac Mini M1 self-hosted runner.
Turned out Chrome 145 was the culprit. Downgrading to Chrome 138 fixed it. If Dusk is slow in CI, try that! 🐌
This is a beta release, so we'd love your feedback. Install it, test it, and let us know what you think!
Full blog post: laravel.com/blog/inertia...
Upgrade guide: inertiajs.com/docs/v3/gett...
v3 also includes nested prop types with dot-notation support, a default layout option in 'createInertiaApp', TypeScript form component generics, enum support in 'Inertia::render()', and a 'preserveErrors' option for partial reloads.
Axios has been replaced with a built-in XHR client. Smaller bundle, fewer dependencies. Built-in HTTP interceptors provide the same extension point, and an Axios adapter is available if you prefer to keep using it.
![// app/Providers/AppServiceProvider.php
use Inertia\ExceptionResponse;
use Inertia\Inertia;
Inertia::handleExceptionsUsing(function (ExceptionResponse $response) {
if (in_array($response->statusCode(), [403, 404, 419, 429, 500, 503])) {
return $response->render('ErrorPage', [
'status' => $response->statusCode(),
])->withSharedData();
}
});](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:7rk5il6v3ugfrkspaxg6kphh/bafkreigsphoaqsinkl6legrwjc7sqoilpvw6xparza6dma7aqhdwyl3gzi)
// app/Providers/AppServiceProvider.php use Inertia\ExceptionResponse; use Inertia\Inertia; Inertia::handleExceptionsUsing(function (ExceptionResponse $response) { if (in_array($response->statusCode(), [403, 404, 419, 429, 500, 503])) { return $response->render('ErrorPage', [ 'status' => $response->statusCode(), ])->withSharedData(); } });
Custom error pages for 500s and other exceptions now have a proper API. The 'handleExceptionsUsing()' method lets you render Inertia error pages with full access to shared data 🛡️
<!-- AppLayout.vue --> <script setup> import { useLayoutProps } from '@inertiajs/vue3' const layout = useLayoutProps({ subtitle: '', }) </script> <template> <div v-if="layout.subtitle" class="banner"> {{ layout.subtitle }} </div> <slot /> </template>
<!-- Any page --> <script setup> import { setLayoutProps, resetLayoutProps } from '@inertiajs/vue3' setLayoutProps({ subtitle: 'Welcome back!' }) // Reset to defaults... resetLayoutProps() </script>
The new 'useLayoutProps' hook lets layouts declare defaults that pages can override. Pages update layout state with 'setLayoutProps()'. Supports nested layouts as well.
<template> <Link href="/features/navigation/target" component="Features/Navigation/Target" > Navigate Instantly </Link> </template>
![// Or programmatically with placeholder props...
router.visit(url, {
component: 'Features/Navigation/Target',
pageProps: (currentProps, sharedProps) => ({
...sharedProps,
greeting: 'Loading from server...',
items: [],
}),
})](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:7rk5il6v3ugfrkspaxg6kphh/bafkreigthlwgd3j24e2smx6dioms4vm3vuq7o6wwy32n7uycvfd2kqbkea)
// Or programmatically with placeholder props... router.visit(url, { component: 'Features/Navigation/Target', pageProps: (currentProps, sharedProps) => ({ ...sharedProps, greeting: 'Loading from server...', items: [], }), })
Instant visits swap to the target page component immediately while the server request fires in the background. The user sees the new page right away with shared props, and the full data merges in when the response arrives ✨
import { router } from '@inertiajs/vue3' router .optimistic((props) => ({ post: { ...props.post, is_favorite: !props.post.is_favorite, }, })) .post(`/posts/${post.id}/favorite`)
Optimistic updates are now built into Inertia. Chain 'optimistic()' before any router visit to apply changes instantly. If the request fails, props revert automatically 💫
<script setup> import { useHttp } from '@inertiajs/vue3' const http = useHttp({ name: '' }) function postToApi() { http.post('/api/endpoint', { onSuccess: (response) => { console.log(response) }, }) } </script> <template> <input v-model="form.name" /> <button :disabled="form.processing" @click="postToApi"> {{ form.processing ? 'Sending...' : 'Send Request' }} </button> </template>
Introducing the 'useHttp' hook. It gives you the same developer experience as 'useForm', but for plain HTTP requests. Reactive state, error handling, file upload progress, and request cancellation, all without triggering a page visit.
SSR in development no longer requires a separate Node.js server. With the Vite plugin, just run 'composer dev' and your pages are server-rendered. No separate build step, no separate process, way better error reporting 🔥
![// vite.config.js
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
inertia(),
vue(),
],
})
// resources/js/app.js
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp()](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:7rk5il6v3ugfrkspaxg6kphh/bafkreifpqlqck2jhizitt6giuili5vf24r33xqwzg3tmd5sh3u7zszouq4)
// vite.config.js export default defineConfig({ plugins: [ laravel({ input: ['resources/js/app.js'], refresh: true, }), inertia(), vue(), ], }) // resources/js/app.js import { createInertiaApp } from '@inertiajs/vue3' createInertiaApp()
The new @inertiajs/vite plugin handles page resolution, code splitting, and SSR setup automatically. Your entire entry point can now be a single function call: createInertiaApp() ⚡️
Inertia 3 beta is here! 🚀
This is a big one. New Vite plugin, optimistic updates, standalone HTTP requests, layout props, simplified SSR, and Axios has been replaced with a built-in XHR client.
Here's what's new 🧵
So a regular HTTP request and then update the Inertia Page props?
🔥
Would love your help testing before the stable release!
Upgrade guide: inertiaui.com/inertia-moda...
Inertia Modal v2 beta is out!
✅ TypeScript support for React + Vue
✅ Prefetch: preload modals on hover, click, or mount
✅ Native <dialog> element for better accessibility
✅ closeOnClickOutside prop
✅ Local modal props
✅ Inertia 2 + Tailwind 4 only
✅ Laravel Boost support
I'll probably release this Modal beta tomorrow. I've already published the Vanilla library, which will be shared across other existing and upcoming packages 🔥
Probably not super interesting to most, but if you want to check it out, here it is:
github.com/inertiaui/va...
TIL the Web Animations API lets you trigger animations in JavaScript and await their completion ✨
No CSS keyframes needed. Works in all modern browsers.
Also shipped v8.9.0 of the FFmpeg package! Laravel 13 support, improved handling of HLS with multiple audio streams, and 10+ fixes included.
Happy encoding! 📺
I just released v3.7.0 of my Cross Eloquent Search package! In addition to some fixes, it also comes with:
✅ Support for Laravel 13
✅ Support for PostgreSQL and SQLite
✅ Added exactMatch() and tap() methods
Enjoy! 🔎
Try to get a beta version out in the next couple of days.
Migrated from Dusk to Pest Browser Testing. Added support for prefetching, native <dialog> element, passing props to local modals, custom component support for <ModalLink>, and better 'click outside' customization. Also some architectural changes.
The next major version of Inertia Modal will drop all dependencies like Headless UI and Reka UI. All utilities will be built in-house.
Dropping support for Inertia 1, Laravel 10, and Tailwind CSS 3. Adding TypeScript.
With the latest version of Laravel Precognition, you can now validate array and nested object fields using wildcards ✨
form.validate('author.*')
form.validate('contributors.*.email')
form.validate('contributors.*.*')
This SDK is a beast! 🚀
