Vuetify

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·799.9K 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
22 upvotes·1 comment·1.2M 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·41.5K 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·818 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·700 views
View all (3)
Needs advice
on
VuetifyVuetify
and
Quasar FrameworkQuasar 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·29.9K views
Replies (3)

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·567 views

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·556 views
View all (3)
Needs advice
on
Vue.jsVue.jsNode.jsNode.js
and
MongoDBMongoDB

I'd like to create a web app that realizes a warehouse manager. The warehouse would accept multiple varieties of potatoes from the farmers. I'd want the app to be able to run on both desktop and tablet, so the warehouse manager could verify and create new entries on spot but also users could check on the current warehouse state remotely.

I'd like the app to be able to handle contracts made with the farmers, basically, a contract would contain information about the farmer, the potato species, the overall amount, with how many trucks it should be delivered on what dates, and the delivery deadline until the agreed amount should be delivered. Therefore the warehouse manager could create a shipping schedule and plan ahead for each day, how many trucks will come to the warehouse.

Upon receiving, the storing base unit should be one crate. These crates should receive all the necessary information that will allow them to be traced back all the way to the farmer. The app should warn the user if a crate contains potatoes that are approaching their expiration date (differs across potato varieties). Upon exiting the warehouse the crates should have a valid exit case (it went to the processing unit, other warehouses, direct sale, or waste) The user should be able to search between records, filter and sort the data.

I have used TypeScript from my past and really liked it, wonder if Vue.js has some solutions to support Typescript.

I wonder if there is a major difference in database usage (SQL or NoSQL) in the case of this data structure (is it more difficult to search, filter, sort or hold on long term data if I'm using NoSQL) I'm not really used to backed development, is it alright to write my backend in something like Java or .NET? I also want a clean user interface, big buttons, easy to use, not distracting, fast, dashboard-like UI. Maintaining the opportunity to be able to create automatic charts and diagrams from the data record (I saw Vuetify has some pretty good UI elements for that, has for example React a better solution?)

READ MORE
5 upvotes·43.6K views
Replies (4)

As a general rule, NEVER use new technology for the first time to build production application. Put sometime in building sample applications and see how you feel about your choice of tech stack.

That said, here are my recommendations:

FRONTEND - Vue.js PWA

  • I can see that you've already used Vue.js with Typescript - the new version of Vue (v3) supports Typescript very well. You can't go wrong here!
  • PWA - A Progressive Web App setup would handle your requirement to have your system running as a Desktop, Mobile and Web app.

BACKEND - Node.js

This depends on your experience of using Node.js - there are plenty of Node.js frameworks out there that can give you what you need pretty quickly and in a very modern setup;

  • Express, Koa, Hapi, Fastify, etc. - lightweight and flexible Node.js frameworks for building backend applications
  • NestJs, SailsJs, etc. - more structured Node.js frameworks with a few more bells and whistles to solve common problems

The most important point here is to find something that will help you build your backend API as easily as possible. Think decoupled! Established backend frameworks in Java and .NET worlds might even been a good choice here if your experience is grounded there. I would also consider mature and developer friendly frameworks like Ruby on Rails here as well.

DATABASE - MongoDB

Perhaps, the easiest choice to make: I think MongoDB would fit your use case just fine. It is possibly the easiest to learn and get started with because of its schema-less approach. It also has great support in most Node.js based backend frameworks.

READ MORE
12 upvotes·40K views
CTO | Backend-Engineer at Krew·

If you are already familiar with Typescript and Vuejs - this would probably be the way to go - keep it simple and stupid. I would recommend starting a Vue3 Typescript app with Vite and a basic Nodejs template. OR If you are up to date on typescript i really recomment looking into NestJs as it provides anything you would need to get started and an amazing comunity!

READ MORE
6 upvotes·40.5K views
View all (4)