Nuxt.js es el framework Vue más intuitivo disponible en la actualidad. Combina la potencia de Vue.js con las características de renderizado del lado del servidor para hacerlo más potente. Puedes construir una aplicación completa de renderizado del lado del cliente de Vue.js, una aplicación completa generada estáticamente y una aplicación monolítica.

Nuxt.js resuelve el problema de la estructuración de tu proyecto Vue.js, ya que viene con una arquitectura de desarrollo frontend preparada para la empresa. Las características de Nuxt.js ya están estructuradas utilizando los estándares de la industria para crear aplicaciones empresariales.

Esta guía explorará Nuxt.js, lo que puedes construir con él y cómo funciona desde dentro.


¿Qué es Nuxt.js?

Nuxt.js es un framework de renderizado del lado del servidor construido sobre Vue.js. Abstrae la mayor parte de la compleja configuración que implica la gestión de datos asíncronos, el middleware y el enrutamiento. También ayuda a estructurar las aplicaciones Vue.js utilizando la arquitectura-estándar del sector para crear aplicaciones Vue.js sencillas o empresariales.

Una captura de pantalla que muestra el logotipo oficial de Nuxt.js.
Logotipo oficial de Nuxt.js. (Fuente de la imagen: Medium)

¿Para Qué Sirve Nuxt.js?

Nuxt.js te permite crear muchos tipos de aplicaciones diferentes. A continuación se muestran las tres aplicaciones más populares hechas con Nuxt.js.

Páginas Generadas Estáticamente

Este tipo de sitio web no requiere ninguna fuente de contenido externa: el contenido ya está incrustado en el HTML. Ejemplos de este tipo de sitios web son los sitios web de portfolio, de demostración y de tutoriales.

Aplicaciones de una Sola página (SPA)

Este enfoque de desarrollo del frontend obtiene el contenido dinámico de una API externa y lo muestra en el lado del cliente. La mayoría de los frameworks de JavaScript, como Vue.js, React.js, Angular y Ember.js, son frameworks de aplicaciones de una sola página.

Además, el sistema de enrutamiento de una SPA se consigue con la API HTML 5 History o el hash de localización para el enrutamiento, lo que ofrece a los desarrolladores la posibilidad de modificar la URL de un sitio web sin necesidad de actualizar toda la página.

Aplicaciones Universales

«Aplicación universal» es un término que describe el uso de un enfoque de renderizado del lado del servidor para obtener datos del lado del cliente en el servidor antes de renderizar completamente la página en el navegador del cliente.

El renderizado del lado del servidor (SSR) es un problema conocido en Vue.js porque implica tediosas configuraciones para hacerlo bien.

Nuxt.js resuelve el problema del SSR en Vue.js, lo que es útil para la optimización de los motores de búsqueda (SEO). Nuxt.js puede incluso ampliar las aplicaciones universales para dar cabida a una aplicación monolítica completa, en la que el frontend y el backend comparten una única base de código.

¿Cómo Funciona Nuxt.js?

Nuxt.js funciona de la misma manera que un framework del lado del servidor cuando un usuario visita un sitio web. Si la renderización del lado del servidor está activada, las peticiones se renderizan en el servidor cada vez que el usuario solicita una página, por lo que se necesita un servidor para poder servir la página en cada petición. Además, si se habilita la renderización del lado del cliente, se renderiza el contenido de la página en el navegador utilizando JavaScript.

Estas son las principales acciones y métodos utilizados en Nuxt.js:

  • nuxtServerInit (Acción): Es el primer hook del ciclo de vida que se llama en el lado del servidor si el almacén Vuex está activado. Es una acción Vuex que se llama sólo en el lado del servidor para pre-llenar el almacén y, finalmente, puede utilizarse para enviar otras acciones en el almacén Vuex.
  • validate() (Función): El método validate se llama antes de renderizar los componentes de la página. Es útil para validar los parámetros dinámicos de un componente de página.
  • El método asyncData() se utiliza para obtener datos y renderizarlos en el lado del servidor, mientras que el método fetch() se utiliza para llenar el almacén antes de renderizar la página.

Por ejemplo, cuando un sitio Nuxt.js recibe una visita a la página inicial, llama a la acción nuxtServerInit para actualizar los estados Vuex (si están definidos en el almacén Vuex). En caso contrario, si el nuxtServerInit no está definido, pasa a otro estado.

A continuación, busca los middlewares en este orden. Primero, comprueba en el archivo nuxt.config.js si hay algún middleware global. Si está definido, lo ejecutará antes de buscar middleware en las páginas layout. Por último, ejecutará el middleware de la página individual, incluidas las páginas hijas.

Tras ejecutar todos los middlewares en orden, comprobará si la ruta es dinámica y ejecutará el método validate() creado y validado.

A continuación, llama al método asyncData() de la página para obtener y representar los datos en el lado del servidor antes de llamar al método fetch() para rellenar el almacén Vuex en el lado del cliente.

En este punto, la página debería tener todos los datos y contenidos necesarios para mostrar una página web adecuada. A continuación, el motor Nuxt.js renderiza la página y la mostrará al visitante, completando el proceso.

Este diagrama de flujo ilustra todos los pasos necesarios para renderizar una sola página:

Una captura de pantalla que muestra los hooks del ciclo de vida de Nuxt.js y el proceso de inicialización.
Una visión general de los ganchos del ciclo de vida de Nuxt.js. (Fuente: Sitio web de Nuxt)

Independientemente de la herramienta que utilices, siempre te sentirás más seguro cuando entiendas cómo funciona la herramienta de forma interna. Con la explicación anterior de cómo funciona Nuxt.js por dentro, te resultará fácil de entender. Exploremos los beneficios de usar Nuxt.js para tu próximo proyecto.

Ventajas de Nuxt.js

A continuación, vamos a hablar de las ventajas del framework Nuxt.js y de por qué se ha hecho tan popular últimamente.

Crea Aplicaciones Universalse Sin Complicaciones

Nuxt.js hace que crear aplicaciones de renderizado del lado del servidor sea muy fácil. Si alguna vez has intentado desarrollar una aplicación de renderizado del lado del servidor con Vue.js, es probable que hayas saltado obstáculos difíciles debido a las innumerables opciones de configuración disponibles tanto para el lado del servidor como para el lado del cliente.

La función SSR ya está integrada en Nuxt.js y es fácil de usar. Permite acceder a las propiedades isServer y isClient de tus componentes para decidir si estás renderizando algo en el lado del cliente o del servidor.

También proporciona el método asyncData dedicado a obtener y renderizar datos en el lado del servidor de tu componente de página.

Renderización Estática de Aplicaciones Vue con Beneficio Universal

Los sitios web generados estáticamente están en auge en la industria web, y con un solo comando nuxt generate, puedes generar una versión estática de tu sitio web, con todo el HTML con las rutas correspondientes.

El comando nuxt generate funciona exactamente igual que el enfoque de la aplicación universal con todas las características de SSR activadas, pero para un sitio web generado de forma estática.

En Nuxt.js, un sitio web generado estáticamente es como construir una potente aplicación universal sin un servidor que potencie la función SSR.

Consigue la División Automática del Código

Una de las razones por las que Nuxt.js es muy rápido en rendimiento es por la función de división de código, en la que una ruta recibe un único archivo JavaScript con sólo el código necesario para ejecutar esa ruta, reduciendo así el tamaño de tu aplicación.

Esta función de división de código utiliza la configuración de Webpack que viene incorporada al generar una versión estática de tu sitio web.

Recarga en Caliente

La recarga en caliente es una gran característica añadida para resolver el método de cambio-refresco del desarrollo de software, que lleva mucho tiempo.

Está configurada para auto-actualizar el servidor de desarrollo cuando cambias cualquier archivo en el directorio root.

Cuando desarrollas y trabajas en archivos de .vue, utiliza una configuración de Webpack para comprobar los cambios y compila todo por ti. Este enfoque ahorra tiempo a los desarrolladores y fomenta un desarrollo más rápido de las aplicaciones.

Consigue la Compilación de ES6/ES7

Nuxt.js viene preconfigurado con Webpack y Babel para traducir y compilar las últimas versiones de JavaScript, como ES6 y ES7, en un JavaScript que pueda ejecutarse en navegadores antiguos.

Babel está configurado para compilar todos los archivos .vue y el código ES6 dentro de las etiquetas de script en un JavaScript que funcione en todos los navegadores.

