headless

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2)

Video de Youtube
URL de Video remoto
Texto

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

      Ya que hemos aprendido cómo configurar Contenta CMS de Drupal, para que pueda escuchar nuestra API de Nuxt.js, es el momento de hacer lo mismo desde el otro lado.

   Paso 2 - Configuración de Nuxt.js

     Para obtener datos de la aplicación nuxtapp, usaremos la biblioteca de javascript axios y, específicamente, usaremos la biblioteca axios creada para Nuxt: @nuxt/axios. Si eres desarrollador de PHP, puedes pensar en axios como el Guzzle del mundo de JavaScript. En la Parte 1 de este artículo, cuando instalamos la aplicación mynuxt, extrajimos la biblioteca axios.

   Configuración Variables de entorno ( .env)

  Si queremos conectar nuxtapp con el backend de contenta-drupal, primero tendremos que informarle acerca de algunas variables de entorno, así sabrá hacia dónde podrá realizar las peticiones de datos que quiere obtener.

  Dentro de nuestra aplicación nuxtapp, crearemos un archivo con el nombre .env y dentro pegaremos el siguiente código:

APP_ENV=lando
API_URL=http://contenta-drupal.lndo.site/
CONSUMER_ID={{ Copiaremos aquí el ID Consumer de Drupal en //admin/con

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Después de agregar este archivo, deberá reconstruir la aplicación nuxtapp,  para cargar las variables de entorno en los contenedores de la aplicación; para ello, colocados en la carpeta de nuestrra aplicación de Nuxt.js, ejecutaremos el siguiente comando:

lando rebuild

Configuración de axios ( nuxt.config.js )

   A pesar de que hemos seleccionado la opción Axios, en el momento de realizar la descarga de las dependencias para nuxtapp, si abrimos el archivo de configuración, en el apartado de móldulos, sólo vemos bootstrap-vue/nuxt, al igual que si exploramos la carpeta node_modules, por lo tanto tendremos que descargar axios y luego añadirlo en el listado de módulos dentro del archivo nuxt.config.js.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Para ello, nos aseguraremos de estar en la carpeta nuxtapp y ejecutaremos el siguiente comando para que se descarguen los archivos de axios:

lando yarn add @nuxtjs/axios

 

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Una vez descargado, abriremos el archivo de configuración de Nuxt.js llamado nuxt.config.js y en el apartado de módulos, sutituiremos el código actual por el siguiente:


// Modules: https://go.nuxtjs.dev/config-modules
modules: [
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  // https://go.nuxtjs.dev/bootstrap
  'bootstrap-vue/nuxt',
],
/*
  ** Axios module configuration
  */
axios: {
  // See https://github.com/nuxt-community/axios-module#options
  debug: process.env.APP_ENV !== "production"
},

   Para ver todas las opciones disponibles puedes leer la URL en el comentario. Para nuestros propósitos, activaremos la depuración con la advertencia de que nuestro APP_ENV no es producción.

   Configuración de la ( baseURL )

     También en el archivo nuxt.config.js, agregaremos un bloque de código env para configurar la baseURL que indica a axios dónde realizar las llamadas API a Contenta. En la parte inferior del archivo, después de la sección build, agregue las siguientes líneas:


// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
},
env: {
  baseURL: process.env.API_URL,
  CONSUMER_ID: process.env.CONSUMER_ID
}

      Después de realizar cambios en los archivos .env o nuxt.config.js, deberá reconstruir la aplicación Lando lando rebuild -y para permitir que la aplicación nuxtapp cargue esos cambios.


lando rebuild -y

   ¡Eso configura nuestra configuración de axios para que ahora podamos realizar solicitudes desde nuestra aplicación mynuxt de regreso a Contenta nuxtapp!

   Hacer una llamada a la API

     Hagamos una ruta de página llamada posts con un archivo index.vue para volver a consultar a Contenta en busca de una publicación. Agregué un tipo de contenido a Contenta con el nombre de la máquina post y consultaré el endpoint /api/node/post/{uuid} para los datos json.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   En Nuxt hay un directorio pages y todo lo que pongas en él, Nuxt creará automáticamente rutas Vue para nosotros. En este caso, crearemos un directorio posts dentro del directorio de páginas:


sudo mkdir pages/posts

   Entonces deberías terminar con una estructura de directorios como esta:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Observe la estructura del archivo pages/posts/index.vue. Tiene tres secciones: <template><script> y <style>. Como probablemente pueda adivinar, la sección <template> contendrá nuestro html, <script> contendrá nuestro javascript y <style> contendrá nuestro css.

   Ahora añadiremos algunos datos para nuestra plantilla. En la sección <script> de pages/posts/index.vue, agreguemos una función data() para que la plantilla sepa qué datos esperamos. En este caso, nuestro tipo de contenido posts consta de los campos title y body. Abriremos pages/posts/index.vue en nuestro editor de código. En la sección <scripts> y a continuación, agregaremos la función data():


<template>
  <section class="container">
  </section>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: "PLACEHOLDER TITLE",
      body: "PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT"
    }
  }
}
</script>

