The Best Material Design UI Library in Vue

📌 Introduction

There are lots of articles discussing Vue UI library (or framework, whatever), and even some of them are updated every year.

After I used one of the frameworks, Vuetify, more than a year, and after used it in several projects, I want to tell you why it is different than other(Vue author referred to it many times), and the best strategy to use it.

📌 Why you should use it

◎ 3rd awesome plugins Integrated

Such as Vee-validate, Vuelidate, Vue-the-mask... tools that are quite easy to use, or you were already familiar with, they were integrated by Vuetify. So it should somehow reduce our headaches of integrating all of them together with Vuetify.

◎ Many sponsors + vibrant community + premium services

You should have confidence when you use an open source project with a vibrant community, lots of comments back and forth and with a bunch of sponsors..., and with many paid services in it.

Having development problems? They have Business and Enterprise support (of course you can also ask questions in the community, and the response speed is really fast). Don't want to build the UI interface yourself? They have Free / Premium Theme ...

◎ So many components with amazing features

Have you ever had the experience: you found that the UI framework which you already used does not have a certain component, and sadly,
you can't(or not easy to do) combine or twist other elements of the framework to create that component.

That's what Vuetify mainly concerned with. Check out the declaration of it here. But Vuetify provide you tons of amazing feature which I can promise that you will love it, such as Auto Treeshaking, Skeleton Loaders, Lazy Loading... 。

BTW, If you like TDD, then I highly recommend you give it a shot. The rich features of components are definitely a huge helper when you TDD. (But I meaning E2E with TDD)

◎ Definitely enough & super friendly Doc

The way documentation present which developers dream of, I have to say... Vuetify is definitely one of the best examples. It contains ample content (e.g. how to integrate with unit test).

And more importantly, there are a huge amount of online examples that allow users to easily test and modify. At least in my experience of doc-reading, I can't see anyone who did a better job than Vuetify.

Of course, there is no perfect doc in the world.

◎ Real functional component

A majority of Vue developers, and in many other UI frameworks (I only check the most famous or the ones that most user use, e.g. iView, Element...) still use template to develop components.

But you will find that Vuetify uses the lower-level render function to develop components. That's because it needs to deal with many rather complex interaction logic.

In this way, the combination of components is more versatile and flexible, which is one of the major reasons why Vuetify is powerful. (I highly recommend that you go through the source code of each UI framework and compare them)

◎ Grid system heavily inspired by bootstrap grid

When you do frontend development, I think I don't need to show you how important it is to use grid system. For users who already masters in Bootstrap grid, you might find that it was similar when you look closely at Vuetify grid.

This means that for the majority of Bootstrap users, it just a piece of cake to get started to use Vuetify grid. And you can't do things without it after you master it.

📌 Use it in the right way

In the past, some of the front-end developers will roughly plan on the paper before he implements UI. They usually draw a rectangle on an element of UI diagram with some words nearby.

A rectangle represents HTML tag, such as <div>, <a>, <p>. They try to figure out what the HTML tags they will use when they code. Actually, it's a good habit and it's helpful for actual development. But at that time, jQuery still dominated the front-end world.

In the era of component prevalence, jQuery has long been a thing of the past. The UI framework, especially of something like Vuetify which is a very diverse and flexible one for component composition, should not treat it as simply a stuff that just combines some UI components.

Because if it's true, how about you go to find some of the ready-made UI components on the internet, and you package all of them, then what difference comparing UI framework? So the correct way to use Vuetify is by applying kind of thinking of planning HTML tags like what I said above.

In simple terms, you observe elements on the UI diagram, figure out how to only rely on Vuetify component to implement all of them(remember we do the same thing before, but use HTML tag). Make sure you only need to add the least amount of CSS or HTML to achieve the goal.

If the UI diagram implemented by Material Design, by using Vuetify, you have the opportunity to implement UI without writing any further CSS or HTML (trust me, this is possible because I did it). This concept is really important, I named this process "Lean Thinking in Component".

Although Vuetify official hasn't mentioned this, you can see this concept in almost all of the examples they provided. You might what "Lean Thinking" actually about. Well, let me use the below example to explain. Without writing any further CSS or HTML and only use Vuetify component, please tell me how you implement the Youtube logo in the UI(suppose you already have URL of that logo)?

Maybe you first have a floating toolbar on the page, then put the logo in the left-hand side of toolbar? But it's too complicated, the correct answer is just a button component(note that this does not require any additional CSS or JS). You might think, how simple it is? Well, keep practicing the process "Lean Thinking in Component", then you can do things well too❗️ Happy coding❗️

<v-btn absolute top text left :ripple='false' disabled>
        <v-img 
                :src='URL_LOGO' height='20' width='140' contain class='float-left'>
        </v-img>
</v-btn>