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.
Contents
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.
To follow along with this tutorial, you should have:
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
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.
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.
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.
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.
Hello Magento Friends, In today’s blog, I will explain How to Add Tooltip in Checkout…
MongoDB is a popular NoSQL database that offers flexibility and scalability when handling modern web…
In NodeJS, callbacks empower developers to execute asynchronous operations like reading files, handling requests, and…
Hello Magento Friends, In today’s blog, we will learn How to Show SKU in Order…
The "Buy Now" and "Add to Cart" buttons serve as the primary call-to-action (CTA) elements…
Hello Magento Friends, In Magento 2, the checkout process allows customers to choose multiple shipping…