Installing and Configuring Inertia.js with Vue3 on Laravel 9

4 min readFeb 16, 2022

Introduction

I am an aspiring Web Developer, graduated from RMIT in 2021 with a Masters of IT. I decided to write these tutorials specially to help me get better at programming and also to share my experience so that it may help someone else. I will reference all the resources I have used. Leave a comment if I have made any mistakes or about points I can improve upon.

Creating a New Laravel 9 Application

There are two methods to create a new laravel app. Using the Laravel installer or directly creating an app via composer. I’ll be using the Laravel installer here.

Prerequisite: Install composer via https://getcomposer.org/download/

Using composer to pull the Laravel installer.
composer global require laravel/installerSmall side note here, If you get an error on this part, remove the installer and reinstall it.
composer global remove laravel/installer
After that create the app using the command below. You can enter any name for your application, mine is ‘Portfolio_template’
laravel new Portfolio_template
Change to the new directory created for the app.
cd Portfolio_template/
Use PHP development server to host the app on your localhost.
php artisan serveCopy and paste the url shown on the terminal on your web browser to get the default laravel welcome page.

Installing and Configuring Inertia.js

Inertia lets you build single page application using default laravel server side routing and controllers, instead of building APIs.

Server Side Setup
Resource: https://inertiajs.com/server-side-setup

Intall Inertia via composer
Pull in Inertia.js using composer
composer require inertiajs/inertia-laravel
Setup root template
Go to the application folder /resources/viewsDelete the file home.blade.php and create a new file called app.blade.phpPaste the following code on app.blade.php.
Note: This code can also be found on the resource given above, I suggest you copy it from there.

<!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>

3. Setup Middleware
Create new middleware using artisan command:
php artisan inertia:middlewareUpdate App\Http\Kernel.php to include the new middleware. Find the web middleware section and add the new one.

‘web’ => [
 // …
 \App\Http\Middleware\HandleInertiaRequests::class,
],

Client side adapter setup with Vue3
Prerequisite: Install nodejs via https://nodejs.org/en/
Resource: https://inertiajs.com/client-side-setup

Install dependencies
npm install @inertiajs/inertia @inertiajs/inertia-vue3
Install vue3 via npm
npm install vue@latest
Initialize the app
Go to the file resources\js\app.js and paste in the following code.

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

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

According to the above piece of code, Inertia looks for the page component inside the Pages directory, so create a new directory on resources\js.

Next add vue to the compiler. Open webpack.mix.js and add vue(3) and version() support.

mix.js('resources/js/app.js', 'public/js')
 .vue(3)
 .postCss('resources/css/app.css', 'public/css', [
 //
 ])
 .version();

Final Setup and Compilation for Inertia

Run the following command to install any remaining dependancies.
npm install
Run the following command twice to compile everything.
npx mix(If you get an error during compilation, run npm update vue-loader. If vue-loader is not installed run npm i vue-loader.)

Creating a New Vue Component and Actively Running the Compiler

Create new Vue component
Create a file called Welcome.vue under resources/js/Pages directory and paste the below code.

<template>
  <h1>Hello World</h1>
</template><script>
  export default {};
</script>

Add Route
Open the routes/web.php file and, import Inertia and add the new route.

use Inertia\Inertia;Route::get('/', function () {
  return Inertia::render('Welcome');
});

Have the compiler actively watching for changes

To compile the code once the following commands can be used.
npx mix or npm run dev
To have the compiler actively watching for changes run either of the following commands.
npx mix watch or npm run watch

Once the compilation is complete, visit the hosted url on the browser to see out new Hello World welcome page.

Finally, If you want to learn more about Inertia, I suggest you watch this excellent laracast series by Jeffrey Way:
https://laracasts.com/series/build-modern-laravel-apps-using-inertia-js

Installing and Configuring Inertia.js with Vue3 on Laravel 9

Introduction

Creating a New Laravel 9 Application

Installing and Configuring Inertia.js

Creating a New Vue Component and Actively Running the Compiler

Written by Ruvinda Ranaweera