Laravel 11 Installation with Inertia.js: A Step-by-Step Guide

Laravel 11 is the latest and greatest version of the popular PHP framework, and when combined with Inertia.js, it offers an elegant way to build modern single-page applications (SPAs) without the need for a full-fledged front-end framework. In this guide, we’ll walk you through setting up Laravel 11 with Inertia.js.

Prerequisites

Before starting, ensure you have the following installed:

PHP >= 8.2
Composer
Node.js & npm
A database like MySQL or PostgreSQL

Step 1: Install Laravel 11

Open your terminal and run the following command to create a new Laravel project:

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

Verify the installation by running:
```
 php artisan --version
```

Step 2: Install Inertia.js

Inertia.js has server-side adapters and client-side integrations. Since Laravel is our backend, we’ll use the Laravel adapter and set up Vue as our frontend framework.

Install the Laravel Adapter

Run the following command to install Inertia.js for Laravel:

composer require inertiajs/inertia-laravel

Install the Frontend Framework (Vue.js)

Use npm to install Vue.js and its dependencies:
```
 npm install vue @inertiajs/vue
```
Install the Laravel Vite plugin:
```
 composer require laravel/vite-plugin
```

Step 3: Configure Laravel for Inertia.js

Publish Inertia Middleware

Run the following command to publish the Inertia middleware:

php artisan inertia:middleware

This creates a middleware file located at app/Http/Middleware/HandleInertiaRequests.php. It is automatically registered in your Kernel.php.

Set Up Routes

Define a basic route in routes/web.php:

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'appName' => config('app.name'),
    ]);
});

Step 4: Create Vue Pages

Create a resources/js/Pages/Welcome.vue file:

 <template>
     <div>
         <h1>Welcome to {{ appName }}</h1>
     </div>
 </template>

 <script setup>
 defineProps(['appName']);
 </script>

Update resources/js/app.js to register Inertia and Vue:

 import { createApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

 createInertiaApp({
     resolve: (name) =>
         resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)
             .mount(el);
     },
 });

Step 5: Configure Vite

Update your vite.config.js:

 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';

 export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/js/app.js', 'resources/css/app.css'],
             refresh: true,
         }),
         vue(),
     ],
 });

Run Vite to compile assets:
```
 npm run dev
```

Step 6: Migrate the Database

Set up your .env file with the database details. Then run:

php artisan migrate

Step 7: Run the Application

Start the development server:

php artisan serve

Visit http://127.0.0.1:8000 in your browser. You should see the welcome page powered by Inertia.js and Vue.

Example Project Structure

Your Laravel 11 project with Inertia.js should now look like this:

laravel11-inertia/
├── app/
├── bootstrap/
├── config/
├── resources/
│   ├── css/
│   ├── js/
│   │   ├── Pages/
│   │   │   └── Welcome.vue
│   │   └── app.js
├── routes/
│   └── web.php
├── vite.config.js

Next Steps (Assignment)

Add more pages and components.
Integrate authentication using Laravel Breeze or Fortify.
Customize the UI with Tailwind CSS.

By following these steps, you’ve successfully installed Laravel 11 with Inertia.js and Vue.js. This setup provides a solid foundation for building modern web applications with the power of Laravel and the interactivity of Vue.

Stay tuned for more articles on various topics related to software development and programming.

Feel free to share your thoughts or ask questions in the comments below! 🚀

Laravel 11 with Inertia.js: A Step-by-Step Guide

Table of contents