Laravel Daily's

Supercharge Your Laravel + Vue SPA: Inertia 3.x Features You Should Be Using Now

hero image

The release of Inertia.js v3 marks a major milestone for the Laravel ecosystem. This version moves beyond simple glue between backend and frontend. It introduces core primitives that simplify how we build modern, interactive applications. If you are building a php web framework application today, these updates change your daily workflow.

Inertia v3 focuses on speed, developer experience, and reducing dependencies. It eliminates the need for external libraries like Axios for internal communication. It also introduces features like optimistic updates and instant visits that were previously difficult to implement.

Here are the stable Inertia 3.x features you should integrate into your Laravel and Vue projects today.

The Built-In XHR Client: Goodbye Axios

For years, Axios was a staple in every Inertia project. It handled every request behind the scenes. In v3, the Inertia team built their own internal XHR client.

Developer shedding Axios weights for speed

This change reduces your production bundle size by roughly 15KB gzipped. It also removes the qs dependency. Inertia now handles its own query string parsing and request lifecycle.

If you still need Axios for external APIs, you can keep it as a peer dependency. However, for internal Inertia requests, the new client is the default. It provides a familiar interceptor surface for those who need to hook into request events. This move makes Inertia more self-contained and performant. It is a win for developers using php developer tools who prioritize lean assets.

The useHttp Hook: Standalone Requests Made Simple

Before v3, developers often reached for useForm or raw Axios for non-navigation requests. This included things like search bars, autocomplete, or background dashboard updates.

The new useHttp hook provides a first-class way to handle these scenarios. It mirrors the useForm API but is designed specifically for data fetching without navigation.

const search = useHttp('/api/search', {
    method: 'get',
    data: { query: '' },
    preserveState: true,
});

It returns reactive states like processing, errors, and progress. If a search request fails with a 422 status, the hook automatically maps those errors into the errors object. You can even cancel in-flight requests by calling search.cancel().

This hook is perfect when you build rest api with php endpoints that don't require a full page change. It integrates seamlessly with Laravel Precognition 2.x for real-time validation as well.

Optimistic Updates: UI That Doesn't Wait

User experience often hinges on perceived performance. Inertia v3 introduces first-class support for optimistic updates across the router, useForm, and useHttp.

Optimistic Updates Concept

An optimistic update allows the UI to change immediately, assuming the server will succeed. If the request fails, Inertia automatically rolls back the state to its previous version.

router.post('/tasks', data, {
    optimistic: (page) => {
        // Immediately update the local task list
        page.props.tasks.unshift(data);
    },
});

The framework handles the snapshotting and rollback logic for you. This prevents the "jumping" effect often seen in hand-rolled solutions. It supports concurrent requests, meaning multiple optimistic updates can happen at once without interfering with each other. This makes your application feel like a native mobile app.

Instant Visits: Eliminating the Loading State

Standard Inertia navigation waits for the server response before switching the page. Instant visits change this behavior. They swap the target page component immediately using shared props like layouts and navigation menus.

When you trigger an instant visit, the user sees the new page skeleton right away. As the server response arrives, Inertia merges the page-specific props into the view. This creates a transition that feels instantaneous.

It is a powerful tool for large applications where server-side data processing might take a few hundred milliseconds. By showing the layout immediately, you reduce the perceived wait time for the user.

Simplified SSR with the Vite Plugin

Setting up Server-Side Rendering (SSR) used to be a chore. It required a separate Node.js server and complex configuration. The new @inertiajs/vite plugin changes that.

Vite Plugin and SSR Speed

SSR now works out of the box during development. When you run npm run dev, Vite handles the server rendering in-process. You no longer need to manage a separate SSR process while coding.

In production, the workflow remains streamlined. You build your bundles and start the SSR process with php artisan inertia:start-ssr. The plugin handles page resolution, lazy-loading, and code splitting automatically. It even fixes common issues like the flash-of-unstyled-content (FOUC).

Layout Props API: Cleaner Data Sharing

Passing data from a page to a persistent layout was often clunky. Developers used global event buses or complex provide/inject patterns. Inertia v3 adds a dedicated Layout Props API.

This allows you to share data between your page components and their parent layouts cleanly. It simplifies how you manage things like page titles, breadcrumbs, or user-specific navigation states. It keeps your code more readable and maintains the "Inertia way" of passing props from the backend.

Why You Should Upgrade Now

Inertia 3.x is not just a collection of new features. It is a refinement of the entire SPA-on-the-server philosophy. By moving logic into the framework core, it reduces the amount of boilerplate you have to write.

The removal of Axios, the introduction of useHttp, and the built-in optimistic update support make Inertia the most productive way to build Vue applications on top of Laravel. These tools allow you to focus on your business logic rather than managing request states and manual rollbacks.

The ecosystem around Laravel continues to grow. From Laravel Cloud to high-performance engines like Octane, the framework provides every tool needed for modern development. Inertia v3 is the latest piece of that puzzle.

We’d love to hear about your experience migrating to v3. Reach out to the community and share what you've built.


Previous
Building AI-Powered Features with the Laravel AI SDK: A Practical Developer's Guide
Next
Building Modern SPAs with Laravel + Vue + Inertia 3.x in 2026