Iniciar a trabajar con Nuxt.js [lvl 1]

# TL;DR:

Nuxt.js Es un framework open source de Vue.js que nos permite crear aplicaciones dinámicas por medio de una serie de librerías propias de la comunidad de Vue. El framework centraliza la necesidades básicas de una aplicación basada en JS, integrando la tan aclamada funcionalidad: S*erver Side Rendering *(SSR) para mejorar el posicionamiento de un sitio “SEO”, sin perder las ventajas de utilizar Vue.

Aunque es un proyecto con gran cantidad de contribuidores, Nuxt fue desarrollado en sus inicios por Sebastien Chopin (opens new window) y Alexandre Chopin (opens new window). En la actualidad mantienen en constante evolución el proyecto.

Nuxt.JS un framework para Vue.js que permite tener aplicaciones Universales, fácilmente.

Si bien es cierto que Nuxt.js es un framework que permite el SSR, no descuida al público y brinda la opción de “generar” un sitio estático. Para esto no necesitamos más que ejecutar un comando y el proyecto estará listo para producción.

Para poder utilizar Nuxt es recomendable tener conocimiento en Vue.js previos.

Comenzar un proyecto es bastante sencillo, a continuación podrás ver como crear tu primera aplicación con Nuxt.

# Iniciar el proyecto

Antes de iniciar asegúrate de contar con Node.js 8.0 o mayor

Para comenzar, descargaremos el template inicial utilizando la interfaz de línea de comandos (CLI) desarrollada por la comunidad.

Al ejecutar el comando, nos mostrara una serie de opciones para configurar el entorno. Entre ellas podremos configurar:

  • El servidor web (que para efectos de esta práctica lo dejaremos sin seleccionar).
  • Framework para UI con algunos de los proyectos más populares para construir interfaces orientado a componentes. (Te invito visitar Buefy (opens new window) una librería muy buena para crear interfaces con Vue 😉).
  • El tipo de aplicación Universal SSR o una Single Page Application (SPA) (Nosotros iremos por una SSR 🤜🏼)
  • Configuraciones adicionales como librerías para realizar peticiones HTTP como “axios”, gestor de dependencias (npm o yarn) y módulos para revisión de sintaxis y/o estándares de JS. (Selecciona según tu preferencia, en este ejercicio solo utilizaremos “eslint”).

Al finalizar deberás haber conseguido una instalación como la siguiente:

Ejecuta e instala todo lo necesario, al finalizar tendrás tu proyecto listo para comenzar a codear.

Para continuar accederemos a la carpeta de instalación, con nuestro editor de texto preferido. Dentro encontrarnos una serie de carpetas y archivos que nos servirá para configurar nuestra aplicación.

# Estructura de archivos

Dentro de los archivos y carpetas que podremos encontrar, destacaremos las siguientes por ser las que más utilizaremos:

  • Layouts: Los layouts, contiene todos los templates que Nuxt utilizará para mostrar el contenido en todo el documento de la pagina.

Un “layout” contiene un “page”.

  • **Pages: **En esta carpeta definiremos las rutas de nuestra aplicación como archivos y carpetas. Nuxt transformará nuestras carpetas en rutas que nuestro navegador podrá interpretar, sin necesidad de entrar en un archivo de configuración y agregar cada que creemos.
  • Components: Los “components”, son piezas de nuestra aplicación que pueden ser generalizadas y reutilizadas en múltiples partes del sistema. Cada componente es fácilmente accesible desde un página por medio de un import.
  • nuxt.config.js: Es el archivo de configuración principal de Nuxt, en donde podremos definir como trabajará nuestro framework y extender funcionalidades.

Para fines prácticos, no profundizaremos en el funcionamiento del los middlewares, plugins y components.

# Iniciar el desarrollo

Para comenzar. Una vez dentro de la carpeta del proyecto, ejecutaremos el servidor de desarrollo. Este servidor se mantiene a la escucha de ediciones en los archivos del proyecto y reconstruye los módulos necesarios para visualizar los cambios rápidamente en tu navegador.

Para iniciarlo ejecuta:

¿Todo listo? veamos: http://localhost:3000 (opens new window)

Verás la página de inicio.

Ahora podremos iniciar a modificar el contenido y visualizarlo.

Iremos a la carpeta pages, en el archivo “index.vue”. Este es el archivo principal con el que podremos editar la ruta raíz en nuestra URL.

Reemplazando todo el contenido de index.vue por algo más simple y legible.

It’s works 🎉

# Conclusión

La evolución constante de las tecnologías del ecosistema de JS es impresionante, Vue y Nuxt es un ejemplo de cómo la comunidad ha creado herramientas increíbles para impulsar el ecosistema de desarrollo web a nuevas fronteras. Si te encuentras en búsqueda de aprender algo nuevo que permita a ti o a tu equipo de desarrollo crear aplicaciones web dinámicas, te invito a profundizar en esta herramienta.

#happyCoding! 👍🏼

By Elihu A. Cruz (opens new window) on October 10, 2018 (opens new window).

Go back