Introducción a Vuetify

Hemos comentado que para el curso vamos a usar Vue3 y que vamos a necesitar crear algunos componentes y algunas páginas. Sin embargo, no queremos dedicar nuestro tiempo y esfuerzo a escribir códigos ESS. No queremos definir estilos, pensar en qué combinación de colores es buena, no queremos preocuparnos en escribir estilos para que nuestro sitio sea responsive, etcétera. Por el contrario, en este caso vamos a reutilizar componentes que ya estén definidos por un framework. En este caso vamos a usar Vuetify. Vuetify es un framework de componentes para Vue. Vuetify, como aquí bien nos dice, no requiere que tengamos habilidades de diseño porque de por sí es una biblioteca de interfaz de usuario con componentes que han sido diseñados para verse bien. Entonces le damos clic a Get Started, estamos en la página oficial de Vuetifyjs.com y solo debemos asegurarnos de estar usando la versión 3. Antes de instalar Vuetify sobre nuestro proyecto de Vue 3, vamos a revisar brevemente qué componentes nos proporciona. Nos vamos a la sección de components y aquí nos vamos a encontrar con buttons, cards, chips, diálogos, dividers, etcétera. Nosotros hemos hablado anteriormente de cards, veamos que son las cards. Las cards son tarjetas, un ejemplo es esta de aquí. Vuetify nos proporciona de un componente llamado vue-card y el resultado es lo que aquí estamos viendo. Si nosotros queremos le podemos poner un título, un subtítulo, le podemos agregar acciones a nuestro card o incluso podemos indicar que este card se encuentra cargando. Todo esto es personalizable sobre este componente llamado card. se usa de esta manera. Yo me encuentro viendo el sitio de Vuetify en modo dark, si tú quieres verlo en modo light puedes darle clic aquí y tal vez de esta manera alcanzas a ver mejor los estilos. Depende de cómo prefieres ver la documentación, yo estaré usando el modo oscuro. La documentación de Vuetify es importante porque siempre nos describe cuál es su API, o sea nos describe qué componentes tenemos disponibles y qué atributos están disponibles para cada componente. Por ejemplo este componente "v-cart" tiene propiedades. Podemos definir cuál es el borde que queremos, el color, la densidad, si está desactivado, qué tan elevado se encuentra, si es plano, cuál es su altura, si va a tener un imagen, si tiene un link, si se encuentra cargando o no. Todo esto lo vamos sirviendo detalle a lo largo del curso.

¡Suscríbete y continúa aprendiendo!

Introducción a Vuetify