Livewire vs. Inertia.js - what is the difference?

Kornél M. Novák 2021. February 26.

With the release of Laravel 8 developers can choose from new tools to structure the frontend of applications. A package called Jetstream provides the basics of these which allows us to create a basic Laravel application without much effort, which takes advantage of modern JS-based frameworks by providing a choice between Livewire or Inertia.js.

In this post, we’ll take a closer look at the fundamental differences between the two frontend stacks.

Livewire

Entering the Livewire page, you will find the following description:

"Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel."

So Livewire’s promise is to provide connection between the front-end and back-end environments, in a way that it ensures the creation of unique and reusable components using the modular layout of modern SPA frameworks using the familiar PHP and Laravel features embedded in our Laravel based code.

Let’s look at an example from the Livewire's page.

Creating a real-time search engine in Livewire is available in no time:

use Livewire\Component;

class SearchUsers extends Component
{
    public $search = &#039;&#039;;

    public function render()
    {
        return view(&#039;livewire.search-users&#039;, [
            &#039;users&#039; =&gt; User::where(&#039;username&#039;, $this-&gt;search)-&gt;get(),
        ]);
    }
}

&lt;div&gt;
    &lt;input wire:model=&quot;search&quot; type=&quot;text&quot; placeholder=&quot;Search users...&quot;/&gt;

    &lt;ul&gt;
        @foreach($users as $user)
            &lt;li&gt;{{ $user-&gt;username }}&lt;/li&gt;
        @endforeach
    &lt;/ul&gt;
&lt;/div&gt;

Later, this component can be used freely in our code:

&lt;body&gt;
    ...
    @livewire(&#039;search-users&#039;)
    ...
&lt;/body&gt;

A brief summary of the steps of operation:

Livewire renders its base component on the page (similar to the Blade include command). This way, it ensures SEO friendly operation.
When the user interacts with the component, Livewire sends an AJAX request to the server with the changed data.
The server re-renders the component and returns the updated HTML.
Livewire finally intelligently updates the DOM to track the changes.

More examples and the Livewire API are available on the Livewire documentation page: https://laravel-livewire.com/docs/2.x/quickstart

Inertia.js

Unlike Livewire, Inertia.js does not rely on the Laravel Blade template engine but uses Vue.js framework's templates to create the interfaces. From this perspective, we find a lot of similarities between developing a vue.js application and using inertia.js, with the significant difference that the application paths will be handled by Laravel instead of the Vue.js router.

So when using Inertia.js, we create Vue.js components, taking advantage of all the benefits of the framework, but leaving Laravel to render them and populate them with the data.

During development, we need to specify in the rendering that Laravel should not return Blade-based views, but use Inertia:

use Illuminate\Http\Request;
use Inertia\Inertia;

/**
 * Show the general profile settings screen.
 *
 * @param \Illuminate\Http\Request $request
 * @return \Inertia\Response
 */
public function show(Request $request)
{
    return Inertia::render(&#039;Profile/Show&#039;, [
        &#039;sessions&#039; =&gt; $this-&gt;sessions($request)-&gt;all(),
    ]);
}

Another advantage of Inertia.js is that it also includes predefined components (Dialog and Confirmation Modal) and that it has its own validation package that can be installed via NPM.

Additional examples and the Inertia.js API are available on the Inertia documentation page: https://inertiajs.com/

Before working with Jetstream, it is recommended to read the Inertia.js documentation to understand the basic concept.

If you need help, feel free to contact us.

Contact