Esta función soluciona la batalla de crear manualmente aplicaciones compatibles con los navegadores y establecer la configuración desde el principio.

Cómo Crear una Aplicación Nuxt.js

Esta sección explorará cómo crear una aplicación Nuxt.js. Antes de entrar en materia, vamos a explorar algunos de los conceptos críticos en el desarrollo de una aplicación Nuxt.js.

Crear una Aplicación Nuxt.js

Crear un nuevo proyecto es fácil y directo. Puedes crear un proyecto con diferentes enfoques, como se indica en la documentación oficial, pero el enfoque preferido y más recomendado es el uso de la CLI.

Para crear una nueva aplicación utilizando la CLI, asegúrate de que tienes instalado npx (npx se incluye por defecto cuando instalas yarn o npm 5.2.0).

A continuación, escribe el siguiente comando en la carpeta en la que quieras colocar tu proyecto:

npx create-nuxt-app 
cd 
npm run dev

Asegúrate de sustituir el nombre del proyecto> por el nombre real de tu proyecto.

Comprender la Estructura de Carpetas de Nuxt.js

Cuando estás creando una nueva aplicación utilizando cualquiera de los diferentes enfoques de instalación de la documentación oficial, se te presentan varios archivos y carpetas generados por la CLI. Estos archivos y carpetas son vitales y requieren que algunas de las carpetas permanezcan sin cambios y sin configuración adicional.

Veremos la estructura de carpetas, discutiremos cada archivo y carpeta, y conoceremos su importancia.

Una captura de pantalla de la estructura de carpetas de Nuxt.js que muestra los diferentes archivos generados por Nuxt.js CLI.
Estructura de la carpeta Nuxt.js recién creada.

1. .nuxt

El directorio .nuxt se oculta y se genera cuando inicias tu servidor de desarrollo, y se llama build directory. El directorio contiene los archivos o artefactos generados al ejecutar el comando npm run build.

Puedes modificar los archivos de este directorio sólo con fines de depuración, ya que los archivos se autogenerarán de nuevo cuando ejecutes el comando dev o build.

2. Assets

La carpeta assets contiene todos tus activos no compilados, como imágenes, fuentes, archivos SASS y Stylus. Webpack compilará cualquier archivo que se incluya en este directorio durante el proceso de renderizado.

3. Components

El directorio components es similar al directorio components de Vue.js, donde se almacenan todos tus componentes Vue. Los componentes son los archivos que conforman las diferentes partes de tus páginas y pueden ser reutilizados e importados en tus páginas, diseños y otros componentes también.

4. Layouts

La carpeta layouts almacena el diseño de tu aplicación y es muy útil para separar las diferentes estructuras de tu aplicación para los usuarios autentificados o los usuarios invitados.

Puedes crear muchos diseños que se correspondan con la estructura de tu aplicación. A veces, puedes querer que algunas páginas de tu sitio web tengan diferentes barras laterales, cabeceras, pies de página, etc. Estos y otros elementos se estructuran mediante los archivos de diseño almacenados en la carpeta de diseños.

5. Middleware

Los middlewares son funciones personalizadas que pueden ejecutarse antes de renderizar una página o un grupo de páginas (layout) y pueden definirse y almacenarse en la carpeta middlewares de Nuxt.js.

Los middlewares son muy útiles cuando se crea un sitio web sólo para miembros, y si quieres restringir el acceso a ciertas páginas, puedes configurar un middleware para comprobar si un usuario está conectado o no.

En Nuxt.js, los middlewares funcionan de forma similar a los middlewares de cualquier framework de programación backend, como ExpressJS, Laravel, etc. Tiene tres tipos diferentes de middleware: middleware con nombre, anónimo y de enrutamiento.

6. Pages

El directorio pages es la base del sistema de enrutamiento de Nuxt.js, ya que lee todos los archivos .vue dentro de este directorio y crea la configuración del enrutador automáticamente.

El directorio pages contiene las vistas y rutas de tu aplicación, y cada componente de la página es también un componente estándar de Vue.

Aun así, Nuxt.js lo trata como una ruta añadiendo atributos y funciones especiales para facilitar al máximo el desarrollo de tu aplicación universal.

7. Plugins

