My Experience Using Vuetify

The Struggle

Whenever I do frontend development, there’s always one thing I feel unsure about: how to make things look nice. The way I see it, my instinctive sense for design isn’t great, and even if I were to sit down and properly learn design, just doing the development alone already overwhelms my head. Fortunately, ever since Bootstrap, there have been plenty of UI component libraries (or frameworks) that produce decent results just by using them as-is. I tend to mainly use Bootstrap; it’s pretty, but more than anything it’s because I’m familiar with it. For some reason, though, I’m also kind of bored (?) with it, and remembering how well-received the Material Design things I’d built a few times back in the AngularJS days had been, I decided to try building with it.

The Choice

If you look here in awesome-vue, there are a few frameworks that implement Material Design. I briefly compared their pros and cons. In conclusion, as the title of this post suggests, vuetify was my final choice.

1. vue-material

Pros

1. It’s the Vue.js version of AngularJS Material, so if you’re familiar with the original, it’s easy to use.
2. The official documentation is clean.

Cons

1. It has everything you’d need, but the number of components is smaller than vuetify.
2. Its GitHub stars are about half of vuetify’s.

2. vuetify

Pros

1. It has lots of components.
2. You can get started easily with Vue CLI 3.
3. It has lots of GitHub stars. More than 12,000.
4. Compared to other frameworks, its ecosystem is relatively rich.

Cons

1. Maybe because it has too many features, the official documentation is messy.
2. As you develop, the tags and attributes get messy.
3. If you don’t start with Vue CLI 3, you often run into unexplainable, unsolvable errors.

3. muse-ui

Pros and Cons

• Its pros and cons are largely the same as vue-material, so I’ll skip them.

My Impressions of Using It

1. It’s good. I plan to keep using it going forward.
2. vuetify is harder to use than Bootstrap. I suspect it’s because there are far more components and far more attributes.
3. The results are well-received. I get the sense that, at some point, people have grown more familiar with Material Design and have come to prefer it over Bootstrap.
4. The HTML tags and attributes get verbose. I wonder if that’s just because I’m not using it well.
5. The official documentation seems detailed and well-made, but once I actually used it, it was a bit messy.
6. I also tried element-ui, which has lots of GitHub stars (my impressions), but vuetify is better.
7. I was amazed by the Chinese power around Vue.js.