Setup Laravel with Vue and Inertia

2 min readFeb 6, 2022

This is quick tutorial for setting up your Laravel website with Vue and Inertia

Create New Laravel Project

composer create-project laravel/laravel example-app

cd example-app

php artisan serve

2. Setting Inertia for Server Side

composer require inertiajs/inertia-laravel

3. Create new file on resources/views/app.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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>

4. Setup Inertia Middleware

php artisan inertia:middleware

5. Update your App\Http\Kernel.php

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

6. Setup Client Side Inertia

npm install @inertiajs/inertia @inertiajs/inertia-vue3
// or 
yarn add @inertiajs/inertia @inertiajs/inertia-vue3npm install @inertiajs/progress
// or 
yarn add @inertiajs/progress

Setup Laravel with Vue and Inertia

Written by Nemesis Blog