Setup Laravel With Inertia
Published: 2024-04-29 15:12:39

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](https://laravel.com/docs/11.x/installation)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8xqwsruqhnyvalq30dz.png)

add the middleware in the inside `withMiddleware`
```php
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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h07j3aybb8lnasxqj61x.png)

*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 👇
```js
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
```php
<!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
```js
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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8lnfau0mkgylbglxfa5.png)

you can input your Vue code inside, this the example
```html
<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
<?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
```php
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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krt52khab9n6neifk7x4.png)

---

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

---

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