Over the past few months, I have written several articles in this blog about VueJS, but I have not required any specific VueJS framework for the front-end, and in this case, the one I have used almost from the beginning has been Vuetify, which is nothing but an environment of Material Design components to make the development of your apps easier with VueJs.
Versión 1.x
Until recently, version 1.x was the one that was operational, and the one I’ve always used, but since the end of July 2019, version 2 is already published, with new improvements. For now, because the version I feel comfortable with is version 1, is what I will talk about in this post.
Basically, Vuetify is characterized by including a style sheet and Javascript code. It is quite Libyan, especially when compared to the performance it offers. Actually, it has several important parts, which can make it similar to Bootstrap (another classic of maneandodatos.es), especially the issue of the grid, but it also has differences, such as the availability of certain components, ready to use and very in the wave of VueJS.
Although in the first versions, many of the possibilities were “copies” of Bootstrap, with the passage of the versions they have been developing new things and leaving others obsolete. One of them is the case of Jumbotrons, obsolete. The card component is so powerful to be an ideal replacement, with even more options.
How to start with Vuetify framework
Undoubtedly, the best way to start working with Vuetify is with some prepared application layouts, where you download the complete code, and from there, you create your own style. It has several models, from login forms, to dashboards of various styles almost ready to start complicating with your components.
You can think that to start copying is not the best way, but in the long run, it is the best way to understand how the most basic of Vuetify works so that your application looks perfect!
What I like the most
There is several features that makes me feel comfortable with this framework, an as example, having an incredible color palette together with Material Design are the strengths of this framework, in addition to having prepared a good number of components, some simpler, and others quite complex. Personally, I liked badges, everything about forms, especially date pickers, and how easy it is to create menus.
Version 2 of Vuetify framework
With no doubt, the update of this framework has substantial changes in version 2, and by now, I have not yet used. The reason is that compatibility between versions is not immediate and many things change, from setup to implementation in VueJS. In my case, it is not only the configuration because I have not used NodeJS tools, but the access to the libraries directly, which makes the task difficult.
Because the migration process is not immediate, I skip it for now, but I must recognize that the error information has worked very hard, and that in a few weeks they have been correcting initial version 2 problems that users report. The project is more alive than ever, with a multitude of new proposals, and improving things, and above all, making complex tasks easy, something that is valuable, such as parallax or carousels, floating buttons, and much more.
In the next articles related to VueJS, I will use Vuetify (this is part 2 and part 5), and you can read how to work one of the predefined Vuetify templates.
Happy coding, with VueJS!