Vuetify: App Bar & App Main

A pesar que ya tenemos tres enlaces para la navegación, esos enlaces no se ven adecuadamente porque no tienen estilos. Lo que podemos hacer es usar algún componente de Vuetify para mejorar este diseño. Vamos a visitar la documentación de Vuetify y nos vamos a dirigir a la sección de Components. Dentro de la sección de Components hay un grupo de enlaces que dice Navigation. Aquí podemos encontrar distintas opciones de navegación. Una opción son los app bars. Un app bar es un componente que nos permite navegar. Un app bar luces de esta manera y una app bar puede contener acciones. Aquí debajo tenemos más ejemplos. ¿Cuál es la anatomía de un app bar? Un app bar contiene un app bar “nav-icon”, un app bar “title” y opcionalmente podemos poner acciones. ¿Cómo podemos empezar a usar este app bar? De hecho, si nosotros nos vamos a Getting started y visitamos la sección de "Wireframes", vamos a ver que algunos de esos ejemplos incluyen app bars. Por ejemplo, este de aquí contiene un app bar. Nosotros podemos poner un app bar y poner aquí nuestros enlaces. Por ejemplo: productos, categorías, carrito de compras. Pero si no queremos trabajarlo de esta manera, podemos hacer algo más directo, como este ejemplo llamado "constrained". Podemos tener nuestros enlaces aquí a la izquierda o aquí arriba de manera inmediata. Yo creo que este ejemplo de acá nos viene mejor porque no tenemos tantas opciones. Entonces le damos click a este enlace para ir a ver el ejemplo en GitHub. Vamos a copiarnos el app bar tal cual está y lo vamos a pegar en nuestra app, en nuestro componente app que ahora es el componente principal. Entonces, aquí arriba del "RouterView" pegamos nuestro app bar. Sin embargo, aquí obtenemos un mensaje de error. Lo que pasa es que este app bar contiene una directiva “v-for”. Aquí se está intentando iterar sobre un arreglo llamado "links". Nosotros vamos simplemente a acortar nuestros "RouterLinks" y los vamos a poner por acá. Vamos a quitar la directiva "v.for" para quedarnos simplemente con un botón simple. Este botón simple dirá, por ejemplo, “home”, "cart" y “about”. Estos botones no hacen nada. Es solamente para probar como se ve. Si volvemos al navegador nos encontramos con una página vacía. Vamos a presionar F12 para revisar los mensajes de error. Aquí nos dice que el símbolo "vuetify:layout" no se ha encontrado. ¿A qué se debe esto? Lo que pasa es que para que "v.app-bar" pueda funcionar, este tiene que ubicarse dentro de un "v.app ". Para que "v.app-bar" pueda funcionar, tiene que ubicarse dentro de un "v.app ". Es similar a lo que vimos para los cards. Algunos componentes están preparados para usarse dentro de otros, lo que vamos a hacer entonces es agregar una etiqueta "v.app". Dentro de "v.app". vamos a poner la etiqueta "v.app-bar". Guardamos y si actualizamos, vemos que los warnings han desapp barecido y tenemos aquí "home" "cart" y "about". Sin embargo, nuestro contenido está muy por debajo. Lo que pasa es que este componente "v.app" se supone que debe contener a toda nuestra aplicación. Esto es porque hemos dejado en la etiqueta "RouterView" fuera de "v.app". Entonces lo vamos a poner dentro. Guardamos y al volver aquí, nos encontramos con esto. De hecho, lo que se recomienda es que "v.app", así como contiene a "v.app-bar", contenga a un componente "v-main". Entonces vamos a agregar este componente "v-main" y este componente "v-main" será el que finalmente va a contener al "RouterView". De esta manera se agrega el espacio que buscábamos. En el ejemplo de Vuetify se estaba agregando esta clase Nosotros no queremos modificar el fondo, entonces lo dejaremos así. Esta es la estructura recomendada, según el ejemplo de Vuetify, tenemos "v.app". Este "v.app" contiene un app bar y contiene un main con la sección principal de la página y en su interior vamos a mostrar el componente que corresponda a nuestra ruta. Sin embargo, estos botones no funcionan. Lo que está funcionando son estos de aquí. Entonces veamos como corregir esto en la lección siguiente.

Crea una cuenta y continúa aprendiendo 🚀

Vuetify: App Bar & App Main