Laravel + Inertia.js: Build Modern SPAs Without APIs (Step-by-Step Guide)

Building a modern SPA without maintaining a separate API layer is one of the biggest advantages of pairing Laravel with Inertia.js. You get SPA behavior while staying fully in the server-driven paradigm.

This approach simplifies development, reduces complexity, and improves performance. Before starting, make sure you know how to install Laravel via Composer.

Below is a practical, step-by-step guide to help you implement Laravel Inertia.js SPA without API cleanly. You should also learn how to identify slow queries in Laravel for better performance.

What is Inertia.js (in Laravel context)?

Inertia.js acts as a bridge between Laravel (backend routing/controllers) and frontend frameworks like Vue, React, or Svelte.

Instead of returning JSON APIs, Laravel returns pages made of components and props.

Think of it as a server-driven SPA without building an API.

For security, you should also encrypt IDs in Laravel URLs to protect sensitive data.

How Laravel Inertia.js Works

• Browser makes a request
• Laravel handles the route
• Controller returns Inertia response
• Frontend component receives props
• Page updates without reload

Step 1: Install Laravel

composer create-project laravel/laravel inertia-app
cd inertia-app

After installation, you can improve URL structure by learning how to remove public from Laravel URL.

Step 2: Install Inertia + Frontend Stack

Install Inertia.js and Vue 3 frontend stack.

composer require inertiajs/inertia-laravel
npm install @inertiajs/vue3
npm install vue@3

Install Laravel Breeze for authentication and starter UI.

composer require laravel/breeze --dev
php artisan breeze:install vue
npm install && npm run dev
php artisan migrate

Step 3: Setup Middleware

Laravel automatically includes the Inertia middleware.

\App\Http\Middleware\HandleInertiaRequests::class

This middleware shares global data and handles asset versioning.

Step 4: Create Your First Page

Route

use Inertia\Inertia;

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard', [
        'users' => \App\Models\User::all()
    ]);
});

While working with relational data, understanding many-to-many relationships in Laravel is essential.

Vue Page

<script setup>
defineProps({
  users: Array
})
</script>

<template>
  <div>
    <h1>Dashboard</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

Step 5: Navigation Without Reload

Use Inertia Link component for navigation.

import { Link } from '@inertiajs/vue3'

<Link href="/dashboard">Dashboard</Link>

This provides SPA behavior without full page reload.

• No full page reload
• State is preserved
• Better user experience

Step 6: Forms Without API

Inertia allows form submission without Axios or APIs.

import { useForm } from '@inertiajs/vue3'

const form = useForm({
  name: '',
  email: ''
})

function submit() {
  form.post('/users')
}

Controller

public function store(Request $request)
{
    User::create($request->all());
    return redirect()->back();
}

• Validation errors returned automatically
• No manual JSON handling

Step 7: Shared Data (Global Props)

Share global data across all pages using middleware.

public function share(Request $request)
{
    return [
        'auth.user' => $request->user(),
    ];
}

Step 8: Layouts

Layouts help reuse UI components like headers and navigation.

<script setup>
import Layout from '@/Layouts/AppLayout.vue'
</script>

<template>
  <Layout>
    <h1>Dashboard</h1>
  </Layout>
</template>

Step 9: Lazy Loading and Performance

Improve performance using partial reloads and state preservation.

• Use only() for partial data loading
• Use preserveState for UI state
• Use remember() for caching state

router.get('/users', {}, { preserveState: true })

Step 10: Authentication and Security

Laravel provides built-in security features.

• Middleware for route protection
• Policies for authorization
• CSRF protection enabled

No need for JWT or API tokens unless building external APIs.

When to Use vs Not Use Inertia

Use Inertia when

• Building admin dashboards
• Need fast development
• Same team handles frontend and backend

Avoid Inertia when

• Building public APIs
• Using microservices
• Need full frontend independence

Inertia vs Traditional SPA

Pro Tips

• Use Ziggy for route generation in JavaScript
• Use Laravel Query Builder for filtering
• Implement pagination for large data
• Use Vite for faster builds
• Cache heavy props for performance

Example Use Cases

• CRM systems
• Admin dashboards
• Internal tools
• SaaS platforms

Mental Model

You are not building an API and frontend separately.

You are building one application where Laravel controls everything and the frontend simply renders the UI.

This mindset simplifies development and reduces overhead.

Conclusion

Laravel and Inertia.js provide a powerful way to build modern SPAs without APIs. This approach improves development speed, reduces complexity, and enhances user experience.

If you need professional development services, visit WebPlanetSoft.

Category

Laravel Development, Web Development, JavaScript Frameworks