Blog Post

What do I need to know about InertiaJS?

January 9, 2022 IT, PHP, Programming, Vue by Adam Biro

Intro to InertiaJS

In this note, I would like to go through how we can integrate InertiaJS with Laravel 8.

What is IntertiaJS?

Inertia JS is for SPA without building an API.
Instead, you reach classic server-side routing and controllers.
Inertia does not link to Laravel either Vue.
But it offers an adapter to Laravel and Vue or React.
It is not sitting on the top of Vue.
It is rather a glue/adapter for a server-side Framework like Laravel and a client-side Framework like Vue.
So you will be able to use traditional Controllers, Routing, etc …

Useful links about InertiaJS and integration

Install Debug tools for Chrome or Firefox.

If you start an InertiaJS app from the ground then:

Pre-requisites for the integration:

You need to have these tools on your computer to be able to follow the steps below.

PHP 8
Laravel 8

Integrate InertiaJS into the Laravel Framework: Back-End

Install the necessary package via composer command:

composer require inertiajs/inertia-laravel

Set the Welcome blade:

<!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>
        </head>
    <body>
        @inertia
    </body>
</html>

It is worth mentioning that we are adding here the @inertia directive to the template. That makes it possible to render the content via InertiaJS. Because of InertiaJS, we can execute Ajax calls from the Front-End without implementing an API endpoint. To provide default data on the first-page load InertaJS will generate initial data into the data-page attribute of the main app div in the HTML code. This main app div will be the main content div. This main app div will be generated to the output instead of the @inertia directive.

Setting up the Mix

Webpack is an incredibly powerful module bundler that prepares your JavaScript and assets for the browser. The only understandable downside is that it requires a bit of a learning curve. To flatten the learning curve, Laravel Framework has a Mix tool. This Mix tool is a thin layer on top of the Webpack. To be able to generate the JS and assets codes we need to configure the default mix settings for InertiaJS based on the screenshot below. After these modifications, the npx mix and the npx mix watch commands will generate the necessary output for our InertiaJS application.

Configure Laravel Mix for InertiaJS in the webpack.mix.js file

Set the Middleware:

php artisan inertia:middleware

Registration in the Kernel:

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

Set Inertia response in a method like:

Set Inertia response in a method like:
use Inertia\Inertia;
class EventsController extends Controller
{
    public function show(Event $event)
    {
        return Inertia::render('Event/Show', [
            'event' => $event->only(
            'id',
            'title',
            'start_date',
            'description'
        ),
        ]);
    }
}

Integrate InertiaJS into the Laravel Framework: Front-End

Install the following npm packages

npm install @inertiajs/inertia
npm install vue@next
npm install -D @vue/compiler-sfc

For me the installation was not successful at first and I could not run the mix command.
I used the following commands under (Ubuntu 20.04) that fixed my problems in the end.

npm install vue-loader@^16.2.0 --save-dev --legacy-peer-deps
rm -rf node_modules/
npm clean-install

Deleting and file renaming in Laravel:

Delete app/resources/bootstrap.js
Delete the content of the app/resources/js/app.js file and replace it with 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)
      },
});

Let’s check how it works:

To make InertiaJS work, we need to return the data in a specific render method. It looks similar to the blade template structure, but it is for InertiaJS. Let’s create this route in the web.php file of the Laravel Framework.

 Route::get('/', function () {
    // The Vue Template name should be capital because of convention
    return Inertia::render('Home', [
       'name' => 'Adam Biro',
    ]);
 });

When we added the snippet in the app.js file, we defined the path of the inertia rendering. We set it in the ‘require’ method as param. Because we have defined a ‘Page’ in the path, we need to create that Page directory. Se lets define it to have that path: ‘/resources/js/Pages/’.

To access the name property on the Front-End, we need to create a Vue template file. So let’s create the ‘resources/js/Pages/Home.vue’ file and pass this snippet there. The template and the script tags are mandatory because that is a Vue convention. Sometimes we need to extend a Vue file with specific CSS-related code. In that case, we can add the style tag into the Vue file.

<template>
    <h1>Hello, {{name}}</h1>
</template>
<script>
export default {
    props:{
        name: String,
    }
};
</script>

Conclusion & closing

After these steps above we have a functional InertjaJS environment that is integrated into Laravel and tested. We should see the dummy name on the output so we can start playing with it more.

Taggs: InertiaJS Laravel PHP8 VueJS3