Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • En esta lección crearemos la barra de navegación de nuestro proyecto VueTalk. Es una pieza importante porque gestionará el acceso a las secciones, así como diferentes botones dependiendo del estado de autentificación del usuario/a.
  • Usaremos el componente NavBar de Bulma, ya que es realmente sencillo de utilizar. Como Bulma no trae ninguna lógica consigo, tenemos que crear la funcionalidad para colapsar/descolapsarla nosotros mismos.
  • Nuestra componente en VueTalk se llamará NavBarComponent.vue. Por supuesto, tenemos que crearlo y añadir el código mínimo para la barra de navegación.
  • Incluimos también el logo de nuestro proyecto, además de algunos estilos CSS y la lógica base. Por supuesto, tenemos que añadir el nuevo componente en App.vue.
<template>
  <div id="app">
    <NavBarComponent />
    <router-view />
  </div>
</template>
  • Para hacer que botón hamburguesa funcione, debemos crear la lógica nosotros. Basta con capturar la barra de navegación y el botón a través de las referencias Vue y conmutar la clase modificadora is-active de Bulma.
...
mounted() {
  this.burger = this.$refs.burger;
  this.navBar = this.$refs.navBar;
},
data() {
  return {
    burger: null,
    navBar: null
  };
},
methods: {
  toggleNavBar() {
    this.burger.classList.toggle("is-active");
    this.navBar.classList.toggle("is-active");
  },
},
...
  • Y añadir llamada a nuestro nuevo método local toggleNavBar.
<a
  @click.prevent="toggleNavBar"
  role="button"
  class="navbar-burger burger"
	...
>
  • Por último y en preparación de la siguiente lección vamos a crear el método doLogout (por ahora vacío) y asociarlo al botón correspondiente.
<a @click="doLogout" class="button is-light">
  Log out
</a>
  • Con la barra de navegación lista y hacer logout, es el momento de crear la vista que permitirá al usuario registrarse y hacer login si ya tiene credenciales.
Código inicial
Aprende Firebase en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?

Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