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:
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:
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:
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 utilizarimport{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í:
importVuefrom'vue'importBootstrapVuefrom'bootstrap-vue'// Font Awesomeimport{ 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'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'import'bootstrap/dist/css/bootstrap.css'import'bootstrap-vue/dist/bootstrap-vue.css'// CSS globalimport'./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=falseVue.component('font-awesome-icon',FontAwesomeIcon)newVue({ router, store,methods:{// Nuestra funcióninit(){console.log('Hola 🌝') store.dispatch('oauth/getToken')}},// Hook createdcreated(){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.
