Site icon MageComp Blog

Building Modern Single-Page Applications with Laravel and Inertia.js

Bharat Desai
Building Modern Single-Page Applications with Laravel and Inertia.js

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?

Steps to Build Single-Page Applications with Laravel and Inertia.js:

Prerequisites

To follow along with this tutorial, you should have:

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.

Exit mobile version