Modern web development requires speed. Users expect interfaces that react instantly and data that updates without a refresh. Choosing the right php web framework is the first step toward meeting these expectations. Laravel has carved out a position as the premier choice for developers who value productivity and elegant syntax.
When you combine Laravel with Vue and Inertia 3.x, you create a seamless monolith. You get the power of a backend-heavy framework with the reactivity of a single-page application. This guide walks through building a real-time admin dashboard using the latest features of the ecosystem.
Starting Fast: Laravel Breeze and Inertia 3.x
You don't need to build authentication from scratch. Laravel provides starter kits that handle the heavy lifting. Laravel Breeze is the simplest way to get an Inertia-powered application running.
Begin by creating a new Laravel project. Install Breeze and choose the Vue with Inertia stack.
laravel new dashboard-app
php artisan breeze:install vue
This command sets up your routes, controllers, and Vue components. It includes Tailwind CSS for styling. You now have a secure, authenticated foundation. Inertia 3.x introduces refined ways to handle data flow between your PHP backend and your Vue frontend.
The Dashboard Philosophy: Prioritizing the User
A dashboard often aggregates data from multiple sources. Some data is critical, like the current user's name. Other data is heavy, like monthly revenue calculations or external API fetches.
Loading everything at once slows down the initial page paint. In a traditional build rest api with php approach, you might make multiple fetch requests from the client. Inertia 3.x simplifies this with Deferred props.
Optimized Loading: Deferred Props and Rescue Slots
Deferred props allow you to send the main page shell to the browser immediately. Heavy data loads in the background. This keeps your application feeling snappy.
Implementing Defer in the Controller
In your DashboardController, you can wrap expensive queries in the Inertia::defer method.
use Inertia\Inertia;
public function index()
{
return Inertia::render('Dashboard', [
'user' => auth()->user(), // Loaded immediately
'stats' => Inertia::defer(fn () => RealTimeStats::calculate(), rescue: true),
'recentSales' => Inertia::defer(fn () => Sale::latest()->take(10)->get()),
]);
}
The rescue: true flag is a powerful addition. If the RealTimeStats calculation fails, Inertia won't crash the page. It will "rescue" the error, allowing you to handle it gracefully in the UI.
Handling the UI in Vue
On the frontend, use the <Deferred> component. This component provides slots for different states: the default loaded state, a fallback for loading, and a rescue slot for errors.
<template>
<Deferred data="stats">
<template #fallback>
<div class="animate-pulse">Loading stats...</div>
</template>
<template #rescue="{ error, reload }">
<div class="text-red-500">
Failed to load stats.
<button @click="reload">Retry</button>
</div>
</template>
<StatsCard :data="stats" />
</Deferred>
</template>
This pattern ensures your users never see a blank screen. They see the structure of the dashboard first, while specific widgets hydrate as data arrives.
Real-Time Updates: The usePoll Composable
Dashboards are only useful if the data is fresh. Before Inertia 3.x, you might have used Echo and WebSockets for every small update. While Laravel Reverb is excellent for high-frequency updates, some metrics only need to refresh every few seconds.
The usePoll composable is one of the best php developer tools for this scenario. It automatically re-fetches specific props at a defined interval.
<script setup>
import { usePoll } from '@inertiajs/vue3'
const props = defineProps({
activeUsersCount: Number
})
// Refresh only the 'activeUsersCount' prop every 10 seconds
usePoll(10000, {
only: ['activeUsersCount'],
})
</script>
<template>
<div class="stat-box">
<h3>Active Users</h3>
<p>{{ activeUsersCount }}</p>
</div>
</template>
Using only is critical. It performs a partial reload. The server only returns the data for the activeUsersCount prop, saving bandwidth and processing power.
Performance and SEO: Server-Side Rendering (SSR)
For many dashboards, SEO isn't the primary concern. However, performance is. SSR ensures that the first thing a user sees is a fully rendered HTML page, not a loading spinner. This is especially important for public-facing dashboards or landing pages.
Setting up SSR
First, install the Vue server renderer.
npm install @vue/server-renderer
Inertia requires an ssr.js file, which Breeze typically generates for you. You then build your SSR bundle and start the SSR server.
npm run build
php artisan inertia:start-ssr
With SSR enabled, your Laravel server will execute the JavaScript on the backend and serve the final HTML. Your Vue app then "hydrates" on the client, picking up right where the server left off.
Building the Rest of the App
A dashboard is more than just displays. It involves management. When you build rest api with php inside a Laravel application, you benefit from Eloquent ORM and form validation. Inertia bridges these to your Vue components seamlessly.
Use router.post or the useForm helper for updates.
const form = useForm({
site_name: '',
})
const submit = () => {
form.post('/settings')
}
Laravel handles the validation. If it fails, Inertia redirects back and automatically populates the errors prop in your Vue component. No manual API error mapping required.
Conclusion
The combination of Laravel, Vue, and Inertia 3.x represents the peak of developer experience. You write PHP for your logic and Vue for your interface, without the friction of a decoupled API.
Deferred props ensure fast initial loads. usePoll keeps data fresh. SSR provides the performance foundation. These tools allow a single developer to build what used to require a whole team.
We'd love to hear how you're using Inertia 3.x in your latest projects. Start building today and see how fast you can ship.