Creación de NavBar y Footer con BootstrapVue y FontAwesome

Curso Avanzado de Vue.js 2

Contenido del curso

Bienvenida al curso

1
Vue consumiendo APIs oficiales de Blizzard
13:27 min

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de los componentes y layouts de nuestro proyecto

Agregando funcionalidades avanzadas a nuestro proyecto

Tomar examen

En este bloque vamos a agregarle un poco más de contenido a nuestro layout principal. Vamos a crear el NavBar y el Footer, que será genérico a toda la apliación.

Bootstrap nos proporciona un componente de Navbar que soporta múltiples opciones. Empezamos creando la carpeta /HeaderBar dentro de nuestro directorio de componentes /components, y dentro de esta creamos nuestro archivo principal: Index.vue.
Deberías tener el archivo creado en esta ruta: /components/HeaderBar/Index.vue, con este contenido:

<template>
  <div class="header-bar">
    <div class="navigation-bar">
      <b-navbar toggleable="lg" type="dark" variant="dark">
        <b-navbar-brand :to="{ name: 'Home' }">
          <img src="@/assets/img/diablo-iii.svg" alt="D3" width="30">
          <span class="font-diablo ml-2">D3PF</span>
        </b-navbar-brand>
      </b-navbar>
    </div>

  </div>
</template>

<script>

export default {
  name: 'HeaderBar'
}
</script>

En el proyecto original hay más componentes que no vamos a tocar en este curso, para que no se haga muy largo. Recuerda que puedes revisar en cualquier momento el código fuente completo del proyecto en https://github.com/baumannzone/diablo3-vue-platzi

Vamos a crear el componente Footer del proyecto en /components/Footer/Index.vue. Para el Footer, puedes copiar esto:

<template>
  <footer class="footer-bar mt-5">
    <PoweredByFoot :icons="icons"/>

    <hr class="my-5">

    <div class="row">
      <div class="col-sm-6 mb-sm-0 mb-5">
        <FootLinks/>
      </div>
      <div class="col-sm-6">
        <MadeByFoot/>
      </div>
    </div>

  </footer>
</template>

<script>
import MadeByFoot from './MadeByFoot'
import PoweredByFoot from './PoweredByFoot'
import FootLinks from './FootLinks'

export default {
  name: 'FooterBar',
  components: { FootLinks, PoweredByFoot, MadeByFoot },
  data () {
    return {
      icons: [
        {
          classes: [ 'fab', 'vuejs' ],
          color: '#4fc08d',
          href: 'https://vue.js.org/'
        },
        {
          classes: [ 'fab', 'bootstrap' ],
          color: '#7952b3',
          href: 'https://bootstrap-vue.js.org/'
        },
        {
          classes: [ 'fab', 'battle-net' ],
          href: 'https://develop.battle.net/documentation/diablo-3/community-apis'
        },
        {
          classes: [ 'fab', 'github' ],
          color: '#e4e4e4',
          href: 'https://github.com/baumannzone'
        },
        {
          classes: [ 'fab', 'font-awesome' ],
          color: '#0e95ff',
          href: 'https://fontawesome.com/'
        }
      ]
    }
  }
}
</script>

Dentro de este componente hay 3 componentes más. Vamos a crearlos:

/Footer/FootLinks.vue

<template>
  <div>
    <b-nav small align="start">
      <b-nav-item :to="{name: 'Home'}">Home</b-nav-item>
      <b-nav-item :to="{name: 'About'}">About</b-nav-item>
      <b-nav-item href="https://github.com/baumannzone/diablo3-vue-platzi" target="_blank">Github</b-nav-item>
    </b-nav>
  </div>
</template>

<script>
export default {
  name: 'FootLinks'
}
</script>

/Footer/MadeByFoot.vue

<template>
  <p class="text-muted m-0 pt-1 pl-3 text-left text-sm-right">
    <small>
      Made by
      <a href="https://twitter.com/baumannzone" target="_blank">Jorge Baumann</a>
      for
      <a href="https://platzi.com/" target="_blank">Platzi</a>
    </small>
  </p>
</template>

<script>
export default {
  name: 'MadeByFoot'
}
</script>

/Footer/PoweredByFoot.vue

<template>
  <div class="text-center ">
    <p class="text-muted">Powered by</p>

    <ul class="list-inline">
      <li class="list-inline-item mx-2" v-for="(icon, idx) in icons" :key="idx">
        <a :href="icon.href" target="_blank" :title="icon.href">
          <font-awesome-icon :icon="icon.classes" class="fa-lg" :style="{'color': icon.color}"/>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PoweredByFoot',
  props: {
    icons: {
      required: true,
      type: Array
    }
  }
}
</script>

Hemos creado el footer de nuestra app con algunos links de utilidad, íconos de Fontawesome, etc.

Para poder ver la barra de navegación y el footer en nuestra app, tenemos que dar de alta en el layout principal dichos componentes. Para ello, nos vamos a /layouts/MainLayout.vue y agregamos los componentes de Footer y NavBar que acabamos de crear:

<template>
  <div class="container">
    <HeaderBar/>

    <router-view/>

    <FooterBar/>
  </div>
</template>

<script>
import HeaderBar from '@/components/HeaderBar/Index'
import FooterBar from '@/components/FooterBar/Index'

export default {
  name: 'MainLayout',
  components: {
    HeaderBar,
    FooterBar
  }
}
</script>

Si te fijas, en la consola hay un error. Abrimos el navegador y en la terminal también hay un error:

El error es el siguiente:

> 🚫 Unknown custom element: <font-awesome-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Lo que quiere decir es que hay un componente, en concreto este <font-awesome-icon>, que estamos usando, pero que Vue no lo entiende, o no lo hemos dado de alta. Tal vez lo hayas visto, pero si no, en el footer que acabamos de crear estamos usando dicho componente para mostrar los íconos de los links.
Necesitamos hacer 2 cosas, primero instalar FontAwesome (con npm) y lo segundo dar de alta dicho componente. Las instrucciones para instalarlo las tienes en este enlace: https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs. Vamos a seguir la documentación para instalar este paquete.

Para instalar, escribe lo siguiente desde tu terminal:

npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome @fortawesome/free-brands-svg-icons

Estamos instalando varios paquetes a la vez y le estamos indicando que queremos que nos los guarde en nuestro package.json.
Una vez instalados vamos a nuestro archivo principal main.js y le agregamos el siguiente contenido:

import { library } from '@fortawesome/fontawesome-svg-core'
// Iconos de tipo "Solid"
import { faSkull, faCrown, faDungeon, faHatWizard, faHammer, faGem } from '@fortawesome/free-solid-svg-icons'
// Iconos de tipo "Brand" (marcas o logos de empresas)
import { faVuejs, faBootstrap, faFontAwesome, faGithub, faBattleNet } from '@fortawesome/free-brands-svg-icons'
// El componente que vamos a utilizar
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// Le añadimos los iconos que acabamos de importar (todos, los de tipo solid y de tipo brand)
library.add(
  faSkull,
  faCrown,
  faDungeon,
  faHatWizard,
  faHammer,
  faGem,
  faVuejs,
  faBootstrap,
  faFontAwesome,
  faGithub,
  faBattleNet
)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Nuestro fichero main.js completo quedaría así:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

// Font Awesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSkull, faCrown, faDungeon, faHatWizard, faHammer, faGem } from '@fortawesome/free-solid-svg-icons'
import { faVuejs, faBootstrap, faFontAwesome, faGithub, faBattleNet } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import App from './App.vue'
import router from './router'
import store from './store'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// CSS global
import './assets/css/main.styl'

// Le añadimos los iconos que acabamos de importar (todos, los de tipo solid y de tipo brand)
library.add(
  faSkull,
  faCrown,
  faDungeon,
  faHatWizard,
  faHammer,
  faGem,
  faVuejs,
  faBootstrap,
  faFontAwesome,
  faGithub,
  faBattleNet
)

Vue.use(BootstrapVue)
Vue.config.productionTip = false
Vue.component('font-awesome-icon', FontAwesomeIcon)

new Vue({
  router,
  store,
  methods: {
    // Nuestra función
    init () {
      console.log('Hola 🌝')
      store.dispatch('oauth/getToken')
    }
  },
  // Hook created
  created () {
    this.init()
  },
  render: h => h(App)
}).$mount('#app')

Ahora sí, Vue ya sabe como interpretar el componente que antes le parecía desconocido. Si abres la web de la aplicación, deberías ver algo como esto:

Por ahora tenemos un token (OAuth) necesario para las llamadas a las APIs de Blizzard, un componente Loading, dos tipos de layouts diferentes (uno que carga el componente Loading y otro donde se inyectan las vistas de nuestras rutas, que a su vez tiene un Header y un Footer bien estructurado en componentes). Además hemos visto como instalar varias librerías, entre ellas FontAwesome, y hemos visto cómo darla de alta en nuestra app Vue.

¡Ya podemos continuar por donde lo habíamos dejado antes! Nos vemos en la siguiente lectura.

Creación de NavBar y Footer con BootstrapVue y FontAwesome