Exploring Inertia 3 Beta: Modernizing the Laravel-Vue Bridge

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.