Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Vuetify: App Bar & App Main
Veamos cómo agregar una barra de navegación, en la parte superior de nuestra aplicación.
Problema con la navegación
A pesar de que ya tenemos tres enlaces para la navegación, estos no se ven adecuadamente porque no tienen estilos. Podemos usar un componente de Vuetify para mejorar el diseño.
Explorando los componentes de Vuetify
Visitamos la documentación de Vuetify y nos dirigimos a la sección de Components. Dentro de esta sección, buscamos el grupo de enlaces llamado Navigation, donde encontramos distintas opciones de navegación.
App Bars en Vuetify
Una opción útil es el app bar, un componente que permite la navegación. Un app bar luce de la siguiente manera y puede contener acciones.
Anatomía de un App Bar
-
v-app-bar-
v-app-bar-nav-icon -
v-app-bar-title - Opcionalmente, acciones adicionales
-
Implementación del App Bar
Para usar un app bar, podemos revisar la sección de Getting Started en Wireframes, donde algunos ejemplos incluyen app bars.
Un ejemplo interesante es el llamado constrained, ya que nos permite ubicar los enlaces a la izquierda o arriba de forma inmediata. Dado que no tenemos muchas opciones, este ejemplo es el más adecuado.
Hacemos clic en el enlace para ver el ejemplo en GitHub, copiamos el código del app bar y lo pegamos en nuestro componente principal.
Integración del App Bar en la Aplicación
Pegamos el app bar en nuestro componente principal, justo arriba de RouterView. Sin embargo, aparece un mensaje de error porque el app bar contiene una directiva v-for, que intenta iterar sobre un arreglo llamado links.
Para corregir esto:
- Eliminamos la directiva
v-for. - Agregamos manualmente los botones:
home,cartyabout. - Los botones aún no tienen funcionalidad, pero sirven para probar la apariencia.
Al actualizar el navegador, la página aparece vacía. Al revisar con F12, encontramos un error: vuetify:layout no se ha encontrado.
Solución del Error de Layout
Para que v-app-bar funcione correctamente, debe estar dentro de v-app. Esto es similar a lo que sucede con los cards, donde algunos componentes deben estar dentro de otros.
Pasos para corregirlo:
- Agregamos la etiqueta
v-app. - Dentro de
v-app, colocamosv-app-bar. - Guardamos y actualizamos: los warnings desaparecen y los botones
home,cartyaboutahora aparecen correctamente.
Sin embargo, el contenido de la página está demasiado abajo. Esto ocurre porque RouterView quedó fuera de v-app.
Ajuste de la Estructura
Para solucionar este problema:
- Movemos
RouterViewdentro dev-app. - Agregamos
v-maindentro dev-app, asegurándonos de quev-maincontengaRouterView.
De esta manera, logramos la distribución correcta del contenido.
Según la documentación de Vuetify, la estructura recomendada es:
<v-app>
<v-app-bar>
<!-- Contenido del app bar -->
</v-app-bar>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
Ahora, los botones aún no funcionan. La funcionalidad de los enlaces será corregida en la siguiente lección.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript