Live Props for Real-Time Updates in Inertia.js v3.11

Inertia.js v3.11.0 and inertia-laravel v3.7.0 add live props. A live prop reloads when a broadcast event arrives, which updates the page without polling.

• Inertia::live() and ->live() mark a prop to refresh on a broadcast event
• An echo() transport for Laravel Echo and Reverb, plus Pusher and Action Cable transports
• Inertia::broadcastProps() sends new values inside the event, which skips the reload request
• A useProp() hook reports when a prop is refreshing

#Live Props

Pascal Baljet added live props to both the client and the Laravel adapter. On the server, wrap a prop with Inertia::live() and pass the event that should refresh it. Inertia reads the channels from the event's broadcastOn() method:

use App\Events\OrderUpdated;
use Inertia\Inertia;

return Inertia::render('Orders/Show', [
    'order' => Inertia::live(fn () => $order->fresh(), on: new OrderUpdated($order)),
]);

On the client, pass a transport to createInertiaApp(). The echo() helper uses the Echo instance that configureEcho() sets up:

import { createInertiaApp } from '@inertiajs/vue3'
import { echo } from '@inertiajs/vue3/echo'
import { configureEcho } from '@laravel/echo-vue'

configureEcho({ broadcaster: 'reverb' })

createInertiaApp({
  live: echo(),
})

When OrderUpdated is broadcast, Inertia makes a partial reload for the order prop. Props that listen for the same event on the same channel reload in one request. The @laravel/echo-vue, @laravel/echo-react, and @laravel/echo-svelte packages are optional peer dependencies, so apps without live props don't need them.

The on argument also accepts an array of events, and the channel argument overrides the channels:

Inertia::live($value, on: [new OrderUpdated($order), new OrderCancelled($order)]);

Inertia::live($value, on: 'order.updated', channel: new PrivateChannel('orders.1'));

Public, private, presence, and encrypted private channels work. Merge props can't be live. Deferred, once, optional, and always props accept ->live():

'activity' => Inertia::defer(fn () => $order->activity)->live(on: new ActivityLogged($order)),

For a step-by-step setup with Reverb, see Real-Time Inertia Props With Laravel Reverb.

See #3232 and inertia-laravel#901 for more details.

#Throttling and Hidden Tabs

Live reloads are throttled to one per prop per second by default. Set a different value per prop in milliseconds, or for the whole app:

Inertia::live($value, on: new ActivityLogged, throttle: 4000);

createInertiaApp({
  live: echo({ throttle: 2000 }),
})

Reloads wait while the tab is hidden and run when the tab is visible again. Pass pauseWhenHidden: false to echo() to reload in hidden tabs too.

#Send Values in the Broadcast Event

By default, an event only tells the page to reload the prop. An event can instead carry the new value with Inertia::broadcastProps(), and the page uses it without making a request:

public function broadcastWith(): array
{
    return [
        ...Inertia::broadcastProps([
            'order' => OrderResource::make($this->order),
        ]),
    ];
}

Every subscriber on the channel gets the same payload, so only send values that are the same for every user on that channel.

#Loading State With useProp()

The new useProp() hook returns a prop's value along with loading and loaded flags. The loading flag is true while any request is refreshing the prop, including deferred prop loads:

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

const { value, loading } = useProp('order')
</script>

<template>
  <span v-if="loading">Refreshing...</span>
</template>

#Other Transports and Events

Inertia sends the connection's socket ID in an X-Socket-Id header on same-origin requests, so broadcast(...)->toOthers() works. The release also includes:

• A pusher() transport for any Pusher-protocol client
• An actionCable() transport for Rails and AnyCable
• Custom transports, which need a subscribe() or subscribeToChannel() method
• A cancelable live router event. Return false from the listener to skip an update

#Release Notes

You can see the diff between 3.10.0 and 3.11.0 on GitHub. The following release notes are directly from the Inertia.js GitHub release and the inertia-laravel GitHub release:

#Inertia.js v3.11.0

• [3.x] Support for Live props by @pascalbaljet in #3232
• [3.x] Bump dependencies by @pascalbaljet in #3368

#inertia-laravel v3.7.0

• [3.x] Support for Live props by @pascalbaljet in #901