Inertia.js v3 Beta: New Features, Optimistic UI, Vite Plugin, and Complete Upgrade Guide

The first beta release of Inertia.js v3 introduces several powerful improvements, including a built-in HTTP client, a new Vite plugin, optimistic UI updates, and simplified application setup. These changes aim to reduce boilerplate code, remove unnecessary dependencies, and improve developer productivity.

In this article, we’ll explore what’s new in Inertia.js v3, why it matters, and how it improves the developer experience compared to previous versions.

What is Inertia.js?

Before diving into the new features, it’s helpful to understand what Inertia.js actually is.

Inertia.js is a library that lets developers build modern single-page applications (SPAs) using traditional server-side frameworks like Laravel without needing to build a separate API. It allows your backend to return page components and data directly, which are then rendered on the frontend using frameworks such as Vue, React, or Svelte.

This approach is often called the “modern monolith”, combining the simplicity of server-side routing with the responsiveness of SPAs.

Key Features in Inertia.js v3

The new version introduces several important improvements that make Inertia apps faster, simpler, and easier to maintain.

1. New Vite Plugin for Automatic Setup

One of the biggest changes in Inertia v3 is the introduction of the @inertiajs/vite plugin.

Previously, developers had to configure several callbacks like:

• resolve

• setup

• SSR entry files

These setups were repetitive and nearly identical across projects.

The new plugin simplifies everything.

Example Vite configuration:

import inertia from '@inertiajs/vite'
import laravel from 'laravel-vite-plugin'

export default {
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    inertia(),
  ],
}

Now your Inertia application can start with a minimal entry point:

import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp()

The plugin automatically handles:

• Page resolution

• Code splitting

• Lazy loading

• Server-side rendering configuration

This dramatically reduces setup complexity.

2. Axios Removed – Built-in HTTP Client

Inertia v3 removes the dependency on Axios.

Instead, it now includes a built-in XHR-based HTTP client to handle all internal requests.

Benefits include:

• Smaller bundle size

• Fewer dependencies

• Faster application performance

For developers who still prefer Axios, an adapter is available.

3. Standalone HTTP Requests with useHttp

In many cases, developers need to make API requests that do not trigger page visits.

Examples include:

• Search endpoints

• Background API calls

• Third-party service requests

Previously developers used axios or fetch. Now Inertia provides a new useHttp hook.

Example:

<script setup>
import { useHttp } from '@inertiajs/vue3'

const http = useHttp({
  query: '',
})

function search() {
  http.get('/api/search')
}
</script>

This provides:

• Reactive state

• Error handling

• File upload progress

• Request cancellation

All while maintaining the familiar Inertia developer experience.

4. Optimistic UI Updates

One of the most exciting additions is optimistic updates.

This technique updates the UI before the server responds, creating a faster and smoother user experience.

Example scenario:

• A user clicks a Like button

• The UI updates immediately

• The server response confirms the update later

Example code:

router.optimistic((props) => ({
  post: {
    ...props.post,
    likes: props.post.likes + 1,
  },
})).post(`/posts/${post.id}/like`)

If the request fails, the UI automatically rolls back to the previous state.

5. Instant Page Visits

Another performance improvement is Instant Visits.

This feature renders the target page immediately while the request is still loading in the background.

Example:

<Link href="/dashboard" component="Dashboard">Dashboard</Link>

The page component loads instantly using shared props, and full data loads once the server responds.

This makes navigation feel nearly instantaneous.

6. Layout Props System

Persistent layouts are already a powerful feature in Inertia.

In v3, a new useLayoutProps hook allows layouts to define default props that pages can override.

Example:

<script setup>
import { useLayoutProps } from '@inertiajs/vue3'

const { title, showSidebar } = useLayoutProps({
  title: 'My App',
  showSidebar: true,
})
</script>

Pages can update these values using setLayoutProps().

This eliminates the need for:

• event buses

• provide/inject patterns

• manual layout state management

7. Better Exception Handling

Error handling has also been improved.

Developers can now customize how errors like:

• 404

• 403

• 500

are rendered in Inertia using handleExceptionsUsing().

Example:

Inertia::handleExceptionsUsing(function ($response) {
    return $response->render('ErrorPage');
});

This ensures error pages still receive shared props and consistent layout data.

Breaking Changes in Inertia v3

Since this is a major release, there are a few breaking changes developers should know.

New Requirements

Inertia v3 requires:

• PHP 8.2+

• Laravel 11+

• React 19+ (React adapter)

• Svelte 5+

Removed Features

Some deprecated features were removed:

• Inertia::lazy() (replaced by Inertia::optional())

• router.cancel() renamed to router.cancelAll()

• Axios dependency removed

• qs package removed

Developers upgrading from v2 should review the upgrade guide before migrating.

Why Inertia.js v3 Matters

Inertia.js v3 represents a significant step forward for modern Laravel applications.

Key improvements include:

• Less configuration

• Smaller bundles

• Faster navigation

• Better developer experience

• Improved state management

For teams building modern monolith applications with Laravel, these improvements make Inertia an even stronger alternative to traditional SPA architectures.

Final Thoughts

The Inertia.js v3 beta introduces major improvements that simplify development while improving application performance.

From the new Vite plugin and built-in HTTP client to optimistic updates and instant visits, the framework continues to evolve toward a smoother developer experience.

If you are currently using Laravel + Inertia, testing the v3 beta now can help you prepare your applications for the upcoming stable release.