Basic Setup Inertia JS with Laravel 8 And Vue 3

Its my experience when try build a little project with Inertia JS. Just like the title, it combine Inertia JS as glue for Laravel 8 as server-side and Vue 3 as client-side. So I take that anyone who read this already know how to deploy Laravel 8 with ‘artisan’ and combine it with Vue with ‘npm’.

Laravel Mix 6 & Vue 3

Start with command ‘npm install’ then update laravel-mix and add Vue 3.

npm install

Make sure it finish with 0 vulnerabilities , check package.json laravel-mix still in version 5, we need laravel-mix version 6.

npm install laravel-mix@next

Make sure it finish with 0 vulnerabilities. Then you need to do changes of code, check laravel-mix github, link here.

Pay attention on these section, ‘Update Your NPM Scripts’, ‘API for JavaScript Frameworks’, ‘Vue Configuration’. For npm scripts personally I won’t delete ‘dev’ line.

npm install vue@next

It will add Vue 3, then check package.json, dependencies of it has to be there, be sure check documentation from Vue official website.

Inertia JS Setup

Its more or less same like documentation of Inertia JS. Start with server-side setup then client-side setup.

composer require inertiajs/inertia-laravel

Install the adapter of Inertia JS for Laravel. Check the server setup here.

resources/view/app.blade.php

Create app.blade.php and just copy and paste template from here.

php artisan inertia:middleware

Run artisan for create Inertia JS Middleware.

protected $middlewareGroups = [
'web' => [ ...
\App\Http\Middleware\HandleInertiaRequests::class ]
...

Register HandleInertiaRequests::class in Kernel.php on web middleware group.

npm install @inertiajs/inertia @inertiajs/inertia-vue @inertiajs/inertia-vue3

Install Inertia JS adapter for Vue. Notice the additional inertia-vue3.

Add lines of code initialization of Vue 3 app on app.js , just copy and paste from https://inertiajs.com/client-side-setup.

npm install @inertiajs/progress

Intall Inertia JS progress, then add lines of code, it also on https://inertiajs.com/client-side-setup.

Inertia minimum setup done, there is some cache setup but it can do later.

The rest was just Laravel routines step

Create folder and vue file, ‘resources/js/Pages/Home/Index.vue’ , just make simple code with :

<template>
   <div>
      <h1>Hello World</h1>
   </div>
</template>

php artisan make:controller HomeController

Create ‘HomeController’ with artisan, add line of code like this:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia; // use Inertia class
class HomeController extends Controller{
     public function index(){
     
          return Inertia::render('Home/Index');
     }
}

Next, modified ‘routes/web.php’, change the code :

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
Route::get('/', [HomeController::class, 'index'])->name('home');

Go to console command and do ‘npm run dev’, if message appear like this ‘Additional dependencies must be installed. This will only take a moment.’, ‘npm run dev’ again until ‘DONE Compiled successfully’.

Start the server with command ‘php artisan serve’ , check your development server and ‘Hello world!’ show.

Testing Inertia JS

The ‘Hello World!’ is the prove that the setup is success but I guess its not do the justice. You might want to know if Inertia JS feature is running and working. Let’s make simple link between pages.

1. Add lines of code on existing ‘HomeController.php’.

public function about(){ return Inertia::render(‘About/Index’); }

2. Create new folder and vue file ‘resources/js/Pages/About/Index.vue’. Add lines of code.

<template>
     <div>
        <inertia-link href=”/”>Home</inertia-link>
        <h1>About Us</h1>
     </div>
</template>

Notice that we add new element there <inertia-link>.

3. Add lines of code on ‘routes/web.php’.

Route::get(‘/about’, [HomeController::class, ‘about’])
->name(‘about’);

4. Modified existing vue file on ‘resources/js/Pages/Home/Index.vue’. Add new element <inertia-link>.

<template>
   <div>
       <inertia-link href=”/about”>About</inertia-link>    
       <h1>Hello World</h1>
   </div>
</template>

5. Do ‘npm run dev’ and run your server ‘php artisan serve’.

Let’s see the result, your page will behave like how SPA did.

And yes, I just do the fastest way with that ‘href’ and you might want to check how to do proper ways to link using route from Inertia JS documentation.

Well, that’s the basic setup to combine Inertia JS with Laravel 8 as server-side and Vue 3 as client-side. Hope it helps.

Github sources

You can download the sources in https://github.com/polaweb/laravel8-inertiajs-vue3-boilerplate.

After you extract the zip / clone on your local folder, you need to run ‘npm install’, then run the Laravel with ‘php artisan serve’.

Updated

I add Ziggy, its Laravel package for javascript route that works on blade template. I also change lines of code on app.js, add some option on webpack.mix.js and add little Vue 3 layout.