laravelvue.jsbreezeinertiajslaravel-ui

What is the best way for integrating Vue.js in Laravel projects: Inertia.js or Laravel UI?


I am currently working on a project using Laravel and I am at the stage of integrating Vue.js. I have noticed that there are various ways to implement Vue in a Laravel project, with the two main options being Inertia.js and Laravel UI.

Inertia.js seems like an appealing solution as it facilitates the creation of server-side rendered (SSR) applications and, with the help of packages like Breeze or Jetstream, allows for quick initial project setup. On the other hand, Laravel UI also offers a pre-built authentication layer along with initial setup for working with Vue. I am leaning towards Laravel UI due to my familiarity with it from my early days of implementing Vue in Laravel applications using CDNs. I like how Vue components can be called without blades disappearing in the application usage, maintaining familiarity with the Laravel structure.

However, I would like to hear the community's experiences and recommendations regarding which of these two options (or any other alternatives) they consider more efficient, intuitive, and adaptable in the long term. What aspects should I consider when choosing between Inertia.js and Laravel UI in terms of performance, maintainability, and scalability? I appreciate any advice or perspective you can offer to help me make an informed decision.


Solution

  • In my opinion, if you were using laravel along with vue, and then bypassing the main components trough blade views, Inertia offers a handy way to deal with it. It also manages rendering, but AFAIK, Inertia is not Server-side rendering out of the box, you need to apply specific configurations for that. When you take look at the response (made through the useForm composable object), it returns the structured data vue needs to actually render a component, with the information passed in the properties, making a smooth user experience. However, you need to use it as it can be combined with pure ajax requests. For example, let's say you have a paginated grid with users and a dropdown as a filter for the name, every time you change to a new page in the grid, the call to this dropdown might be triggered again. Of course, in the classic way, this call would've been done too, but not as an ajax call, but included in the first html response. It offers more ways to optimize your aplication, in my opinion, if you are already using vue with laravel, I don't see why you can't implement inertia all along.

    If performance is a real concerned, you might want to have separate applications, at least, a front-end and a back-end, and see which of your services are the most used. Then, you can implement, for example, caching strategies, summary tables, query optimizing, etc.

    Definitely, choosing between a framework or another shouldn't be the only thing to worry about. You need to have a reference about, how many users you are expecting, how close they are to your server, how your data is structured. Most of the time, avoiding N+1 problems and a good cache implementation would get the things done, and thanks to cloud, you can vertically scale until you find a better solution for your performance issues,