Exploring Inertia 3 Beta: Modernizing the Laravel-Vue Bridge

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.js
required verbose boilerplate. Version 3 moves much of this logic into the
Vite
 plugin, drastically reducing the size of your entry point file.

// 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.js
automatically rolls back the state.

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

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.
3 min read