1 month ago

Laravel + Vuetify vs Livewire + Tailwind

Posted 1 month ago by MtDalPizzol

Hi, folks.

In my last project, I coupled Laravel with Vue.js and Vuetify. This had its upsides and downsides. For my next project, I’m trying to figure out which route to take:

  1. Should I stick with my Laravel + Vue.js + Vuetify stack

  2. Should I try Livewire with Tailwind

So, I’d like to share my thoughts on what I liked and disliked on the last project and find out what others opinions are.

Using Vuetify was really good for theses reasons:

  1. I (almost) didn’t need to write CSS. I can safely say that I spent less than 1% of the time of the development writing CSS. This is really important since I think this is the main time consumer on my workflow.

  2. I didn’t need to worry about responsiveness. Vuetify components took really good care of that.

  3. The end result of the UI was incredibly good and no users reported any sort of problems in the 2 weeks the project is online.

  4. The assets generated by Vue CLI are PERFECT. All the codespliting, treeshaking, minification and that complicated Webpack stuff that we usually almost loose our minds with were handled gracefully by the CLI.

The downsides were these:

  1. Duplicated validations: validations which are ready out of the box on Laravel needed to be duplicated with vee-validate on the client side.

  2. Another problem is related with URLs. I love Laravel’s named routes and these are the only way I reference and generate URLs on my app. Not having access to these functionality on the client side sucks and I don’t like using something like ziggy, which adds code to be delivered to the user for something that is ready on the server.

  3. Handling permissions on the client side sucks. I love Laravel’s policies approach and I think it’s a real loss having to map permissions to a JavaScript object so Vue.js can decide what to and what no to render, for example.

  4. Not SEO friendly. Well.. You all know about that...

For the upsides, I MAY BE WRONG, but I have a feeling that all of those goodies will go away adopting Livewire + Tailwind.

My main “fear” on adopting Livewire + Tailwind is ending up having to tweak lots of classes and losing a lot of time to get something not as good as what is ready with Vuetify. I would also have to worry about responsiveness and It seems to me that Livewire handles “codesplitting” on a more traditional way. Adding script and style tags and latency (more round trips) to the page when it’s needed.

On the other hand, I think that every time we can keep things on the Laravel side of things, it’s a big win. Testing Livewire, for example, looks a lot better than testing Vue components. Since my main “fear” is losing time with CSS, one could suggest the new Tailwind UI. And I’m considering it. But it seems to me that it only solves the CSS problem. You’ll still have to write the JavaScript interactions with the components, which are ready in Vuetify.

So. I’m really, really undecided and I’d like to hear from you what your thoughts are.

Thanks in advance.

Please sign in or create an account to participate in this conversation.