• By Clicking on "Accept", you agree to the storing of cookies on your device and accept cookie policy.
Front-end

Laravel Inertia: Installation guide and tips & tricks

Fri, 08.07.2022
Kasimali Dhuka
Kasimali@QalbIT
Laravel Inertia Installation guide and tips & tricks

Laravel is a widely used backend framework for web applications, many developers often use a separate frontend framework (React / Vue / Svelte) for creating a Single Page Application (SPAs), which often leads the developers to develop and use APIs, which can be time-consuming and difficult. This setback in developing separate APIs for the frontend can be solved using Inertia.js which helps developers create a single-page application without developing separate APIs. In this blog, we will understand what Inertia.js is and how to install it in laravel applications.

What is Inertia.js?

Inertia is a Javascript-based routing library popularly used to develop modern single-page apps by establishing a link between the backend and frontend frameworks.

Inertia isn’t a framework, nor is it a replacement for your existing server-side or client-side framework, it can be considered as a ‘glue’ that tightly couples the back and front of a modern web app.

Developers can use Inertia to couple powerful backend frameworks like Laravel/Rails with powerful frontend frameworks like Vue / React / Svelte. So, it is not a Laravel-specific package, as some developers wrongly assume.

Laravel-Inertia installation guide

Laravel inertia installation will be a seamless and easy-to-understand guide, thanks to excellent Inertia documentation. We will break it down into 5 pieces.

Step 1: Setting up the server-side with Laravel

Once you are finished with the installation of laravel, navigate to the current directory and install Inertia dependencies.

composer require inertiajs/inertia-laravel

Next, set up the root template that will be loaded on the first-page visit. This will be used to load your site assets (CSS/JS) and contain a root <div> to boot your Javascript application.

Next, search for app.blade.php file inside Resources/Views directory or if not found, you may create a new file or replace the welcome.blade.php.

After that replace the existing content with this code:

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

Here, @inertia acts like a helper that is a convenient way of passing first content to inertia and telling Laravel that the views are being generated using inertia.

Step 2: Setting up the middleware

Next, set up the Inertia middleware. In Laravel, you need to publish the HandleInertiaRequests middleware to your application, which can be done using this artisan command:

php artisan inertia:middleware

After running the following command, register the inertia middleware inside your App/Http/Kernel.php file, as the last item in your web middleware group.

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

After completing this your server-side setup is all complete and running. Now let’s get to the client-side setup and start your Laravel-Inertia experience.

Step 3: Setting up the client-side with Vue/React/Svelte

Next, we will be starting by installing a few dependencies for creating connection between the Laravel backend and your frontend framework.

Install dependencies :
Install the Inertia client-side adapters using NPM or Yarn.

Initialize App :
Next, update your main JavaScript file in resources/js/app.js to boot your Inertia app. All we’re doing here is initializing the client-side framework with the base Inertia component.

          
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)
    },
})            
          
      
          
import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props }) {
        render(, el)
    },
})
          
      
          
import { createInertiaApp } from '@inertiajs/inertia-svelte'

createInertiaApp({
    resolve: name => require(`./Pages/${name}.svelte`),
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
})

Add the above code to your resources/js/app.js file.

The resolve callback tells Inertia how to load a page component. It receives a page name and should return a page component module.
For the resolve callback to work, you should create a new directory named Pages and store your client-side views, as resolve will look for the components inside the Pages directory.

Step 4: Compile your project with Laravel Mix

Next, go to the webpack.mix.js file, and after mix.js(‘resources/js/app.js’, ‘public/js’), add .vue() code for finalizing your project.

Now, the final step would be to run npm mix and after the required dependencies are installed automatically, you may have to run it one more time. After this, your Laravel-Inertia project is ready for deployment.
Tip: You can install and use browserSync package and add (.browserSync(http://yourlocalhosturl.com)) to the webpack.mix.js just the same as above, for auto-deploying while in development.

Step 5: Render your view and routing

Finally, all your Laravel-Inertia setup is complete and ready to deploy. All that remains is to render your views and pass parameters to the view as props.

Rendering your frontend view template is the same as rendering the normal Laravel blade template that is done with the help of the view() helper function. In Inertia it is the same, the only difference is that instead of using the view() helper function, we can use Inertia::render() or inertia() helper function, which takes two parameters, first one is the template name which you may have created inside the resources/js/Pages folder and the second one is an array of data that you will be passing to your frontend template as props. Look at the below example:

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'
            ),
        ]);
    }
}

Now, your Laravel-Inertia is fully set up and you have Single Page Application (SPA) without any use of APIs. Inertia also supports posting form data, file uploads, validation, redirects, and many other features that make your work easy.

Benefits and Challenges of using Laravel Inertia

Each and every technology has some limitations or challenges. Therefore, before choosing Laravel Inertia for your project, here are some pros and cons.

Benefits of using Laravel Inertia js

  • Inertia helps eliminate the complexity of client-side routing
  • It can be easily configured with modern frontend frameworks like Vue, React, and Svelte.
  • All application paths are contained in a single file.

Challenges of using Laravel Inertia js

  • The developer working on this project needs in-depth knowledge about PHP and JS technology they choose.
  • Its usability is limited without Vuex
  • Backend API needs to be recreated if Laravel Inertia is used for creating and IOS/Andriod app.

Bonus: Livewire vs Inertiajs

There may be some similarities between Livewire and Inertiajs, which may get some developers thinking about choosing Livewire or Inertiajs when creating a laravel project.

While Livewire and Inertiajs have the same goal to simplify the creation of SPAs, however, they do it differently. Livewire is focused on Laravel developers, so they could stay back-end only and not deal with JavaScript at all. Inertia is for Vue or React developers who want to simplify their workflow: not create a separate API, not deal with routing, state management, and other challenges, So we can say that livewire is a Back-Ender’s, Comfort Zone.

Livewire is also said to be better for SEO in theory, but this feature can also be implemented in Inertiajs by using the Inertiajs Server-Side Rendering (SSR).

Conclusion:

This is a simple and complete step-by-step Laravel-Inertia tutorial and best tips & tricks guide. Make sure to go through the official Inertia documentation for troubleshooting and understand the benefits and limitations of Inertia before integrating it into your Laravel Project.

Also, if you are a full-stack developer or a backend developer with a frontend developers team, I highly recommend you to use Inertiajs which may reduce a lot of work.

FAQs

Frequently asked questions

chevron down Why do we use Inertia?

Inertia allows seamless integration between the backend (Rails, Laravel) and modern frontend frameworks (React, Vue, Svelte) with many added benefits for security, app development time, client-side routing, and more.

chevron down How does Inertia JS work?

Inertia at its core is a client-side routing library. It works via adapters that are available on its official website for backend technologies such as Rails and Laravel and frontend technologies like Vue3, Vue 2, React, and Svelte.

chevron down Do QalbIT solutions provide Laravel+Inertiajs implementation service?

Yes, we do provide a complete service for Laravel+Inertiajs implementation with our experienced developers.