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.
add the middleware in the inside withMiddleware
use App\Http\Middleware\HandleInertiaRequests;
...
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})
open fresh laravel project in your favorite code editor, I use VSCode
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,
}),
],
});
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>
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)
},
})
You can try to make Vue page
create folder inside js folder like this
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>
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']);
Open HomeController.php
make index function to return the component with inertia
public function index()
{
return inertia('Home');
}
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
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)
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.