A Step-by-Step Guide to Integrate Laravel with Inertia

Creating dynamic and user-friendly applications is becoming more important in web development. Companies and developers often struggle to connect a strong backend with a flexible frontend while ensuring everything works smoothly for users. This is where Inertia.js comes in handy, especially when used with Laravel. Laravel is famous for being simple and elegant, and Inertia.js helps link client-side tools like Vue.js, React, or Svelte with Laravel. This guide will show you how to integrate Laravel with Inertia easily without dealing with complicated APIs.

Getting Started with Laravel and Inertia

Laravel Inertia connects server-side frameworks and client-side SPAs. Here is a simple guide to help you integrate Laravel with Inertia.

Prerequisites

Before diving into the integration process, ensure you have:

A working installation of Laravel (preferably version 8 or higher).
Basic knowledge of either Vue.js or React.
Node.js and npm installed on your machine.

Step 1: Install Inertia.js

Start by installing the Inertia.js server-side adapter for Laravel. Open your terminal and run:

composer require inertiajs/inertia-laravel

This command adds the necessary dependencies for using Inertia in your Laravel application.

Step 2: Set Up Middleware

Next, you need to set up the middleware that will handle Inertia requests. Use the following Artisan command:

php artisan inertia:middleware

This command publishes the HandleInertiaRequests middleware to your application. You must register this middleware in your App\Http\Kernel.php file under the web middleware group:

'web' => [
// Other middleware...
\App\Http\Middleware\HandleInertiaRequests::class,
],

Step 3: Create Your Root Template

In order for Inertia to function correctly, you need a root template that will load your assets and serve as the entry point for your application. Create a file named app.blade.php in your resources/views directory:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
@inertiaHead
</head>
<body>
@inertia
</body>
</html>

The inertia directive is crucial as it tells Laravel that this view will be managed by Inertia.

Step 4: Set Up Client-Side Framework

Now, it is time to set up the client-side framework. If you are using Vue.js, install the necessary dependencies:

npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue@next

If you are using React, you would install:

npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom

Next, initialize your Inertia app in your main JavaScript file. For Vue.js, it might look like this:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

createInertiaApp({
resolve: name => require(./Pages/${name}),
setup({ el, App, props }) {
createApp({ render: () => h(App, props) })
.mount(el);
},
});

This code sets up a basic Vue application that uses Inertia for routing.

Building Your First Page

With everything set up, you can now create your first page. Create a new component in resources/js/Pages, for instance Home.vue:

<template>
<div>
<h1>Welcome to My Application</h1>
</div>
</template>

<script>
export default {
// Component logic goes here
}
</script>

To render this page from your controller, use the following code in one of your routes:

use Inertia\Inertia;

Route::get('/', function () {
return Inertia::render('Home');
});

When you navigate to the root URL of your application, you should see your welcome message displayed without a full page reload.

Handling Form Submissions

One of the significant advantages of using Inertia is its ability to handle form submissions seamlessly. Instead of reloading the page upon form submission, you can use Inertia's methods to send data back to your Laravel backend.

For example, consider a simple form component for adding users:

<template>
<form @submit.prevent="submit">
<input v-model="name" placeholder="Enter name" />
<button type="submit">Add User</button>
</form>
</template>

<script>
import { Inertia } from '@inertiajs/inertia';

export default {
data() {
return {
name: '',
};
},
methods: {
submit() {
Inertia.post('/users', { name: this.name });
},
},
}
</script>

This form uses Vue's two-way data binding and submits data via Inertia without refreshing the page.

Final Thoughts

Laravel with Inertia.js makes it very easy to create modern and dynamic applications. It removes the need for separate APIs and keeps server-side routing simple, so you can spend more time building features instead of dealing with complicated setups. Inertia brings together the power of Laravel and modern JavaScript frontend frameworks for both small apps and large systems. It also simplifies managing data and improves your workflow while providing a smooth user experience. By following this guide, you will know how to integrate Laravel with Inertia. If you want a high-quality and fast website, consider working with a Laravel development company.