Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Ahora que ya hemos avanzado en el montaje y la presentación de algunos datos dinámicos en Nuxt, todavía no nos hemos movido de la página index, que nos viene por defecto en cualquier instalación.
Por esta razón, hoy explicaremos cómo añadir una barra de navegación y el footer en nuestro proyecto, además de la posiblidad de ampliarlo, con la creacíon de páginas que facilitarán a nuestros usuarios, poder moverse por toda nuestra aplicación y acceder, de esta manera, a la información que les interese cuando nos visiten.
Cómo añadir la barra de navegación y el footer para todo el proyecto Nuxtjs
Ya mencionamos en el anterior capítulo, que gracias a que seleccionamos Bootstrap vue, como framework para la parte frontal de nuestro proyecto Nuxt, podremos utilizar sus clases para obtener diseños responsivos mucho más adaptados a dispositivos móviles, también se nos ha añadido el Bootstrap original, padre de Bootstrap vue, y esto podemos comprobarlo en el archivo package.json de nuestra instalación.
En este caso añadiremos, tanto la barra de navegación como el footer para todo el proyecto, utilizando los componentes de Bootstrap. Por lo tanto, lo primero que haremos será crear el nuevo componente al que llamaremos Navegacion.vue y dentor pegaremos el siguiente código:
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<NuxtLink class="navbar-brand" to="#">Mi Web</NuxtLink>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<NuxtLink class="nav-link" to="/">Home <span class="sr-only">(current)</span></NuxtLink>
</li>
<li class="nav-item">
<NuxtLink class="nav-link" to="/productos" >Productos<span class="sr-only">(current)</span></NuxtLink>
</li>
<li class="nav-item">
<NuxtLink class="nav-link" to="/mis-productos">Mis productos<span class="sr-only">(current)</span></NuxtLink>
</li>
</ul>
</div>
</nav>
</div>
</template>
<script>
export default {
name: "Nav.vue"
}
</script>
<style scoped>
</style>
Explicación:
Lo único verdaderamente novedoso en este componente, con respecto a los anteriores, es que hemos añadido los enlaces de la barra de navegación, para acceder a las páginas que todavía no hemos creado. Como podrás observar, en lugar de las etiquetas tradicionales <a href="#">Texto</a>, que solemos ver en páginas credas empleando html, Nuxtjs utiliza sus propias etiquetas para la generación de sus rutas y enlaces.
En lugar de utilzar href="#", emplea to="#", para indicar la ruta de acceso a la página o contenido que llevará el enlace, en el siguiente ejemplo, verás la clase para los enlaces de Bootstrrap "nav-link", dentro de la etiqueta de NuxtLink, además de la especificación a la url que apuntará dicho enlace.
<NuxtLink class="nav-link" to="/mis-productos"></NuxtLink>
Cómo crear páginas en Nuxtjs
Si exploramos los archivos generados con nuestra instalación por defecto de Nuxtjs, podremos confirmar que exite la carpeta pages, que es donde se ubica nuestra página principal index.vue
Para facilitarno la creación de Páginas y rutas, Nuxtjs nos ofrece un método bastante simple y práctico, que consiste en crear el archivo con el nombre que deseamos para nuestra página y lo guardemos dentro de esta carpeta.
Esto es todo lo que vamos a necesitar y Nuxtjs se encargará automáticamente de generar una ruta de acceso correspondiente al nombre que hayamos seleccionado para nuestro archivo.
Hagamos una prueba, tomando como referencia las páginas a las que apuntará nuestro componente Navegacion.vue, vamos a crear dos archivos, correspondientes a cada una de estas páginas, obviamente, la página index.vue ya la tenemos creada y se podrá acceder desde el primer enlace, donde está colocada la barra inclinada o slash to="/", así que nos toca crear la página productos y mis-productos.
Para la página productos, nos colocaremos en la carpeta pages y añadiremos un nuevo componente básico, con el nombre productos.vue, luego pegaremos dentro el siguiente código:
<template>
<div class="container text-center p-5 mt2">
<h1>Esta es la página de productos</h1>
</div>
</template>
<script>
export default {
name: "productos"
}
</script>
<style scoped>
</style>
Una vez hayamos guardado el nuevo archivo, podremos acceder en el navegador escribiendo, a continuación de nuestra url /productos, y deberíamos ver un resultado como la siguiente imagen:
Ahora que ya sabes cómo crear una página básica, te animo a que pongas a prueba tus conocimientos, creando la página que falta en esta primera fase, cuya url será /mis-productos, deberías obtener un resultado como el siguiente:
Cómo añadir componentes globales dentro del proyecto Nuxtjs
Ahora que ya hemos creado el componente con la barra de navegación, sólo nos queda llamarlo desde el lugar adecuado, para que se muestre correctamente y podamos navegar dentro del proyecto.
Para que nuestra barra de navegación, en este caso, esté visible desde cualquiera nuestras páginas, sólo tendremos que añadir la etiqueta correspondiente dentro del arhivo que está dentro de la carpeta .nuxt/layouts/ llamado default.vue.
Añadiendo la barra de navegación
Ya que pondremos nuestra barra de navegación en la parte superior de todas las páginas, añadiremos la etiqueta <Navegacion />, justo encima de la etiqueta llamada <Nuxt />, que es la encargada de imprimir todos los elementos de nuestro proyecto.
Para realizar este cambio, es posible que tengamos que modificar los permisos para escribir. Una vez modificados los permisos, podremos pegar el código, sustituyendo por los nombres de los componentes que hayas decidido utilizar:
<template>
<div>
<Navegacion />
<Nuxt />
</div>
</template>
Si volvemos a nuestro proyecto en el navegador, ahora veremos que la barra de navegación estará presente en todas las páginas para poder acceder a ellas.
Añadiendo el Footer
En el caso del Footer, repetiremos los pasos que hemos hecho para la cabecera, es decir, primero crearemos el componente al que llamaremos Footer.vue, a continuación, pegaremos el siguiente código:
<template>
<div class="footer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<div id="container">
<div id="part1">
<div id="companyinfo"> <a id="sitelink" href="#">Drupaladicto.com</a>
<p id="title">Cool and Perfect Snippet code</p>
<p id="detail">We create awesome code snippets that will help you in creating your own beautiful site. </p>
</div>
<div id="explore">
<p id="txt1">Explore</p> <a class="link" href="#">Home</a> <a class="link" href="#">About</a> <a class="link" href="#">Snippet</a> <a class="link" href="#">Careers</a>
</div>
<div id="visit">
<p id="txt2">Visita</p>
<p class="text">Drupaladicto </p>
<p class="text">78 Bhulabhai Desai Road </p>
<p class="text">Mumbai 400 026 </p>
<p class="text">Phone: (22) 2363-3611 </p>
<p class="text">Fax: (22) 2363-0350 </p>
</div>
<div id="legal">
<p id="txt3">Legal</p> <a class="link1" href="#">Terms and Conditions</a> <a class="link1" href="#">Private Policy</a>
</div>
<div id="subscribe">
<p id="txt4">Subscribe to US</p>
<form> <input id="email" type="email" placeholder="Email"> </form> <a class="waves-effect waves-light btn">Subscribe</a>
<p id="txt5">Connect With US</p> <i class="fab fa-facebook-square social fa-2x"></i> <i class="fab fa-linkedin social fa-2x"></i> <i class="fab fa-twitter-square social fa-2x"></i>
</div>
</div>
<div id="part2">
<p id="txt6"><i class="material-icons tiny"> copyright</i>copyright 2019 BBbootstrap - All right reserved</p>
</div>
</div>
</body>
</div>
</template>
<script>
export default {
name: "Footer"
}
</script>
<style scoped>
#container {
width: 100%;
height: 330px
}
#part1 {
width: 100%;
height: 280px;
background-color: #292929
}
#part2 {
width: 100%;
height: 50px;
background-color: black;
position: relative;
top: -15px
}
#companyinfo {
width: 14%;
height: 280px;
position: relative;
left: 8%;
top: 30px
}
#sitelink {
font-size: 35px;
color: #f44336
}
#sitelink:hover {
color: #e65100
}
#title {
color: gray;
position: relative;
top: 0px;
font-size: 14.1px
}
#detail {
color: #aaa7a7;
font-size: 16px
}
#explore {
width: 14%;
height: 280px;
position: relative;
top: -235px;
left: 29%
}
#txt1,
#txt2,
#txt3,
#txt4,
#txt5 {
color: white;
font-size: 20px
}
.link {
display: flex;
width: 90px;
height: 40px;
color: #aaa7a7;
background-color: transparent;
border-top: 2px solid white;
position: relative;
top: -10px
}
.link:hover,
.link1:hover {
color: #e65100
}
#visit {
width: 14%;
height: 280px;
position: relative;
top: -515px;
left: 42%
}
.text {
color: #aaa7a7;
font-size: 14px;
margin-top: -10px
}
#legal {
width: 14%;
height: 280px;
position: relative;
top: -800px;
left: 59.5%
}
.link1 {
display: flex;
width: 150px;
height: 40px;
color: #aaa7a7;
background-color: transparent;
border-top: 2px solid white;
position: relative;
top: -10px;
margin-top: 7px
}
#subscribe {
position: relative;
top: -1080px;
left: 78%;
width: 14%;
height: 280px
}
#email {
color: white;
position: relative;
top: -20px
}
.btn {
position: relative;
top: -10px
}
#txt5 {
position: relative;
top: 0px
}
.social {
position: relative;
top: -5px;
margin-right: 10px;
color: white;
cursor: pointer
}
.fa-facebook-square:hover {
color: #3B579D
}
.fa-linkedin:hover {
color: #007BB6
}
.fa-twitter-square:hover {
color: #2CAAE1
}
#txt6 {
color: white;
position: relative;
top: 13px;
left: 8%;
width: 80%;
color: #aaa7a7
}
.material-icons {
position: relative;
top: 3px
}
@media only screen and (max-width:1000px) {
#companyinfo {
width: 20%
}
#sitelink {
font-size: 30px
}
#txt5,
#txt4 {
font-size: 17px
}
#txt5,
.social {
position: relative;
top: -5px
}
}
@media only screen and (max-width:850px) {
#companyinfo {
position: relative;
left: 3%
}
#txt6 {
position: relative;
left: 3%
}
#txt1,
#txt2,
#txt3,
#txt4,
#txt5 {
font-size: 15px
}
#explore {
position: relative;
top: -240px;
left: 26%
}
#sitelink {
font-size: 25px
}
#detail {
font-size: 13px
}
.link {
width: 60px
}
#visit {
position: relative;
top: -520px;
left: 37%
}
.text {
font-size: 13px
}
#legal {
position: relative;
top: -800px;
left: 54%
}
#subscribe {
position: relative;
top: -1080px;
left: 76%;
width: 20%
}
#txt5,
.social {
position: relative;
left: -110%;
top: px
}
#email,
.btn {
position: relative;
top: 0px
}
#part1 {
height: 250px
}
}
</style>
Una vez guardado el contenido en el componente <Footer />, podremos abrir el archivo default.vue, que hemos modificado hace un momento y simplemente, añadiremos la llamada al nuevo componente footer.
A continuación te presento una imagen con todos los pasos y el resultado que deberías obtener una vez termiandos los cambios.
En el próxiimo capítulo hablaremos sobre la creación de páginas dinámicas, ya que la idea es que podamos navegar, dentro de la página detalle de cada producto, al hacer clic sobre su imagen.
Para esta segunda parte, tendremos que modificar la página productos.vue, por eso prefiero explicarlo más adelante, para que puedas asimilar lo que hemos explicado en este artículo y realizar los cambios que consideres necesarios en los componentes añadidos.
Fuente: https://nuxtjs.org/docs/2.x/directory-structure/layouts