Building Real-Time Dashboards with Laravel, Vue 3, and Inertia 3.x

Modern web applications demand live data. Users expect statistics to update without clicking refresh. In the past, this required complex WebSocket setups or manual polling logic. Inertia 3.x changes that. It introduces a suite of features designed for real-time interactivity.

Laravel provides the backend stability as a premier php web framework. Paired with Vue 3 and the latest Inertia release, it creates a powerful toolkit for shipping dashboards fast. We’re moving beyond simple page loads. We’re building interfaces that breathe.

usePoll: Keeping Data Fresh

The usePoll hook is the simplest way to add real-time behavior. It automates background refreshes of your page props. You no longer need setInterval or custom cleanup logic.

In a dashboard context, you might want to update active user counts or revenue stats every few seconds. usePoll handles this by re-requesting specific props at a defined interval.

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

// Refresh the 'stats' prop every 5 seconds
usePoll(5000, { only: ['stats'] })

const props = defineProps({
  stats: Object,
})
</script>

This hook is smart. It manages its own lifecycle. When a user navigates away, the polling stops. When the browser tab goes to the background, Inertia throttles the requests. This saves server resources and preserves battery life on mobile devices. If you need full-speed updates even in the background, you can enable the keepAlive option.

Laravel acts as the perfect php developer tool here. The backend doesn't need to know about the polling. It simply returns the requested data when asked. This keeps your controller logic clean and focused.

useHttp: Non-Navigation Requests

Historically, Inertia focused on navigation. Every request typically resulted in a page change or a partial reload. Inertia 3.x introduces useHttp. This is specifically for standalone HTTP requests that don't trigger navigation.

If you need to build rest api with php endpoints that return raw JSON, useHttp is your primary tool. It uses the internal Inertia XHR client but skips the X-Inertia header. It expects JSON, not an Inertia render.

This is ideal for "Save" buttons that update a single row or background actions like clearing a cache. You get all the reactive state you expect, processing, errors, and progress, without the overhead of a full page state update.

This distinction clarifies your architecture. Use useForm when you want the UI to reflect a state change across the whole page. Use useHttp for isolated background tasks.

Deferred Props and Rescue Slots

Dashboards often pull data from multiple sources. Some are fast, like a local database. Others are slow, like a third-party API or a complex reporting query. Loading everything before the page renders makes the app feel sluggish.

Deferred props solve this. You can send the main dashboard layout immediately and load the heavy charts in the background. In Inertia 3.x, the <Deferred> component handles the frontend implementation.

<template>
  <Deferred data="heavyReport">
    <template #fallback>
      <div class="skeleton-loader">Loading report...</div>
    </template>

    <div v-if="heavyReport">
      <Chart :data="heavyReport" />
    </div>

    <template #rescue="{ reloading }">
      <div class="error-box">
        <p>Could not load report.</p>
        <button @click="reload" :disabled="reloading">Retry</button>
      </div>
    </template>
  </Deferred>
</template>

The rescue slot is a major addition. If a background request fails, the rescue slot catches it. It prevents the entire page from breaking. You can provide a specific error UI and a retry button.

On the server, you simply mark the prop as deferred:

return Inertia::render('Dashboard', [
    'stats' => $stats,
    'heavyReport' => Inertia::defer(fn () => $report->calculate(), rescue: true),
]);

Setting rescue: true tells Laravel to allow this prop to fail gracefully. The client receives a "rescued" state instead of a 500 error.

High Performance with Octane

For real-time dashboards with high traffic, performance is critical. Integrating Laravel Octane can significantly reduce response times. Octane keeps your application in memory, meaning it doesn't have to boot the framework for every single poll request.

When you combine usePoll with an Octane-powered backend, the overhead of background refreshes becomes negligible. This allows you to scale to thousands of concurrent users without the latency typical of traditional PHP applications.

Conclusion: Shipping Faster

The Laravel ecosystem is built for speed. Not just execution speed, but development speed. Inertia 3.x bridges the gap between static pages and real-time applications.

By using usePoll, useHttp, and Deferred props, you build interfaces that feel native. You avoid the complexity of managing a separate frontend state library. Everything remains in your Laravel controllers and Vue components.

Start small. Implement usePoll on a single stat card. Experience how it simplifies your codebase. The next wave of dashboards won't be built with complex custom layers. They will be built with the elegant, standard tools provided by Laravel and Inertia.

We'd love to hear how you're using these new features. Share your dashboard builds with the community and let's keep shipping.