From Routes to Realtime: Building Full-Stack SPAs with Laravel, Vue 3, and Inertia 3.x

Building modern web applications often feels like managing two separate worlds. You balance API endpoints on the backend with client-side routing on the frontend. Inertia bridges that gap completely. With Inertia 3.x, combining a robust php web framework with Vue 3 is faster and cleaner than ever.

You get the speed of a single-page application without the overhead of building a separate REST API for every single view. Modern php developer tools make this workflow feel seamless from local setup to production deployment. Let us dive into the core patterns that make Inertia 3.x essential for modern web teams.

Live Polling: Keeping Data Fresh with usePoll

Realtime features no longer require complex WebSocket configurations for basic dashboard updates. Inertia 3.x introduces usePoll directly out of the box. It reloads specific page props on a defined interval without disrupting user interaction.

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

usePoll(5000, {
  only: ['metrics'],
})
</script>

<template>
  <div v-if="metrics">
    <p>Active Users: {{ metrics.activeUsers }}</p>
  </div>
</template>

You pass the interval in milliseconds as the first argument. The second argument accepts standard reload options like only or except. This ensures you only fetch the data you actually need.

API Integration: Building Rest API with PHP and useHttp

Not every interaction requires an Inertia page navigation. Sometimes you need traditional JSON responses for background tasks or sidebar widgets. Inertia 3.x provides useHttp to handle these non-navigation requests natively.

You can easily build rest api with php routes while keeping client-side state reactive. The request object exposes familiar utilities like processing states and error bags.

// routes/web.php
Route::get('/api/notifications', function () {
    return response()->json([
        'unread' => 4,
    ]);
});

<script setup>
import { useHttp } from '@inertiajs/vue3'
import { ref, onMounted } from 'vue'

const { get, processing } = useHttp()
const notifications = ref(null)

onMounted(async () => {
  const response = await get('/api/notifications')
  notifications.value = response.data
})
</script>

Deferred Rendering: Handling State with the New reloading Slot

Large datasets can slow down your initial page load. Inertia's <Deferred> component solves this by loading heavy props asynchronously after the main view renders. Version 3.x refines this pattern with a dedicated reloading slot prop.

This slot allows you to display subtle loading indicators when a partial reload occurs. Your component structure remains intact during background updates.

<template>
  <Deferred data="analytics">
    <template #default="{ reloading }">
      <div :class="{ 'opacity-50': reloading }">
        <AnalyticsChart />
        <span v-if="reloading">Refreshing data...</span>
      </div>
    </template>
  </Deferred>
</template>

You maintain total control over the user experience. Partial reloads never flash or reset your component tree unexpectedly.

Server-Side Rendering: Optimizing SSR with Vite

Search engine optimization and fast initial paint times require server-side rendering. Inertia 3.x deeply integrates SSR with Vite to streamline both development and production workflows.

During local development, SSR runs automatically within your standard Vite dev server. You no longer need to manage a separate Node process while writing code.

# Production build workflow
vite build
vite build --ssr
php artisan inertia:start-ssr

Authentication and State Management: Secure by Default

Security remains paramount when building full-stack applications. Laravel provides robust authentication out of the box, while Inertia shares session state seamlessly across every page request.

Starter kits for Vue and Laravel give you pre-built login, registration, and two-factor authentication flows. You skip boilerplate setup and focus entirely on your unique business logic.

use App\Http\Requests\Auth\LoginRequest;

public function store(LoginRequest $request): RedirectResponse
{
    $request->authenticate();
    $request->session()->regenerate();

    return redirect()->intended(route('dashboard', absolute: false));
}

State flows uni-directionally from your controllers to your Vue components. Global shared data like authenticated user details populate automatically on every request.

Wrapping Up

Building full-stack single-page applications does not require complex microservice architectures. Combining Laravel, Vue 3, and Inertia 3.x gives you a cohesive, elegant environment for shipping high-performance web software.

You get rapid feature delivery, clean syntax, and powerful tools like usePoll, useHttp, and deferred rendering. We would love to hear how you are using these features in your current projects.