Vuetify es un framework que combina la potencia del popular VueJs con la estética de Material Design. Permite acelerar el desarrollo de aplicaciones web complejas, incorporando una gran cantidad de componentes “listos para usar”.
Vuetify se basa en el habitual sistema tipo “grid” para la ordenación del layout de la página. Dispone de una enorme librería de componentes que incluye desde elementos de formulario sencillos como botones, combobox, inputs, sliders, a componentes más avanzados típicos en aplicaciones Android como “cards” o “snackbars”.
Todos ellos pueden configurarse con distintas opciones para cambiar por completo su estética y comportamiento. Así, tenemos funciones para ordenación de componentes, estilos de texto, colores, iconos, sombras, diálogos, animaciones o soporte touch, como algunos ejemplos.
Vuetify es Open Source, disponible en este https://vuetifyjs.com, y tiene el apoyo de una gran comunidad y patrocinadores que trabajan activamente para incorporar nuevos elementos y mejorar los existentes.
Ejemplo de uso
Inicio rápido desde CDN
Para un comienzo rápido podemos, simplemente, añadir las Vuetify desde las CDN. Especialmente adecuado en proyectos muy pequeños, con especial mención a procesadores IoT como el ESP8266.
Por ejemplo, crear un fichero ‘index.html’ con el siguiente contenido.
<!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>Si ejecutamos el fichero veremos nuestra aplicación básica de “hola mundo”.
Creación desde VueJs CLI UI
La forma habitual de trabajar con proyectos con Vuetify es desde el VueJs CLI UI, que vimos en esta entrada.
Para ello, creamos un proyecto de VueJs y añadimos el componente Vuetify.
A continuación configuramos las opciones de nuestro proyecto.
Al finalizar, tendremos un proyecto con la estructura básica para empezar a programar.
Conclusión
Vuetify es uno de los framework más potentes que hay ahora mismo para desarrollo web. Combinado con VueJS CLI UI tenemos todos los medios para empezar a programar aplicaciones web realmente potentes de forma sencilla.
Hay que remarcar que Vuetify es un framework enorme, con cientos de componentes y opciones, y que cuesta bastante dominarlo. Es lógico, pero todo es trabajo que nos evitamos de desarrollar nosotros.
En cualquier caso, un framework muy interesante que bien merece que le echéis un vistazo.