Vuetify is a framework that combines the power of the popular VueJs with the aesthetics of Material Design. It allows to speed up the development of complex web applications, incorporating a large number of “ready to use” components.
Vuetify is based on the usual “grid” system for ordering the layout of the page. It has a huge library of components that includes everything from simple form elements such as buttons, combobox, inputs, sliders, to more advanced components typical in Android applications such as “cards” or “snackbars”.
All of them can be configured with different options to completely change their aesthetics and behavior. Thus, we have functions for ordering components, text styles, colors, icons, shadows, dialogs, animations, or touch support, as some examples.
Vuetify is Open Source, available at this https://vuetifyjs.com, and has the support of a large community and sponsors who are actively working to incorporate new elements and improve existing ones.
Usage Example
Quick start from CDN
For a quick start, we can simply add Vuetify from the CDNs. Especially suitable for very small projects, with special mention to IoT processors such as the ESP8266.
For example, create an ‘index.html’ file with the following content.
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-toolbar app>
<v-toolbar-title>My Application</v-toolbar-title>
</v-toolbar>
<v-navigation-drawer app></v-navigation-drawer>
<v-content>
<v-container fluid>
Hello World
</v-container>
</v-content>
<v-footer></v-footer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>If we execute the file, we will see our basic “hello world” application.
Creation from VueJs CLI UI
The usual way to work with projects with Vuetify is from the VueJs CLI UI, which we saw in this post.
To do this, we create a VueJs project and add the Vuetify component.
Next, we configure the options for our project.
Upon completion, we will have a project with the basic structure to start programming.
Conclusion
Vuetify is one of the most powerful frameworks for web development right now. Combined with VueJS CLI UI, we have all the tools to start programming really powerful web applications in a simple way.
It should be noted that Vuetify is a huge framework, with hundreds of components and options, and it is quite difficult to master. It is logical, but it is work that we avoid developing ourselves.
In any case, a very interesting framework that is well worth taking a look at.