Vuetify

Application and Data / Languages & Frameworks / Front-End Frameworks
Developer and Owner at Appurist Software·

I'm building most projects using: Server: either Fastify (all projects going forward) or ExpressJS on Node.js (existing, previously) on the server side, and Client app: either Vuetify (currently) or Quasar Framework (going forward) on Vue.js with vuex on Electron for the UI to deliver both web-based and desktop applications for multiple platforms.

The direct support for Android and iOS in Quasar Framework will make it my go-to client UI platform for any new client-side or web work. On the server, I'll probably use Fastly for all my server work, unless I get into Go more in the future.

Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

READ MORE
15 upvotes·1 comment·716.4K views
Paul Whittemore
Paul Whittemore
·
November 8th 2019 at 2:16AM

Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

·
Reply
Senior Fullstack Developer at QUANTUSflow Software GmbH·

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
READ MORE
20 upvotes·1 comment·735.8K views
rishabh2712
rishabh2712
·
April 25th 2020 at 6:24AM

Thanks a lot for sharing.

·
Reply

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?

READ MORE
4 upvotes·29.1K views
Replies (3)
Developer and Owner at Appurist Software·
Recommends
Vuetify

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.

READ MORE
6 upvotes·1 comment·599 views
Paul Whittemore
Paul Whittemore
·
June 24th 2020 at 1:46PM

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.

·
Reply
Recommends
Bootstrap Vue

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.

READ MORE
5 upvotes·526 views
View all (3)
Needs advice
on
Vuetify
and
Quasar Framework

We want to build an e/m-learning platform, so please guide us on choosing Quasar Framework or Vuetify? Our preferred tech stack is - Vue.js, GraphQL, Apollo. Which is best suited for the production-level UI framework?

READ MORE
3 upvotes·17.4K views
Replies (3)

Quasar and Vuetify are two entirely different beasts - so your decision depends on what you need:

Quasar is a framework to develop multi-platform apps from the same code base. It supports mobile apps, websites (SPA or PWA if you want) and desktop apps. It comes with a build system and also with a UI framework (visible components).

Vuetify is a UI components library. So if you only need that, it might be the choice for you.

READ MORE
2 upvotes·395 views

Both of these frameworks have too much baggage for me. My bundle size tends to be rather large with each option, though both support tree-shaking. I prefer Vuetify for content sites and ecommerce and Quasar for building actual applications, because the components are very intuitive and much easier to use together in odd combinations than Vuetify: everything "just works" together with very simple and consistent styling and APIs.

If it were me, I would use Gridsome or Nuxt with Tailwind and minimal dependencies. You get a great DX still with tailiwind, good "tree-shaking" through PurgeCSS and nothing you don't need, with full control over your own components.

READ MORE
2 upvotes·384 views
View all (3)