Hola hay un errora al crear la carpeta FooterBar, en el texto dice Footer (/components/Footer/Index.vue) y es /components/FooterBar/Index.vue
Bienvenida al curso
Qué es Vue y bienvenida al curso
VueCli, configuración inicial del proyecto y consumo del API de Blizzard
Crea tu app con el Vue CLI
Blizzard Developer Portal
Comandos del Proyecto
Instalar librerías
Carpeta API
Obtener el token
Creación de los componentes y layouts de nuestro proyecto
Componente Loading
¡Limpiemos el proyecto!
Layouts y Vuex Modules
Assets
NavBar y Footer
Refactorizando
Home Page
Vue Router
Vista Profile
¡Más Componentes!
Listado de Héroes
Progreso (Actos)
Stats y Tiempo Jugado
Cerrando vista Profile
Hero View
Agregando funcionalidades avanzadas a nuestro proyecto
Componentes asíncronos
Objetos del Héroe
Custom Directives
Netlify
About y Error
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.
Aportes 7
Preguntas 3
Hola hay un errora al crear la carpeta FooterBar, en el texto dice Footer (/components/Footer/Index.vue) y es /components/FooterBar/Index.vue
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.
Sale este aviso en la consola del navegador:
[vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.
Muy bien, se corrige el error del FooterBar y lo demas se va entendiendo todo perfecto.
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!
Vamos leeento pero seguro.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.