Al utilizar javascript en tus proyectos de Drupal, es posible que te muestre, dentro de tu código, un mensaje de alerta con este contenido:
`let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz)
Vue.js tiene varias distribuciones, al igual que Drupal, en las que se incluyen aquellas funcionalidades específicas, o más utilizadas, para facilitar la configuración de cualquier proyecto. Una de estas distribuciones es Nuxt.js, por esta razón, en lugar de realizar nuestro proyecto Drupal Headless con Vue.js, lo haremos con Nuxt.js, de esta manera ahorraremos tiempo de desarrollo y podremos concentrar nuestra atención en el proceso de conexión entre Drupal y Nuxt.js.
Al igual que hicimos con Contenta CMS, utilizaremos Lando para nuestra aplicación con Nuxt.js, pero en esta ocasión, crearemos nuestro propio archivo de configuración .lando.yml, para tener mayor control sobre el resultado final.
Así que nos colocaremos en el lugar donde alojaremos nuestra aplicación, y a continuación crearemos la carpeta. Una vez creada, añadiremos el archivo .lando.yml y copiaremos dentro de éste el siguiente código:
name: nuxtapp
proxy:
appserver:
- nuxtapp.lndo.site
services:
appserver:
type: node:14
command: "yarn dev --hostname 0.0.0.0 --port 80"
install_dependencies_as_me:
- yarn install
tooling:
yarn:
service: appserver
npm:
service: appserver
node:
service: appserver
nuxt:
cmd: /app/node_modules/.bin/nuxt
service: appserver
Una vez guardados los cambios, podremos arrancar Lando y, de esta manera, tendremos acceso a los contenedores de Node, para ejecutar yarn, node y nuxt. Así que, al igual que ejecutamos Composer para descargar las dependencias de Drupal, en este caso utilizaremos el comando yarn, para crear nuestra aplicación y descargar todas sus dependencias:
lando start
Antes de pasar a la siguiente instalación, ejecutaremos el comando de lando que nos permite confirmar que todo funcione correctamente, una vez termine su ejecución, podremos continuar con la descarga de nuestra app nuxtj:
lando rebuild
lando yarn create nuxt-app vaciame
La idea es contestar a todas las preguntas de configuración y, cuando hayamos terminado la descarga, mover todos los archivos descargados, a la carpeta raíz y continuar desde allí, borrando la carpeta vaciame.
Cuando se hayan descargado todos los archivos para nuestra aplicación Nuxt.js, dentro de nuestra carpeta vaciame, moveremos todo su contenido a la carpeta principal y la borraremos, a continuación ejecutaremos el comando de lando para restaurar nuestra aplicación.
Antes de realizar el movimiento de archivos, podrás comprobar que en ambas carpetas, principal y vaciame exite una carmeta node_modules, por lo que deberás eliminar primero, la de tu carpeta principal y a continuación, sacar los archivos de vaciame y borrarla.
lando stop
mv vaciame/* .
mv vaciame/.* .
rm -rf vaciame
Ahora sí, podremos ejecutar el comando de restauración de lando acceder a nuestra aplicación de Nuxt.js.
lando restart
Felicidades!!!, ya ahora ya sabes cómo crear una aplicación con Nuxt.js y Lando en tu entorno local. En el siguiente artículo realizaremos las modificaciones necesarias para conectar, nuestro Backend de Drupal Contenta CMS con nuestra aplicación en Nuxt.js.
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.
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>
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>
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:
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.
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.
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
Es inevitable sentirnos satisfechos de lo mucho que hemos aprendido en tan poco tiempo, ya hemos logrado instalar y configurar los primeros pasos de un proyecto utilizando en framework Nuxtjs, paralelamente, vamos aplicando estilos de Bootstrap, para lograr una web responsiva, y lo más importante, que podremos reutilizar en cualquier otro desarrollo en un futuro próximo.
Hoy vamos a continuar con la importación de datos, desde un archivo local, en este caso, para que podamos entender todo el proceso, antes de pasar a las siguientes etapas, cuyo objetivo final, será el uso de API, para conectarnos con alguna web externa y obtengamos los mismos resultados.
Antes de continuar, sería muy recomendable que, basándote en los ejemplos explicados, intentaras obtener las imágenes e informaciones de los productos, y mostralas dentro de los componentes correspondientes, que será nuestro propósito fundamental, en este ejercicio. De esta forma, podrás confirmar tus conocimientos y experiencia acumulada y reforzarás aquellos puntos débiles que descubras durante el proceso.
Lo primero que tendríamos que hacer, es descargarnos o buscar las imágenes que se mostrarán una vez creado el componente de los productos, al igual que hicimos al principio del curso, las guardaremos dentro de la carpeta assets, yo he creado una carpeta "/imagenes/productos" y, partiendo de los nombres que ya tenemos en nuestro archivo, nombraremos las imágenes, para que puedan mostrarse dinámicamente una vez pasemos los datos al componente.
Paso 2 - Creación de componente fichaProducto
Ahora que ya hemos añadido las imágenes que vamos a mostrar en cada una de las fichas de los productos, el próximo paso será crear un nuevo componente, con el que podremos importar y mostrar el segundo objeto de nuestro arreglo, donde están guardadas las informaciones de todos los productos detacados, según cada bloque.
En este caso, primero crearemos el componente al que llamaremos fichaProducto.vue, crearemos la estructura con el código fijo, para comprobar si todo se muestra correctamente y a continuación, sustituremos los valores por los equivalentes.
Nos colocaremos en la carpeta compenents y añadiremos el nuevo componente fichaProducto.vue, y dentro copiaremos el siguiente código:
<template>
<b-card title="Title" img-src="@/assets/imagenes/productos/1.jpg" img-alt="Image" img-top>
<b-card-text>
This card has supporting text below as a natural lead-in to additional content.
</b-card-text>
<template #footer>
<small class="text-muted">Last updated 3 mins ago</small>
</template>
</b-card>
</template>
<script>
export default {
name: "fichaProducto"
}
</script>
<style scoped>
</style>
Explicación
En este código, estamos crando el modelo de la tarjeta que mostraremos con los productos, utilizando clases cards de Bootstrap Vue, por lo que tendremos realizar cambios en el contenedor, para completar, tanto la llamada al nuevo componente, como la estructura que envolverá las tarjetas con las informaciones de los productos, sustituyendo el apartado que teníamos definido en el anterior capítulo. El código en el contenedor losMasVendidos, quedará de la siguiente manera:
<template>
<section class="p-5 bg-white">
<div class="container-lg">
<h2>{{ SeccionProductos.titulo }}</h2>
<p>{{ SeccionProductos.resumen }}</p>
<div class="row g-4 text-center">
<b-card-group>
<fichaProducto/>
</b-card-group>
</div>
</div>
</section>
</template>
<script>
export default {
name: "losMasVendidos",
props: ['SeccionProductos']
}
</script>
<style scoped>
</style>
Y el resultado obtenido, debería ser parecido a la siguiente imagen, donde estamos mostrando SÓLO EL MODELO, de la tarjeta con informaciones fijas de un producto, tomando una de las imágenes que previamente hemos guardado dentro de la carpeta "assets/imagenes/productos":
Paso 3 - Actualización código, importación datos dinámicos en fichaProducto
En el siguiente paso, vamos a sustituir en el componente fichaProducto.vue, los valores por las variables equivalentes para obtener los datos desde el archivo productos.js, queando de la siguiente forma:
<template>
<b-card title="Title" :img-src="require(`@/assets/imagenes/productos/${ producto.imagen || '1.jpg' }`)" img-alt="Image" img-top>
<b-card-text>
{{ producto.titulo }}
</b-card-text>
<template #footer>
<small class="text-muted">{{ producto.intro }}</small>
</template>
</b-card>
</template>
<script>
export default {
name: "fichaProducto",
props: ['producto']
}
</script>
<style scoped>
</style>
Explicación
Esta vez hemos sustituido los valores que habíamos escrito por las variables equivalentes en cada uno de los apartados:
:img-src="require(`@/assets/imagenes/productos/${ producto.imagen || '1.jpg' }`)"
al añadir los dos puntos, al igual que en casos anteriores, estamos indicando el paso de parámetros dinámicamente, y dentro hemos puesto el require con la dirección a la carpeta de imágenes concatenándola con la propiedad "producto", que estamos recibiendo en " props: ['producto'] " y así accedemos a las imágenes de cada elemento. A continuación está la condición en caso de que el producto no tenga imagenes, para que muestre la imagen por defecto.
{{ producto.titulo }} y {{ producto.intro }}
Con estas llamadas, mostrarmos la información correspondiente, tal y como las tenemos en nuestro array de elementos dentro del archivo producto.js.
Paso 4 - Actualización de código e importación de datos componente
Por último, pasaremos los datos dentro del componente <fichaProducto /> que hemos llamado en el ListadoProductos, quedamos el componente con la siguiente estructura:
<template>
<section class="p-5 bg-white">
<div class="container-lg">
<h2>{{ SeccionProductos.titulo }}</h2>
<p>{{ SeccionProductos.resumen }}</p>
<div class="row g-4 text-center">
<b-card-group>
<fichaProducto
v-for="producto in SeccionProductos.fichas_productos"
:key="producto.id"
:producto="producto"
/>
</b-card-group>
</div>
</div>
</section>
</template>
<script>
export default {
name: "losMasVendidos",
props: ['SeccionProductos']
}
</script>
<style scoped>
</style>
Si visitamos nuevamente nuestra página, ahora tendríamos que ver el listado de productos destacados con sus respectivas imágenes, parecido al siguiente:
Repositorio: https://github.com/drupaladicto/nuxtjs
Seguimos avanzando en nuestro curso intensivo de Nuxtjs y, ahora que hemos aprendido, cómo descargar e instalar Nuxtjs y cómo crear y trabajar con componentes, es el momento perfecto para comenzar a practicar el uso de datos, para mostrarlos dinámicamente dentro de un componente, aportando mayor flexibilidad y versatilidad a nuestro proyecto.
Cómo dijimos en los primeros capítulos, la mayor ventaja que nos ofrecen los componentes, es la posibilidad de reutilizarlos, dentro de cualquier lugar del proyecto, minimizando así el tiempo necesario para realizar correcciones de código, aplicación de estilos o cualquier otra actividad relacionada con ellos.
En la siguiente imagen, podremos ver dos listados diferentes de productos, pero a la vez, muy parecidos entre ellos. En realidad, ambos comparten la misma estructura, un título, una pequeña descripción y a continuación varias imágenes de productos con sus respectivas informaciones. Por lo tanto, si aplicamos el uso de componentes, en seguida nos daremos cuenta que podremos obtener muy fácilmente el resultado esperado.
Hagamos la prueba, dentro de la carpeta components, crearemos un nuevo archivo llamado losMasVendidos.vue y dentro pegaremos el siguiente código para realizar las primeras comprobaciones, se trata de la estructura principal, la que tendrá el título, el subtítulo y el espacio donde, al final, mostraremos los productos:
<template>
<section class="p-5 bg-white">
<div class="container-lg">
<h2>Los más vendidos</h2>
<p>Estas son las últimas tendencias de nuestros clientes</p>
<div class="row g-4 text-center">
<div class="col-md-6 col-lg-3">
Producto
</div>
<div class="col-md-6 col-lg-3">
Producto
</div>
<div class="col-md-6 col-lg-3">
Producto
</div>
</div>
</div>
</section>
</template>
<script>
export default {
name: "losMasVendidos"
}
</script>
<style scoped>
</style>
Una vez guardados los cambios en el componente losMasVendidos.vue, abriremos la página index.vue y añadiremos la etiqueta con el nombre del componente, para comprobar que se muestra según lo esperado.
Si guardamos los cambios y volvemos a la página para comprobar los resultados, deberíamos ver algo parecido a la siguiente imagen, tanto en formato escritorio, como en móvil.
Hasta aquí, ya tenemos la primera parte resuelta, que sería la manera en la que podremos mostrar un listado de productos, dentro de un bloque, con un diseño responsivo y funcional; pero para sacar provecho a la capacidad de reutilización de los componentes, nuestro código, tal como está, no nos permitiría usar el mismo componente para mostrar ambos bloques de productos, o sea, "Los más vendidos" y "Super Oferta". Por eso, en esta ocasión vamos a obtener los datos desde una fuente externa a los componentes.
Más adelante, veremos como hacerlo desde una fuente externa a la web, pero por ahora, para conocer la manera de mostrar datos dinámicamente, utilizaremos un archivo, en formato json, que guardaremos dentro de la carpeta assets.
Llegados a este punto, crearemos un nuevo archivo con el nombre productos.js y pegaremos el siguiente código dentro de él.
export const productos = [
{
id: 1,
titulo: "Los más vendidos",
resumen: "Estas son las últimas tendencias de nuestros clientes",
fichas_productos: [
{
id:5,
titulo: "Producto",
intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
imagen: "5.jpg"
},
{
id:8,
titulo: "Producto",
intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
imagen: "8.jpg"
},
{
id:11,
titulo: "Producto",
intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
imagen: "11.jpg"
}
]
},
{
id: 2,
titulo: "Super ofertas",
resumen: "Compra tres productos y te llevaremos 6 a casa",
fichas_productos: [
{
id:1,
titulo: "Producto",
intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
imagen: "1.jpg"
},
{
id:2,
titulo: "Producto",
intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
imagen: "2.jpg"
},
{
id:3,
titulo: "Producto",
intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
imagen: "3.jpg"
}
]
}
]
El código que hemos copiado, comienza con la creación de la constante productos, la cuál será accesible desde cualquier componente gracias al export.
export const productos = [
Dentro de nuestra constante, tenemos dos objetos principales, que a su vez, tienen dentro un arreglo de tres objetos, equivalentes a la información de los productos con todos sus elementos.
Para acceder a los datos guardados en nuestro archivo productos.js y poder mostrarlos dentro de nuestro componente, tendremos que hacer varias operaciones, que explicaremos paso a paso:
En este caso, todos nuestros componentes se están mostrando dentro de la página index.vue, por lo tanto, si queremos acceder a la información para pasarla luego a los componentes, vamos a importarla dentro de ella usando el siguiente enunciado, dentro de las etiquetas <script></script>
import { productosDestacados } from "@/assets/productos.js"
Con esta línea estamos indicando el nombre de la constante que hemos definido al principio del archivo productos.js y, a continuación, estamos indicando la ubicación del archivo a través del from (el @ está indicando la ubicación al documento root del proyecto)
Si queremos incluir información para mostrarla dentro de una página o de un componente, lo haremos utilizando el apartado que nos viene por defecto en las etiquetas <script></script>
En este caso, hemos añadido un método llamado data, que devolverá un arreglo con clave valor, al que asignamos la constante que hemos importado en el primer paso. De esta forma, podremos acceder a toda la información y pasarla como argumento dentro de los componentes que aparecen dentro de la página index.vue:
export default {
data(){
return {
LosDestacados : productosDestacados
}
}
}
Por último, aprovechando el componente llamado <losMasVendidos />, y por medio de un ciclo for, pasaremos los valores y podremos darle formato personalizado.
<losMasVendidos
v-for="destacados in LosDestacados"
:key="destacados.id"
:SeccionProductos="destacados"
/>
Con este código, estamos accediendo al primer nivel de los objetos dentro de la contante productosDestacados, especificando que la clave que identifica cada objeto será el id, y por último estamos añadiendo una propiedad llamada SeccionProductos, con la que podremos acceder dentro del propio componente losMasVendidos, para mostrar los valores que esperamos, en esta primera fase, el título y descripción de cada bloque de productos destacados.
Si guardamos los cambios y volvemos a nuestra página inicio en el navegador, veremos que no ha cambiado nada, esto se debe a que todavía no hemos sustituido los valores que pusimos manualmente dentro del componente losMasVendidos.vue
Para recibir los datos y poder imprimirlos dentro del componente, usaremos lo que en Vuex se conoce como props, para ello añadiremos el nombre de la o las propiedades que hayamos declarado y de esta manera ya tendremos acceso para mostrarlas como nos haga falta, al igual que hicimos dentro de la página index.vue, utilizaremos la sección definida entre las estiquetas <script></script>
<script>
export default {
name: "losMasVendidos",
props: ['SeccionProductos']
}
</script>
En este último paso, una vez verificados los valores que hemos definido en nuestro archivo productos.js y que desamos mostrar dentro del componente, solo tendremos que añadirlos en el siguiente formato: {{ NombrePropiedad.valor_deseado }}, el componente completo debería quedar de la siguiente manera:
<template>
<section class="p-5 bg-white">
<div class="container-lg">
<h2>{{ SeccionProductos.titulo }}</h2>
<p>{{ SeccionProductos.resumen }}</p>
<div class="row g-4 text-center">
<div class="col-md-6 col-lg-3">
Producto
</div>
<div class="col-md-6 col-lg-3">
Producto
</div>
<div class="col-md-6 col-lg-3">
Producto
</div>
</div>
</div>
</section>
</template>
<script>
export default {
name: "losMasVendidos",
props: ['SeccionProductos']
}
</script>
<style scoped>
</style>
Repositorio: https://github.com/drupaladicto/nuxtjs
Continuando con el contenido de este Curso intensivo de Nuxtjs, ahora nos toca abordar el tema de los Componenentes. Al igual que otros Frameworks, la idea fundamental consiste en crear estructuras de código, cuyo principal objetivo es la posibilidad de reutilizarlo, tantas veces como sea posible, esto mejora considerablemente la manera de ampliar, mejorar o detectar errores relacionados con el proyecto.
Por ejemplo, si tenemos que crear una web, donde nuestra página principal constará de varias partes, como por ejemplo, la barra de navegación, un pequeño listado de productos y el Footer, que podrían repetirse en otras páginas, lo más lógico será convertir esas partes en componentes, que podamos volver a mostrar, según nuestras necesidades, añadiendo la línea de código correspondiente a la llamada.
En el siguiente gráfico, podremos ver un ejemplo más detallado sobre lo que representa la simplificación de una estructura, dividiéndola en diferentes componentes, que podremos reutilizar y aprovechar dentro de toda la web, a medida que vayamos avanzando en el desarrollo:
Nuxtjs, por defecto, dentro de su estructura, viene con una carpeta para guardar los componentes, llamada COMPONENTS. Si abrimos nuestro proyecto utilizando el IDE de nuestra preferencia, podremos ver que dentro de esta carpeta ya existe un componente llamado Logo.vue, que corresponde al logo que se muestra en la página de bienvenida una vez arrancado Nuxtjs, usando el comando npm run dev.
Antes de abrir el archivo, observemos que se considera como buena práctica, nombrar a los componentes usando el CamelCase, mayúsculas iniciales y la extensión .vue, ya que, como dijimos en el primer artículo, Nuxtjs es un Framework basado en Vuex; esto significa que, al igual que como pasa con Drupal 8 y posteriores, basado en Symfony, podremos usar comandos de uno dentro del otro.
Si exploramos el componente Logo.vue, veremos que la estructura básica de cualquier componente será similar, la parte correspondiente a la plantilla o presentación de su contenidos, encerrada entre las etiquetas <template></template> y en la parte inferior, todo lo relacionado con los estilos entre las etiquetas <style></style>, más adelante veremos también la zona relacionada con la ejecución de métocos, props, etc, que estará entre las etiquetas <script></script>.
Si abrimos la carpeta llamada PAGES, donde al igual que sucede con los componentes, se guardarán todas las páginas de nuestro proyecto, veremos index.vue, que es la página principal de nuestra instalación de Nuxt, donde vemos el logo con el nombre de nuestro proyecto al acceder a la url por defecto http://localhost:3000/.
Si exploramos esta página, veremos que dentro la llama a nuestro componente Logo.vue. Para ello simplemente tendremos que añadir la etiqueta html con el nombre del componente, en este caso <Logo />. Esto es gracias a que dentro del archivo de configuración principal de Nuxtjs, nuxt.config.js, tenemos configurado la importación automática de los componentes.
Otra novedad con relación al componente, es la presencia del enunciado export default { } , que explicaremos más adelante, dentro la zona de <script></script> en la parte inferior de la página.
Vamos a comprobar un ejemplo sencillo donde utilizaremos código Vuex, en la página index.vue, añadiremos un bucle for de Vuex, para repetir el componente varias veces dentro de la página. Para ello simplemente escribirmeos lo siguiente:
<Logo v-for="logo in 5" :key="logo" />
Una vez guardados los cambios, si volvemos a nuestra página principal en el navegador, el resultado será la presentación del componente, Logo.vue, cinco veces en la página.
Para nuestro ejemplo, vamos a crear una página formada por varios componentes, el primero de ellos será el área que compone la cabecera de la página. Ésta estará formada por un par de textos, un botón que al final llamará a un calendario, en la parte izquierda y una imagen circular en la parte derecha.
Como hemos descargado Bootstrap-vue para realizar cambios en el diseño de nuestro proyecto, podremos implementar fácilmente los estilos suficientes para conseguir el aspecto esperado.
Si quieres conocer más acerca de las opciones disponibles en Bootstrap-vue, visita su Página Oficial y explorar todas sus posibilidades.
Dependiendo del IDE que estés utilizando para trabajar en tu proyecto, existen diversas opciones y plugins que nos permiten crear fácilmente la estructura principal de un componente u otros elementos dentro de nuestro proyecto Nuxtjs. En mi caso, con PHP Storm, sólo tendré que activar el plugin y una vez colocado dentro de la carpeta components, haré clic derecho para crear un NUEVO COMPONENTE, al que le pondré el nombre de Cabecera.vue.
Una vez generado el archivo, sólo tendrás que sustituir las partes que cambiarán, para que se vea tal y como esperamos. Si lo prefieres, podrás copiar y pegar el siguiente código dentro de tu archivo Cabecera.vue, ubicado en tu carpeta components y a continuación, sustituiremos el componente Logo.vue dentro de la página index.vue.
<template>
<div>
<section class="bg-white text-dark p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
<div class="container">
<div class="d-sm-flex align-items-center justify-content-between">
<div class="p-2">
<h1 id="titular-hero">A TU PUERTA</h1>
<p class="lead">Sollicitudin litora modi aenean blandit natoque mollis lacus vehicula eligendi volutpat sodales auctor</p>
<a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#formulario">Empieza Ahora</a>
</div>
<div id="img-hero" v-responsive="{ small: el => el.width <= 500 }">
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: "Cabecera",
}
</script>
<style scoped>
@media (max-width: 760px) {
#img-hero {
height: 300px!important;
}
}
#titular-hero {
font-family: 'Erica One', cursive;
font-size: 4rem;
}
#img-hero {
border: 2px solid;
border-radius: 800px;
background-image: url("~/assets/imagenes/frutas.jpg");
width: 100%;
height: 450px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
Felicidades, si todo ha ido correctamente, ya tienes tu primer componente, con diseño responsivo en tu proyecto Nuxtjs.
En este Curso Intensivo de Nuxtjs, no profundizaremos sobre la teoría, porque para ello tienes disponible la Página Oficial de Nuxtjs, mi propósito fundamental es explicarte, de la mejor manera posible, todo lo que necesitas para comenzar a explorar el desarrollo de aplicaciones web, utilizando este magnífico Framework, fruto de una evolución de Vuex, y que ofrece una manera mucho más simple, en mi opinión, de aplicar múltiples mejoras en cuanto al diseño y funcionalidad de las webs.
Sin más que añadir por el momento, vamos a comenzar ya con la primera parte del curso:
Lo primero que vamos a necesitar, es un entorno de desarrollo estable, en el que podamos ejecutar todo nuestro código sin complicarnos la vida; en mi caso, como trabajado con Windows 10, he optado por utilizar el Subsitema de Linux con WSL2 en mi ordenador, si no lo has utilizado, aquí te explico cómo hacerlo.
El siguiente requisito para comenzar a trabajar con Nuxtjs, una vez configurado nuestro entorno, será descarga e Instalar NodeJS, si ya lo tenías instalado, te recomiendo actualizar a la versión más reciente ya que se hicieron varias correcciones sobre errores de compatibilidad con Nuxtjs.
Antes de comenzar con la instalación de Nuxtjs, te recomiendo que compruebes las versiones de Nodejs y Npm que tienes instaladas, para ello puedes usar el comando:
node -v
npm -v
Ahora que ya tenemos todo a punto, listos para comenzar con nuestro proyecto, nos colocaremos en la carpeta destinada para ello, y crearemos una nueva carpeta a la que daremos todos los permisos para evitar fallos durante el proceso de instalación.
Una vez realizados estos pasos, podremos comenzar con la descarga e instalación de la estructura principal de nuestro proyecto, yo he creado una carpeta llamada proyectoNuxt, y dentro de esta tendré otra carpeta a la que llamaré cliente, que será donde alojaré todos los archivos de mi instalación con Nuxtjs, de esta forma, una vez realizada mi instalación, podré trabajar conectándome, por ejemplo a otros proyectos mediante API, manteniendo una estructura organizada.
sudo mkdir proyectoNuxt
sudo chmod -R 777 proyectoNuxt
cd proyectoNuxt/
Si vamos a la Página Oficial de Nuxt, comprobaremos que para instalarlo podremos utilizar npm o yarm, en mi caso optaré por la primera opción pero puedes hacerlo con la que prefieras.
Estando dentro de la carpeta donde alojaremos la instalación, ejecutaremos el siguiente comando, que crerá la carpeta cliente y dentro alojará todos los archivos de nuestra instalación de Nuxtjs:
npx create-nuxt-app cliente
De inmediato, comenzará la descarga de todos los archivos necesarios para que comencemos a trabajar con Nuxtjs. Y una vez descargado se nos realizarán varias preguntas sobre el proyecto que vamos a comenzar, para terminar con las configuraciones correspondientes:
Tendremos la oportunidad de seleccionar varias opciones, previas a nuestra instalación, como el uso de algún Framework de testeo o de Frontend, si usaremos control de versiones, etc.
Una vez hayamos seleccionado las opciones que consideramos importantes para nuestro proyecto, entonces, continuará la descargar y configuración final del Nuxtjs y se mostrará en pantalla un conjunto de informaciones, dentro de las que están los comandos fundamentales para arrancar nuestro proyecto y comenzar con la diversión.
En nuestro caso, nos moveremos a la nueva carpeta cliente y una vez allí, ejecutaremos el comando
npm run dev
Si todo ha ido bien, entonces veremos la url "http://localhost:3000/", para acceder a nuestro proyecto, si la copiamos en el navegador deberíamos ver la página de bienvenida de Nuxtjs.
Y si abrimos, utilizando el IDE de nuestra preferencia, los archivos donde tenemos alojado nuestro proyecto, podremos comprobar la estructura de Nuxtjs, que explicaremos en detalle a medida que avancemos en el desarrollo del curso.
Nuxt.js es un framework basado en Vuex, cuyo propósito es ofrecer una alternativa más compacta, para la realización de proyectos que ofrezcan un aspecto atractivo y práctico, con poco tiempo de carga de la información y la capacidad para interactuar con el backend a través del mismo navegador.
Si quieres aprender más sobre este framework,visita su página oficial