El directorio plugins contiene los códigos JavaScript que quieres ejecutar antes de instanciar en la aplicación root de Vue.js. Este es el lugar para añadir plugins de Vue e inyectar funciones o constantes.

En Nuxt.js, en lugar de utilizar la función Vue.use(), sólo tienes que crear un nuevo archivo en la carpeta de plugins e inyectar tu plugin de Vue en la instancia de Vue utilizando el archivo nuxt.config.js.

8. Static

La carpeta static contiene todos los archivos estáticos de tu proyecto que probablemente no cambien o que deban ser renderizados sin ninguna compilación sobre ellos.

Todos los archivos incluidos en el directorio static serán servidos automáticamente por Nuxt.js y serán accesibles a través de la URL root de tu proyecto.

Este directorio es excelente para archivos como favicon, robots.txt, etc.

9. Store

El directorio store contiene todos los archivos de Vuex store, y está dividido en módulos por defecto.

Vuex Store viene lista para usar, pero está desactivada por defecto. Tienes que activar store creando un archivo index.js dentro del directorio store.

Un Vuex store es necesario cuando se crea y gestiona un proyecto empresarial. Por eso Nuxt.js viene preconstruido con el Vuex store y está configurado para adaptarse al desarrollo de aplicaciones de nivel empresarial.

Páginas y Sistema de Enrutamiento de Nuxt.js

Nuxt.js hace que el sistema de enrutamiento sea tan fácil como crear directorios y archivos en el directorio pages. Genera automáticamente un archivo de enrutamiento basado en la estructura de archivos y carpetas de ese directorio.

Por ejemplo, si tienes un archivo about.vue en el directorio pages, convertirá automáticamente la ruta, y entonces podrás visitar la ruta en tu navegador para ver el contenido de la página «About».

Este sistema de rutas también te permite definir tres rutas diferentes con sólo crear archivos y carpetas. Exploremos estos tipos de rutas con más detalle.

1. Rutas Básicas

El enrutamiento básico son aquellas rutas que no requieren ninguna configuración adicional para que funcionen. Es el tipo de ruta más sencillo y puede ser tan simple como /about, /contact, etc.

Para crear un sistema de enrutamiento básico, puedes estructurar tu directorio de páginas como el siguiente:

pages/
--| services.vue
--| contact.vue
--| index.vue

Nuxt.js generará un archivo de enrutamiento utilizando los archivos que hayas añadido en el directorio pages automáticamente:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: ‘services’,
      path: '/services’,
      component: 'pages/services’
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
  ]
}

Ahora todos nuestros archivos están bien estructurados y enrutados automáticamente.

2. Rutas Anidadas

Las rutas anidadas son rutas que se crean dentro de una ruta padre. Las rutas anidadas se utilizan para crear múltiples niveles de enrutamiento profundo.

Para crear rutas anidadas, crea una carpeta padre y coloca todos los archivos de ruta dentro de esa carpeta.

Vamos a probar a crear una ruta anidada:

pages/
 --| dashboard/
 -----| user.vue
 -----| settings.vue
 --| dashboard.vue
 --| services.vue
 --| contact.vue
 --| index.vue

En la estructura de carpetas anterior, creamos un nuevo archivo y una carpeta con el mismo nombre que dashboard, y a continuación añadimos un archivo user.vue y otro settings.vue como hijos de la carpeta dashboard.

Esta sencilla estructura de carpetas generará un enrutador con rutas similares a la siguiente:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'services',
      path: '/services',
      component: 'pages/services'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'dashboard',
      path: '/dashboard',
      component: 'pages/dashboard.vue',
      children: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
}

Las rutas anidadas son un poco engorrosas de crear en Vue.js, especialmente si tienes que crear muchas, como puedes ver en el ejemplo de código anterior, pero Nuxt.js lo ha simplificado y facilitado creando únicamente archivos Vue en una carpeta anidada.

3. Rutas Dinámicas

Las rutas dinámicas se crean con rutas desconocidas, ya sea porque dependen de una llamada a la API o porque no quieres crear la página repetidamente. Son rutas que se definen a partir de una variable, ya sea un nombre, un número o un ID recuperado de los datos del cliente en la aplicación.

