In today’s web development landscape, developers often seek efficient ways to build dynamic, responsive applications without the overhead of managing complex APIs or client-side routing. Inertia.js, in combination with Laravel, offers an innovative approach to building modern Single-Page Applications (SPAs) while maintaining a simple and familiar development experience. This blog will introduce Inertia.js and demonstrate how it integrates with Laravel through a step-by-step example.
What is Inertia.js?
Inertia.js provides a unique way to build SPAs without requiring a separate API for your frontend. Unlike traditional SPAs that rely on client-side frameworks like React or Vue for routing and state management, Inertia leverages server-side routing with Laravel. It bridges the gap between server-side applications and SPAs, allowing you to keep the backend logic while delivering dynamic, seamless frontend experiences.
Why Use Inertia.js with Laravel?
- Eliminate the API Layer: You don’t need to build and maintain a RESTful API or GraphQL layer.
- Keep Laravel Routing: Inertia lets you use Laravel’s server-side routing without the need for frontend routing libraries.
- Simplified State Management: Inertia handles data fetching and page state management, letting you focus on application logic.
- Seamless Integration: Inertia allows developers to use popular JavaScript frameworks (like Vue or React) while still keeping the development flow in Laravel.
Steps to Build Single-Page Applications with Laravel and Inertia.js:
Prerequisites
To follow along with this tutorial, you should have:
- A working Laravel application (Laravel 8+)
- Familiarity with Vue.js or React (this tutorial uses Vue.js)
- Node.js and npm installed
Step 1: Installing Inertia.js and Vue.js
Start by adding the Inertia.js server-side package to your Laravel project:
composer require inertiajs/inertia-laravel
Next, install Vue.js and the necessary client-side packages for Inertia.js:
npm install vue@next @inertiajs/inertia @inertiajs/inertia-vue3
After installation, run the following command to compile your assets:
npm run dev
Step 2: Configure Inertia and Vue.js
We’ll now configure Laravel to work with Vue.js and Inertia.js. Open resources/js/app.js and update it to include Inertia’s setup with Vue.js:
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
Next, modify the Laravel layout file resources/views/app.blade.php to include Inertia:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
This layout serves as the base HTML for every page, and @inertia renders the page content.
Step 3: Building Your First Inertia.js Page
Let’s build a basic example to showcase a User List using Laravel’s controllers and Inertia.js’s Vue components.
Controller Setup
Create a new controller using the following command:
php artisan make:controller UserController
Next, update the UserController to fetch user data and pass it to the Vue component via Inertia:
namespace App\Http\Controllers;
use App\Models\User;
use Inertia\Inertia;
class UserController extends Controller
{
public function index()
{
$users = User::all();
return Inertia::render('Users/Index', [
'users' => $users,
]);
}
}
Defining the Route
Now, let’s define a route in routes/web.php to display the user list:
Route::get('/users', [UserController::class, 'index']);
Creating the Vue Component
In the resources/js/Pages/Users folder, create a Index.vue file to display the list of users:
<template>
<div>
<h1>User List</h1>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
users: Array,
},
}
</script>
This component receives a list of users from Laravel and displays it. When you visit /users in your browser, the page will load without a full refresh, thanks to Inertia’s SPA capabilities.
Step 4: Handling Form Submissions with Inertia.js
One of the advantages of Inertia is that it allows you to handle form submissions without having to reload the entire page. Let’s demonstrate this by creating a simple form to add a new user.
Creating a Form Page
First, create a new route in web.php for the form and submission:
Route::get('/users/create', [UserController::class, 'create']);
Route::post('/users', [UserController::class, 'store']);
In UserController.php, add the methods to display and handle the form submission:
public function create()
{
return Inertia::render('Users/Create');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
]);
User::create([
'name' => $request->name,
]);
return redirect('/users');
}
Creating the Form Component
Now, create a Create.vue component for the form in resources/js/Pages/Users/Create.vue:
<template>
<form @submit.prevent="submit">
<div>
<label for="name">Name:</label>
<input v-model="form.name" type="text" id="name">
</div>
<button type="submit">Add User</button>
</form>
</template>
<script>
import { Inertia } from '@inertiajs/inertia';
export default {
data() {
return {
form: {
name: '',
},
};
},
methods: {
submit() {
Inertia.post('/users', this.form);
},
},
}
</script>
This form uses Vue’s v-model to bind input values and uses Inertia to submit the form data without reloading the page.
Conclusion
Inertia.js offers a streamlined way to build SPAs using Laravel’s familiar server-side routing and data handling. By leveraging Inertia, developers can create highly dynamic, modern applications with minimal overhead and complexity, all while keeping the development flow intuitive and straightforward.
In this tutorial, we walked through setting up Inertia.js with Laravel, creating dynamic pages, and handling form submissions, all while maintaining the SPA experience. With Inertia.js, developers can focus more on building features and less on managing the complexities of API endpoints and client-side routing.
