Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Introducción a Vuetify

Veamos qué es Vuetify y cómo nos ayudará a agilizar nuestros tiempos de desarrollo.

Uso de Vue 3 y Vuetify

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.

¿Qué es Vuetify?

Vuetify es un framework de componentes para Vue. Como bien nos dice su documentación, no requiere que tengamos habilidades de diseño porque es una biblioteca de interfaz de usuario con componentes diseñados para verse bien.

Instalación de Vuetify

Damos clic en Get Started, estamos en la página oficial de Vuetify 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.

Componentes de Vuetify

Nos dirigimos a la sección de Components y aquí encontramos una variedad de elementos como:

Buttons
Cards
Chips
Diálogos
Dividers

Uso de Cards en Vuetify

Anteriormente hemos hablado de cards, veamos qué son.

Las cards son tarjetas y un ejemplo es el siguiente:

Vuetify nos proporciona un componente llamado v-card, cuyo resultado es el que estamos viendo. Podemos personalizarlo de la siguiente manera:

Agregar un título
Agregar un subtítulo
Incluir acciones
Indicar que el card se encuentra cargando

Todo esto es configurable dentro del componente v-card.

Personalización del modo de visualización

Yo me encuentro viendo el sitio de Vuetify en modo oscuro.

Si tú prefieres verlo en modo claro, puedes hacer clic en la opción correspondiente.

Dependerá de cómo prefieras ver la documentación.

Durante este curso, estaré usando el modo oscuro.

Importancia de la documentación de Vuetify

La documentación de Vuetify es clave, ya que nos describe su API, es decir, qué componentes tenemos disponibles y qué atributos podemos utilizar en cada uno.

Por ejemplo, el componente v-card tiene propiedades como:

Borde
Color
Densidad
Estado (activo o desactivado)
Elevación
Plano o con relieve
Altura
Imagen
Link
Estado de carga

Todo esto lo iremos viendo en detalle a lo largo del curso.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

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.