Esto es útil cuando construyes una app de noticias, por ejemplo, en la que no conoces el ID o el slug del post que el usuario va a pulsar para leer. Pero con la ruta dinámica, puedes recuperar el ID/slug de la entrada y mostrar la entrada correcta con el ID/slug.

Para crear una ruta dinámica, añade un guión bajo al nombre del archivo o directorio .vue. Puedes nombrar el archivo o directorio con el nombre que quieras, pero hay que añadir un guión bajo para que sea dinámico.

Por ejemplo, si defines un archivo _slug.vue en el directorio pages, puedes acceder al valor mediante el objeto params.slug. Vamos a demostrar con un ejemplo cómo crear una ruta dinámica:

pages/
--|user/
-----| index.vue
-----| about.vue
-----| _routeName
-------| index.vue
-------| info.vue
--| dashboard/
-----| user.vue
-----| settings.vue
--| dashboard.vue
--| services.vue
--| _id.vue
--| contact.vue
--| index.vue

Si añades el guión bajo a _id y _routeName crearás una ruta dinámica para la página con el parámetro ID, junto con una ruta padre con un parámetro cadena con las rutas hijas anteriores. Esta estructura de página generará un enrutador con las siguientes rutas dentro del archivo:

   {
      name: 'work',
      path: '/work',
      component: 'pages/work'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'id',
      path: '/:id',
      component: 'pages/_id.vue'
    }
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-about',
      path: '/user/about',
      component: 'pages/user/about.vue'
    },
    {
      name: 'user-routeName',
      path: '/user/:routeName',
      component: 'pages/user/_routeName/index.vue'
    },
    {
      name: 'user-routeName-info',
      path: '/user/:routeName/info',
      component: 'pages/user/route.vue'
    },
    {
      name: 'dashboard',
      path: '/dashboard',
      component: 'pages/dashboard.vue',
      children: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
}

Ahora que hemos explorado los diferentes sistemas de enrutamiento que vienen incorporados en el framework Nuxt.js, vamos a aprender a crear y gestionar almacenes Vuex.

Uso de Vuex Store en Nuxt.js

Nuxt.js resuelve un importante problema de la estructura de Vue al agilizar el manejo de Vuex cuando se construye un proyecto empresarial. La carpeta store se construye automáticamente al crear una nueva aplicación.

Puedes activar Vuex Store creando un archivo index.js dentro de la carpeta store. Con esta sencilla mejora, Vuex store se estructura y modula ahora siguiendo las mejores prácticas descritas en la documentación oficial de Vuex, lo que favorece el desarrollo de aplicaciones a gran escala.

Tu archivo index.js debe contener la siguiente estructura para que se corresponda con la forma en que Nuxt.js estructura tu Vuex store. Echemos un vistazo:

export const state = () => ({
  
})
export const getters = {

}
export const mutations = {
  
}
export const actions = {
  
}

Nuxt.js te permite utilizar el enfoque de división por caractéristicas en tu aplicación a gran escala. Con este enfoque, creas diferentes archivos de Vuex store para que se correspondan con las características que tienes en tus aplicaciones. Por ejemplo, si tu aplicación tiene características de usuarios, publicaciones y comentarios, puedes crear estos archivos diferentes como users.js, posts.js, y comments.js en tu directorio store.

Este método facilita el acceso a un archivo store concreto en función de la característica de la aplicación, transformando el tedioso proceso de localización y actualización de datos en un paseo sin esfuerzo.

Resumen

Nuxt.js es un framework de Vue muy popular para el SSR y el frontend generado estáticamente. No sólo resuelve el problema de la configuración y puesta en marcha de SSR en las aplicaciones Vue, sino que también impulsa el desarrollo de aplicaciones empresariales al adherirse a las mejores prácticas de estructuración y arquitectura de aplicaciones Vue a gran escala.

Esta guía explora todo lo que necesitas saber sobre Nuxt.js, incluyendo lo que puedes construir con él. Hablamos de las páginas generadas estáticamente, de las aplicaciones de una sola página (SPA) y de las aplicaciones universales, junto con la forma de desarrollarlas con Nuxt.js.

Ahora has visto por ti mismo lo fácil y beneficioso que puede ser elegir Nuxt.js para tu próximo proyecto de gran empresa. ¡Haznos saber en la sección de comentarios qué vas a construir con estos nuevos superpoderes!