I'm migrating from pure Laravel with Bootstrap project to a kind of Laravel + Vue.js. Which one should I use for the UI?
We are considering bootstrap version 4. Still, which of these 3 should I choose? Pure bootstrap, Vuetify, or Bootstrap Vue?
The only significant potential drawback I see to Vuetify is that it is targeting only the Vue framework. If that is not a problem for the project, or as in this case it is actually one of the specifications, then I would certainly recommend Vuetify.
The Vuetify components are more rich and complete, the documentation is great (especially compared to the Bootstrap documentation, plus a new version of Vuetify docs is imminent now), the support and community are considerably better and more responsive, and there are very active updates (pretty much weekly).
I'm an owner of a paid Bootstrap theme and there was effectively zero support, it was weak, and I'm sad to say that I think Bootstrap is something that looks better in a demo than in practice.
Vuetify components are more modern-looking, and directly designed for use in Vue applications. I am biased in the sense that I have looked at both (bootstrap-vue as well) and my work with Bootstrap over a year old now, but at that time I chose to go with Vue and Vuetify and every day that decision feels more rewarding. I do not regret it at all, and I highly recommend Vuetify on Vue. It's also a really great fit with Laravel.
I missed the fact that you were already using Bootstrap in the existing project. My comments above were really intended for a new project and fresh choices.
If you are trying to add Vue to an existing Laravel+Bootstrap project then there is little to be done in terms of the CSS layer to add Vue. Taking advantage of Vue will help you arrange the client code more effectively but it can be done incrementally and you do not need to immediately change from Bootstrap to Bootstrap-Vue, but adding it will give you new component options.
There are separate questions here:
- do you want to adopt a new framework (e.g. Vue)?
- do you want an updated CSS library (Vuetify or Tailwind CSS would be my #1 and #2 there, Bootstrap 5 is also on the horizon)
- do you want to use this moment to pause and schedule some time now for longer-term evolutionary work?
If the answers to the first two are Yes and No, respectively, then Bootstrap-Vue for sure. you can take your time migrating to Bootstrap-Vue, taking advantage of the components it offers, knowing that they are using the same Bootstrap CSS underneath. Although I would probably use this as a good time to schedule a complete review and update of the code, first to Vue, then to Bootstrap-Vue, in separate phases, to reduce technical debt going forward. And if you're going to do that, replacing HTML that uses Bootstrap CSS with new Bootstrap-Vue components, then you can still stop to also consider which CSS package you want to be using a year or two or five from now (the third question).
If you are pressed for time and Vue is a given, there is only one answer here: do the migration to Vue, then update the HTML to use Bootstrap-Vue components as appropriate. And make your own Vue components with Bootstrap styling to fill the gaps in Bootstrap-Vue.
If you are not pressed for time, or as a side project (professional development), I would take some time to play around with the alternatives, get familiar with Vuetify (Vue-specific), Tailwind CSS (framework-independent), or even newer ones like Inkline. See what each brings and whether that is important to this project or not. My guess is that if you have existing code, none of the alternatives bring enough to warrant a switch, even Vuetify. For new projects, yes, but probably not with existing code that is just getting a refresh.
If you're already working with bootstrap, then it would be straightforward to move onto vue bootstrap. I'm using it in one of my projects and it's been a pleasant surprise. Easy to use, smartly designed, intuitive. I started using bootstrap back in 2012 and I grew tired of it so I moved forward to material design. After years of fighting against MaterializeCss, Bootstrap Vue feels slick. Vuetify is nice, it has awesome components and everything, but I wouldn't go back to it. Bootstrap Vue is my new favorite and they create new components every week.
Honorable shoutout to ElementUI, which is amazing too, albeit a little tied to the presets of 2019 which are getting stale.
I've tried VueStrap Vueify and CoreUI too but they weren't a full blown solution. The latter is lacking in documentation too.