Livewire or Vue.js: Which to Use When?
Vložit
- čas přidán 14. 05. 2024
- I've made a poll on Twitter/CZcams/LinkedIn, time to discuss the results and read your comments.
Links to poll results/comments: / 1786006833112518882
- - - - -
Support the channel by checking out my products:
- My Laravel courses: laraveldaily.com/courses
- Filament examples: filamentexamples.com
- Livewire Kit Components: livewirekit.com
- - - - -
Other places to follow:
- My weekly Laravel newsletter: us11.campaign-archive.com/hom...
- My personal Twitter: / povilaskorop - Jak na to + styl
Livewire is great, Vue also great. Using both.
Livewire for front part of app (i mean that one, which users saw when came to site) and SEO. And Vue for back part (which is not opened for search engines so its more like admin part but for other category of users).
We absolutely could use Inertia for SEO but in my tests - livewire has 3 times less weight and loads faster.
Livewire 2 was really bad in terms of perfomance. But now we have 3 and it was completely rewrited as far as i know so now its actually very fast.
Thank you for this Video. My reason for going to VueJS was purely to keep my JS knowledge up to date in a world where JS is taking over. I don't regret the decision.
I used both introduced livewire in my old company and now working with vue3 and from my perspective vue3 is superior but also harder to begin with for sure, once you have the foundation vue is better
I have used laravel with livewire, laravel with inertia react, laravel with vuejs. However, I am more comfortable using Inerta+React, because React has lots of packages, and Laravel too. so I think it's a perfect combination. so when creating a new project, I always use breeze with inertia and react
i think the reason vue comes first .. so the early devs adopted vue. and the new devs and upcoming devs will go with livewire.
For more flexibility, VUE.js (with Inertia)
I learned and used Livewire 2 in my previous training project. After that, I decided to learn modern vanilla JS and now re-making the project with JS modules in conjunction with pure CSS, SCSS and Vite. And I found this stack really powerful and having unlimited possibilities. The one downside is manually defining routes and writing fetch() functions. But you can really do anything you need. The number of lines of JS code is about the same as with Livewire, but now all frontend logic located in right directory, has clean structure and builded by Vite in a single js module. I don't know Vue.js yet and want to learn it next. But I don't want to return to Livewire.
i use livewire since livewire 1, due to date, i still struggle need to vite/npm/webpack vue, reactjs, tailwind, every single time of change a line of code.
Lol
I use what tickes my fancy that day😂😂
I believe the concept behind Livewire is excellent, but I sometimes struggle to understand the interactions between the browser and server. I hope the Laravel team's support will clarify this aspect.
I am learning Vue because I think it will open more doors in the future and want to avoid to be stuck in the Laravel bubble. (I could take a Nuxt js project for example). But I come from frontend background so is easier for me. Although, I do think if you are a laravel developer you should know at least the basics of Livewire.
Big problem with Vue and Inertia is making API's, parsing the JSON handling all the errors, etc etc. Livewire makes that soo much easier. If that was different I might try Inertia with Svelte
To me, I don't see livewire as a complete alternative to Vue. I find myself having to use livewire with alpine to get similar reactivitiy and functionality as Vue. But even then, I find livewire/alpine falls short in certain areas like lifecycle hooks. Another example is, in Vue, I can encapsulate all logic in a single component whereas I have to split my logic between livewire classes and in alpine which makes it harder to maintain and debug
This helps somewhat for the question I asked on another video a few days ago. I do have another request for a possible video. What technologies can work together, vs those that are either or situations. From my understanding, vue, react, and livewire are mostly either/ or tech stacks. But how bout alpine? If i utilize filament for a backend, can that be used with a vue or react frontend? ( i think the answer is yes, but how much configuring would I need to do for both to work together )
And blade, does vue/ react mostly replace blade, or does it supplement blade?
And from my understanding JS frameworks require an API set up (unless you use intertia?), so would that mean I either use an API controller vs a regular controller? Or do you need both?
And if you start with livewire, how much of a pain would it be to switch to react or vue? I'm not swapping yet, cause right now livewire seems to be working for most things as my components are fairly basic at this stage, but I'm thinking long term performance on a big site. If I'm going to potentially have issues, I want to get things started in the right direction now, rather than spending money reworking things later. My main concern is handing many users at once and data security. There are just so many tech stacks that its getting a bit overwhelming trying to figure out all the different processes that I would have to alter going from one system to another.
Some sort of quick summary video of various setups of tech stacks or any other of the laravel official packages could be helpful if you have the time
You're looking at it way too complicated. Generally, it's just this: you choose either TALL or VILT/RILT stack and don't mix them.
My video: czcams.com/video/1DYxvHrWkhA/video.htmlsi=rNwG_mV5UvXByjri
Just curious to know one thing here. Although there has been discussion a lot which stack is preferrable ( livewire or vue) for what project. But I was eager to know which one of them is preferrable to use in regard to SEO. If anyone knows about it please kindly share it. Thanks
Both may be good or bad for SEO, it depends mostly on how you structure the pages. Also, we're talking about SPA as single page applications which are APPLICATIONS and not websites. Internal applications don't care that much about SEO. But if you're building a website with SEO, you may even not use neither of dynamic elements or Livewire/Vue. It depends on the project.
what about you is a livewire can used for big projects?
Yes
Use vue if want use quasar or vuerify
Livewire is so slow on development when connect with database, like need 3s to apply the change on the browser. am I the only one experiencing this?
Yes! 3s is too much, Im using MySQL local here, Lviewire v3 and Laravel 10, very snappy! Sometimes making a CRUD with certain complexity, will be slow, but not 3s haha
Nope! Actually, the reason I don't like Livewire is because it is super slow when I'm developing (I don't know about when deployed to production) but I haven't had the energy to finish a project with LIVEWIRE. Vue works great for me, all day everyday. No hiccups! Very fast
No it doesn't take 3s. I used it and it hardly takes 1-1.5 seconds. Check your other code and optimize that
is it vue.js or inertia
Personally I've decided to stay away from inertia and rather just do API with a frontend framework(Nuxtjs). And livewire if I'm using laravel for frontend. HTMX is also something I'm considering.
I just can't understand. Why doesn't anyone mention server side rendering. Is SSR no longer relevant in 2024?
You're still getting SSR with Livewire aren't you?
@@pau1phi11ips yes
@@pau1phi11ips Yes I'm getting SSR with Livewire. I just don’t understand how you can make, for example, an online store Laravel + React or Laravel + Vue? Is SSR no longer needed? And if we take Next.js, for example, then why does it need Laravel? It's great even without Laravel.
@@pau1phi11ips Yes I'm getting SSR with Livewire. I just don’t understand how you can make, for example, an online store Laravel + React or Laravel + Vue? Is SSR no longer needed? And if we take Next.js, for example, then why does it need Laravel? It's great even without Laravel.
Bootstrap for economy!
😂
Noob!
Livewire
Livewire any time with alpine js
Vue is fun to use
SSR?
please make a video about Vue Flow
I don't want to dive into Vue on this channel, it's about Laravel
@@LaravelDaily would you have any recommended creators that have similar teaching style as you for vue/ react ? IE not starting from complete scratch on every tutorial and making videos straight to the point
Nuxt3 SSG and Laravel
im planning to transition to this (from quasar + laravel).. do you use $fetch or axios to make api request?
@@blalmal10a you can use both, but I just prefer axios because it's a bit more comfortable to enable global config, like common header, interceptor, and error handling
On useFecth they will suggest you to create a new custom composable (myUseFetch) to customize header and interceptor
$fetch...you will have to take a look at Nuxt docs to grasp the concept of using fetch in Nuxt as there are different ways to handle requests based on if the call is client side, server side, or if you want the call to occur on both.
Vue.js
SSR?
we use both kekw
We pay more when try to pay less. I've prefer to learn Laravel + more difficult React, but it will 2 big things, not 1+.
for me it depends on cost and deadline. vue js for best performance and livewire for fast develpoment
If you plan to use any major libraries or add-ons then you probably want Vue or React or Svelte.
Livewire is not really even acknowledged by and large in the JavaScript community. Not big enough.
Great observation, and often overlooked when this issue is discussed. For example you can use shadcn or other great UI libraries with Vue/react/inertia but not livewire. No fault of livewire, just an ecosystem popularity issue.
React feeling: am i a joke to you?
It is easier to learn Vue.js at very high level than both at midle level. Vue.js can be used outside Laravel.
Here's my take:
1) Never, ever use Livewire
2) For your first full-stack project, use the integrated Blade for an in-house frontend
3) For every project after that, your backend should be a Laravel API and use whatever you want as a separate frontend to consume that API (Vue if you like to have fun, React if you like to make money, Angular if your parents work at Google)
Vue.js have more future
The comment that prefers Vue for having larger community is not relevant anymore. Now that you can ask AI any question, and get very precise answers, community is not of the importance it used to be.
TL;DR - avoid Livewire for anything other than toy projects
livewire is not professional. This is somewhat reminiscent of WordPress.
In many cases, the front-end and back-end are on different servers, and livewire will be useless here.
Wait till he hears about HTMX
If the site works well and can be maintained, there's no problem imo
What's not professional about it?
@@krekas livewire is sometimes extremely difficult to connect with another js library. And to make it work, you have to come up with crutches. This is just one of the points.
Livewire is not intended to use with a JS framework or APIs. Its intended to use with TALL stack. If u need APIs use Vue or nuxt n standalone APIs
I use ReactJs with Laravel.
SSR?