SPA in Laravel 11

Hi,

Right now I'm in a first steps of a project and wanna know that for developing a Single-Page Application with Laravel, which techniques or concepts is better,

using Vue/Inertia or something like Filament or Livewire.

hope someone with a good experience in both side, tells the exact diffrence in depth of a project.

LaryAI

2 years ago

Best Answer

Level 58

When deciding between Vue/Inertia and Livewire (or Filament, which is built on top of Livewire) for building a Single-Page Application (SPA) with Laravel, it's important to understand the fundamental differences in how they operate and the kind of developer experience they offer.

Vue with Inertia.js

Vue.js is a progressive JavaScript framework used for building user interfaces. When paired with Inertia.js, it allows you to create a SPA without building an API, as Inertia provides the glue between your front-end and Laravel backend.

Pros:

Full Control Over Frontend: Vue.js gives you the flexibility to manage your UI with a rich ecosystem and a comprehensive framework.
Client-Side Rendering: Enhances user experience by making the application feel more responsive and faster after the initial load.
Ecosystem and Community: Vue.js has a large community and a vast array of plugins and extensions.

Cons:

Complexity: Requires knowledge of modern JavaScript and Vue.js, which might have a steeper learning curve.
Separation of Concerns: While Inertia bridges the gap, you still manage front-end and back-end separately, which can increase complexity in large applications.

Example Usage with Laravel and Inertia:

// Laravel route
Route::get('/home', function () {
    return Inertia::render('HomeComponent');
});

// Vue component (HomeComponent.vue)
<template>
  <div>Welcome to the SPA with Vue and Inertia.</div>
</template>

Livewire

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

Pros:

Simplicity: Allows you to write minimal JavaScript, focusing mostly on PHP. Ideal for developers coming from a traditional Laravel background.
Tight Integration with Laravel: Works seamlessly with Laravel features and Blade templates.
Less Overhead: No need to use APIs or a separate front-end technology.

Cons:

Server-Side Rendering: Can lead to performance bottlenecks if not properly managed, especially with complex UIs and large datasets.
Less JavaScript Flexibility: While you can integrate JavaScript, it's not as inherently flexible as a decoupled Vue setup.

Example Usage with Livewire:

// Laravel route
Route::get('/dashboard', \App\Http\Livewire\Dashboard::class);

<!-- Livewire component (Dashboard.blade.php) -->
<div>
    Welcome to the SPA with Livewire.
</div>

Conclusion

Choose Vue with Inertia if you are comfortable with modern JavaScript and desire a more dynamic, client-side rendered application.
Opt for Livewire if you prefer to stay within the Laravel ecosystem as much as possible and are looking for simplicity and ease of use, especially if you are primarily a backend developer.

Both tools are powerful for building SPAs with Laravel, but the best choice depends on your specific project requirements and your comfort with the technologies involved.

1 like

ian_h

2 years ago

Level 20

Done both... and now have a preference.

Being more familiar with PHP and Laravel (though had enough VueJS experience to "do stuff"), I first went down the Livewire (v2.x) route. Built a few applications with it, including a recipe management system for Jamie Oliver, however, there were a couple of things that were really frustrating with it, primarily:

Object usage in templates
Session expiry handling

Due to the nature of it, using objects/models to populate templates on first render was fine, but after making some changes, certain situations where the data was serialised meant that it didn't know how to unserialise it (into the correct object), so it just unserialised it as an array. If I was to go this route again, I think I would make heavier use of DTOs and handle the data that way with arrays.

The other really frustrating thing for me was that session expiry meant that a page would sit stale and you would have to manually refresh the page to continue, even if the page didn't deliberately need or use sessions. I have a personal portal (think "categorised bookmarks" which as you can imagine, sits very idle for long periods of time). There is no code authentication (access is handled by both IP and HTTP Auth at the server level) and when left (I don't turn my desktop off, so it might be a couple days of no access but still open in a browser tab) but when I interacted with it, it would throw an error due to the timeout, which meant a page reload was the only solution to bring it back to life.

Now, I have a hard time trying to think of a good use for it.

Inertia & Vue although obviously a completely different ecosystem, does exactly what the language/frameworks were designed to do, front end things. The VueJS is exactly the same as any other VueJS app in regards to pages, props, rendering, etc.. and the Inertia part makes it incredibly easy to access the data from the Laravel application without the headaches of a fully separate frontend/backend architecture. All of my projects now that are suited for SPAs are done with Inertia & VueJS.. including previously mentioned portal site that can now sit idle for as long as it wants and never requires a full page reload to bring it back to life.

IMO, I would say if you have enough experience with VueJS and need an SPA, that would be the way to go.

1 like

Please or to participate in this conversation.