Creación de NavBar y Footer con BootstrapVue y FontAwesome
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.
Hice una variación a esta clase, cree una carpeta nueva en src llamado imports, ahi agregué un archivo llamado FontAwesome y metí la llamada de los iconos. Esto con el fin de mantener un poco más limpio el código.
Te adelantaste, amigo.
En una clase posterior hacemos justo eso que acabas de decir 😜😁👏
Wow wow wow, Oye tranquilo viejo
Hola hay un errora al crear la carpeta FooterBar, en el texto dice Footer (/components/Footer/Index.vue) y es /components/FooterBar/Index.vue
Lo reviso
Tienes razón, debería ser FooterBar en vez de Footer cuando nos referimos a las rutas de los componentes
Bueno, habrá que ver como queda con la nueva version
Para vue 3, estás son las dependencias. Las que especifican aquí me mostraban un error.
npm i --save @fortawesome/vue-fontawesome@prerelease
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
Muy bien, se corrige el error del FooterBar y lo demas se va entendiendo todo perfecto.
Buenas tardes.
He completado el curso y no veo donde se habla del Breadcrumb.
Es una característica que se implemento después de publicar el curso y solo esta disponible en el repositorio?.
Genial el curso muchas gracias Jorge!!!.
Fue mi primera toma de contacto con Vue 💚
Puede ser tal y como dices, y me suena que lo metí después como una feature de mejora. Hay varios compañeros que metieron cambios en el repositorio oficial.
ERRORin./node_modules/@fortawesome/vue-fontawesome/index.es.js21:0-78Module not found:Error:Can't resolve '@fortawesome/fontawesome-svg-core' in '/Users/juancepeda/Documents/Projects/Practice/diablo3/node_modules/@fortawesome/vue-fontawesome'
ERRORin./src/main.js13:0-60Module not found:Error:Can't resolve '@fortawesome/fontawesome-svg-core' in '/Users/juancepeda/Documents/Projects/Practice/diablo3/src'
Me aparece este error.
creo que lo unico que hice diferente fue usar yarn add en lugar de NPM install.
Sí estas utilizando vue 3.x puede usar el siguiente comando con npm:
npm i --save @fortawesome/vue-fontawesome@latest-3
yarn
yarn add @fortawesome/vue-fontawesome@latest-3
Existe una diferencia en instalar paquetes con NPM y Yarn?
si combino ambos existiría algún problema?
Puedes instalarlo con cualquiera de los 2, pero no deberias combinarlos. O usas uno o usas otro, pero sin mezclar.
para los que no le cargan los íconos instalar el font awesome asi:
npm i --save @fortawesome/vue-fontawesome@^2
Genial el curso va super, y esta quedando muy bien, Todo OK por el momento
Ok, esto es algo que no me esperaba xD Justo hoy estaba buscando cómo instalar FontAwesome en vue pero no le había entendido a la documentación y aquí lo acabo de entender jaja, excelente!
Tiene un poco de complicación, pero es sencillo al final ;P
Vamos leeento pero seguro.
A mi me parece el curso mas rapido, en los videos tienes que esperar mucho, aqui puedes leerlos cuanto quieras y luego ir al siguiente.