DEV Community

Akhmad Rizki Prayoga
Akhmad Rizki Prayoga

Posted on

Setup Laravel With Inertia

First you must have Laravel Application, or you can create new
Laravel project in your computer.

in this case I using composer create project to install Laravel app and Laravel version 11.
composer create-project laravel/laravel {your-project-name}
you can see in the documentation of laravel Install Laravel App

after that. Install the Inertia dependencies
composer require inertiajs/inertia-laravel

then setup the Inertia middleware using the Artisan command.
php artisan inertia:middleware

after success, setup the middleware. in laravel 11 there is no more HTTP Kernel file in Http folder and all necessary configurations have been moved to the bootstrap/app.php file.

Image description

add the middleware in the inside withMiddleware

use App\Http\Middleware\HandleInertiaRequests;
...
->withMiddleware(function (Middleware $middleware) {
        $middleware->web(append: [
            HandleInertiaRequests::class,
        ]);
    })
Enter fullscreen mode Exit fullscreen mode

open fresh laravel project in your favorite code editor, I use VSCode

Image description

this the folder structures

Congratulation your first Laravel inertia is ready to use but, is not finished yet. You need to organize it a little.

You need setup the client side first

you can use Vue, React, or Svelte. in this case I'm using Vue
npm install @inertiajs/vue3 and you need to install Vitejs/plugin-vue too npm install @vitejs/plugin-vue

Edit your vite.config.js file
you can coppy this 👇

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

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

Enter fullscreen mode Exit fullscreen mode

Rename your resources/views/welcome.blade.php file to app.blade.php. after that edit to like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Edit your resources/js/app.js file

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

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Enter fullscreen mode Exit fullscreen mode

You can try to make Vue page

create folder inside js folder like this

Image description

you can input your Vue code inside, this the example

<template>
    <div>
        <h1>Home Page</h1>
    </div>
</template>

<script setup>
// Add your script here
</script>

Enter fullscreen mode Exit fullscreen mode

For the test make a router and controller

create controller with this command
php artisan make:controller HomeController

edit routes/web.php

<?php

use App\Http\Controllers\HomeController;
use Illuminate\Support\Facades\Route;

Route::get('/', [HomeController::class, 'index']);

Enter fullscreen mode Exit fullscreen mode

Open HomeController.php

make index function to return the component with inertia

public function index()
    {
        return inertia('Home');
    }
Enter fullscreen mode Exit fullscreen mode

Running your app

Running your app with this command
php artisan serve
and npm run dev

Last, you just open your favorite browser to open your Laravel App
then type localhost:8000 in url

Image description


After that you can styling or whatever you want.
Thanks.


creedits:
Inertia Documentations: https://inertiajs.com/
Laravel Documentations: https://laravel.com/docs/11.x

Top comments (1)

Collapse
 
vhspirate profile image
VHSpirate

ty, I was struggling because I was following the inertia docs and I didn't realize that I needed laravel 11 so I was stuck setting up the middleware, once I changed my php and installed laravel 11 it was straightforward.