<style scoped>
</style>

   Ahora nuestra sección<template> tiene acceso a data() y podemos comenzar a construir nuestra plantilla. Agregue a la sección de su plantilla referencias a los marcadores de posición para el title y el body:


<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: 'PLACEHOLDER TITLE',
      body: 'PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT'
    }
  }
}
</script>

<style scoped>
</style>

     En la línea 5, hemos hecho referencia a la clave title de nuestra función data() y hemos representado el contenido del marcador de posición predeterminado en nuestra plantilla. De manera similar, en la línea 12 hemos hecho referencia a la propiedad body, esta vez en una directiva vue v-html. Hemos usado v-html para demostrar el paso de datos que pueden contener html. Podríamos haberlo referenciado de la misma manera que hicimos referencia al título.

     Si ahora visitamos la url de nuestra aplicación: http://nuxtapp.lndo.site/posts deberíamos ver un resultado como el siguiente:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Ahora reemplacemos los datos del marcador de posición con datos reales de contenta-drupal.

   Dentro de la sección <script> agregaremos una nueva función llamada asyncData que devolverá la llamada a nuestra aplicación contenta-drupal con llamadas asyncData y obtendremos los datos e intercambiará los datos del marcador de posición con datos reales.


<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  async asyncData({app}) {
    const data = await app.$axios
      .get('/api/node/post/c6b24529-0d69-4cbb-a966-ab2d6ac5a59b', {})
      .then(res => {
        console.log(res)
        return {
          title: res.data.data.attributes.title,
          body: res.data.data.attributes.body.value
        }
      })
      .catch(err => {
        if (err) {
          return err
        }
      })

    return data
  }
}
</script>

<style scoped>
</style>

   Aquí, en la línea 22, hemos cambiado la función data() por asyncData(). La función asyncData se pasa en el contexto de la aplicación que tiene acceso al objeto $axios a través del trabajo que hicimos en los archivos .env y nuxt.config.js. Usamos este objeto $axios para realizar una solicitud GET de regreso a contenta-drupal y obtener el nodo de publicación con uuid=c6b24529-0d69-4cbb-a966-ab2d6ac5a59b en este ejemplo que uuid está codificado para una publicación específica.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1)

Video de Youtube
URL de Video remoto
Texto

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 hemos aprendido a instalar y configurar, utilizando Lando, una aplicación con Nuxt.js y la distribución optimizada para el sistema headless de Drupal 9, llamada Contenta CMS; es el momento de pasar a la siguiente fase, en la que conectaremos ambas aplicaciones para mostrar los datos servidos desde Drupal, en nuestra aplicación de Nuxt.js.

   Paso 1 - Configuración de Contenta CMS

     Como podrás ver en el capítulo sobre Simple OAuth, para que Drupal pueda escuchar las peticiones desde la API; primero tendremos que configurar tres partes, que nos permitirán realizar esa conexión:

  • Rol para la API:

         La idea es crear un rol, al que le otorgaremos los permisos para relizar las conexiones con la API. Para ello, nos iremos a la url "/admin/people/roles" y allí, añadiremos un nuevo Rol, al que llamaremos vue_role, haciendo clic en el botón de añadir nuevo rol.
         Recuerda que Contenta CMS, es un Drupal "vitaminado", por lo que hay ciertas diferencias si queremos acceder a las secciones a través del menú de administración. En este caso, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Role, para encontrar el botón de Add Rol.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Configurar un usuario de API

     Lo siguiente que haremos es, después de haber creado el rol para nuestra API, tendremos que crear un nuevo usuario, al que le añadiremos el  vue_role que acabamos de crear, para esta operación, podremos ir a la url "/admin/people" o si preferimos hacerlo por el menú, al igual que en caso anterior, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Users, para encontrar el botón de Add user.
     En este caso, una vez hagamos clic en el botón para añadir a nuestro usuario, completaremos los campos necesarios como con cualquier otro usuario, le pondremos el nombre de usuario vue_user, y a continuación marcaremos el rol vue_role.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Configurar un consumidor

   El último eslabón de esta cadena de requermientos será el Consumer, que será quien nos permitirá realizar la conexión entre Contenta CMS y la API de Nuxt.js. Para ello, iremos a la url "/admin/config/services/consumer".
   O también podremos acceder a través del menú de administración, esta vez, tal y como lo haríamos desde un Drupal normal y corriente.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Esta vez, al hacer clic en el botón de Add Consumer, nos aseguraremos de rellenar los campos del formulario con el nombre vue_consumer, para el Consumer, el usuario será vue_user y el rol será vue_role. Asegúrate de aprenderte o dejar apuntado el New Secret, porque será la clave que necesitarás en caso de conectarme con el Consumer, en algunos Headless, como por ejemplo, con Gatsby.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

