Pascal Baljet

Upgrade Guide for v3.0 - Inertia.js Documentation

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(); } });

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: [], }), })

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()

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...

Web Animations API - Web APIs | MDN The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e., animation of DOM elements. It does so by combining two models: the Timing Model and the Anim...

developer.mozilla.org/en-US/docs/W...

TIL the Web Animations API lets you trigger animations in JavaScript and await their completion ✨

No CSS keyframes needed. Works in all modern browsers.

GitHub - protonemedia/laravel-ffmpeg: This package provides an integration with FFmpeg for Laravel. Laravel's Filesystem handles the storage of the files. This package provides an integration with FFmpeg for Laravel. Laravel's Filesystem handles the storage of the files. - protonemedia/laravel-ffmpeg

github.com/protonemedia...

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! 📺

GitHub - protonemedia/laravel-cross-eloquent-search: Laravel package to search through multiple Eloquent models. Supports sorting, pagination, scoped queries, eager load relationships and searching th... Laravel package to search through multiple Eloquent models. Supports sorting, pagination, scoped queries, eager load relationships and searching through single or multiple columns. - protonemedia/l...

github.com/protonemedia...

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! 🚀

Hosted on Laravel Cloud ☁️

How it started ⬇️

bsky.app/profile/pasc...

Rundown - Client Updates from Your Code Turn your GitHub commits into professional client status reports in seconds. Your code writes the update, you just hit send.

Remember that €6 domain I bought? Here's what it became 🔥

Rundown: Connect GitHub → Get client-ready status reports from your actual commits

Built it in a week. Can't believe it works.

rundown.report

Just bought a €6 domain for this, the cheapest and best domain I've bought in years. Not sure about the business plan, but Claude is doing such an incredible job branding this thing that I just have to deploy it 🤣