Livewire or Inertia.js?

If you're a back-ender and need to create a project quickly with just some dynamic elements on the page, Livewire is probably your best solution. It doesn't take you outside of the comfort zone of Laravel: you kind of continue writing back-end Laravel code, creating PHP classes and Blade files. So, for Laravel developers adopting Livewire is typically faster than Inertia.

Inertia comes with a prerequisite: you need to be familiar with the front-end like Vue or React. So, it is by definition more complicated and requires more knowledge than Livewire.

Compare the sequence of actions.

Setup of Livewire:

• Install the Livewire package via composer
• Add 2 Blade directives into the main layout

Setup of Inertia Vue:

• Install the Inertia package via composer
• Add 2 Blade directives into the main layout
• Setup Inertia middleware
• Install client-side adapters: npm install @inertiajs/inertia @inertiajs/inertia-vue3
• Update the main resources/js/app.js with createInertiaApp() method

As you can see, there are more preparation steps with Inertia, and you need to be familiar with how all the Vue setup works in the Laravel project, including the main layout, and things like id="app", etc.

Now, how to create a Livewire/Inertia component?

New Livewire component:

• Make Livewire component with Artisan
• Fill in the Livewire component class and its Blade with logic
• Call the Livewire component with @livewire or <livewire>
• Build a navigation/routing system between components

New Inertia component:

• Create a Vue.js component with logic and visual template
• Call Inertia component with Inertia::render()
• Build a navigation/routing system between components

It seems there's roughly the same amount of work, except that Inertia doesn't have an Artisan command to create its component.

But mentally, it's much less work for Laravel developers to stay within Laravel class/Blade structure than to create a new Vue file with <template> and <script>. It's just quicker.

But if the developer can call themselves a full-stack and works with Vue.js daily, then it's a no-brainer for them to go the Inertia way.

Original Source

Article source: https://article-realm.com/article/Health-Fitness/22374-Livewire-or-Inertia-js.html