Fantástico, una vez rellenado el formulario, haz clic en guardar para concluir la configuración de nuestra API Drupal Contenta CMS.
A continuación, vamos a configurar la otra parte de este proyecto, o sea, nuestra aplicación de Nuxt.js.

Nuxtjs | Instalación con Lando

Video de Youtube
URL de Video remoto
Texto

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

     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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

    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

 

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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

 

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Ahora sí, podremos ejecutar el comando de restauración de lando acceder a nuestra aplicación de Nuxt.js.

lando restart

 

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Nuxtjs | Páginas, navegación y enlaces

Video de Youtube
URL de Video remoto
Texto

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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

        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:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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:

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

    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.

Drupal 9 headless Nuxt.js  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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

Nuxt.js | Consumo y presentación de datos ( Parte 2)

Video de Youtube
URL de Video remoto
Texto

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

    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.

   Consumo y presentación de datos dinámicos (Parte 2)

     Paso 1 - Imágenes de productos  

     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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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":

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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:

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

Repositorio: https://github.com/drupaladicto/nuxtjs

Nuxt.js | Consumo y presentación de datos (Parte 1)

Video de Youtube
URL de Video remoto
Texto

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

     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.

   Componentes dinámicos y consumo de datos

        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.

Headless con Nuxt y Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony

    Primer paso Creación y testeo del componente padre    

        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:

Headless con Nuxt y Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony
<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.

Headless con Nuxt y Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Headless con Nuxt y Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony

    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.

     Cómo obtener datos dinámicamente y mostrarlos en un componente

         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"
      }
    ]
  }
]

     Explicación del archivo productos.js

          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.

     Obteniendo los datos desde el archivo productos.js

          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:

     1.- Importar el archivo dentro de nuestro elemento principal

    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)
 

     2.- Preparamos los datos para mostrarlos en los componentes.


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
    }
  }
}

     3.- Pasando los valores dentro del componente:

   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

Headless con Nuxt y Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     4.- Recibiendo los datos dentro del componente

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>

     5.- Imprimiendo los valores recibidos dentro del componente

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>

 

Headless con Nuxt y Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony

Repositorio: https://github.com/drupaladicto/nuxtjs

Nuxt.js | Componentes

Video de Youtube
URL de Video remoto
Texto

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

     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:

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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>.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Cómo mostrar componentes dentro de una página

          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/.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

          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.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Ejecutando Vuex dentro de Nuxtjs

          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.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

    Creando nuestro primer componente

          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.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

          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.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony
<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.

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

REPO https://github.com/drupaladicto/nuxtjs

Nuxt.js | Prerrequisitos e instalación

Video de Youtube
URL de Video remoto
Texto

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

    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:

     Prerrequisitos e instalación de NuxtJS

          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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

          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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

         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

 

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Instalación del proyecto con Nuxt

           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/

 

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

    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:

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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 | www.drupaladicto.com - Consultor especializado en drupal y symfony

REPO https://github.com/drupaladicto/nuxtjs

Nuxtjs | Presentación

Video de Youtube
URL de Video remoto

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

     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