Inertia 3

Overview Inertia 3 represents a significant evolution in the Laravel ecosystem, streamlining how developers bridge server-side logic with client-side interactivity. This beta release focuses on removing legacy dependencies like Axios, automating Server-Side Rendering (SSR), and introducing "optimistic" UI patterns that make web applications feel as snappy as native mobile apps. Prerequisites To follow this guide, you should be familiar with: * Laravel 11+ framework basics. * Vue.js 3 composition API. * Modern JavaScript build tools like Vite. Key Libraries & Tools * **Inertia Vite Plugin**: A new package that handles both client-side and SSR builds without requiring separate server configurations. * **useHTTP Hook**: The new internal client for handling fetch requests, replacing the need for external HTTP libraries. * **Optimistic Router**: A specialized routing method that updates the UI before the server confirms success. Code Walkthrough Simplified Initialization In version 2, initializing Inertia required verbose boilerplate. Version 3 moves much of this logic into the Vite plugin, drastically reducing the size of your entry point file. ```typescript // resources/js/app.ts import { createInertiaApp } from '@inertiajs/vue3' import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers' createInertiaApp({ resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), setup({ el, App, props, plugin }) { createApp({ render: () => h(App, props) }) .use(plugin) .mount(el) }, }) ``` Implementing Optimistic Updates Instead of showing a loading spinner while the server processes a request, `router.optimistic` allows the UI to reflect changes instantly. If the request fails, Inertia automatically rolls back the state. ```javascript // Inside a Vue component const handleToggleFavorite = () => { router.optimistic({ isFavorite: !props.isFavorite }).post(`/bookmarks/${props.id}/favorite`); }; ``` Native HTTP without Axios Inertia 3 no longer ships with Axios. It uses a built-in XHR client, accessible via the `useHttp` hook. ```javascript import { useHttp } from '@inertiajs/vue3'; const { get } = useHttp(); const handleSearch = (query) => { get('/search', { q: query }, { onSuccess: (results) => { /* handle results */ } }); }; ``` Syntax Notes * **Method Chaining**: The `router.optimistic()` method is prepended to standard request methods like `.post()` or `.put()`. * **SSR Automation**: You can delete your `ssr.ts` file entirely; Vite now handles this through the plugin configuration. Practical Examples * **Toggling Likes**: Use optimistic updates for "Like" buttons to provide instant feedback. * **Global Layout Control**: Utilize `useLayoutProps` to dynamically hide sidebars or change page titles from deep within child components without complex event emitting. Tips & Gotchas * **Beta Warning**: Since this is a beta release, avoid using it in high-stakes production environments until the stable release expected around April. * **Error Handling**: Exception rendering is now handled via `Inertia::handleExceptionsUsing()` in your `AppServiceProvider`, allowing you to return custom Vue.js error pages instead of the standard Laravel ignition page.