Los módulos de Nuxt

¿Qué es un módulo de Nuxt?

Son funcionalidades desacopladas que podemos añadir a nuestro proyecto de Nuxt que nos ahorran mucho tiempo en configuración y bastantes líneas de código.

La principal ventaja, en mi opinión, es que un módulo autogestiona sus dependencias y su mantenimiento está desligado de tu aplicación, lo que hace que no tengas que invertir tanto tiempo en revisar que todo funciona correctamente. Al final detrás de cada módulo hay una comunidad que se ocupa de que siga con vida, se vaya actualizando y se corrijan los posibles errores que tengan.

¿Dónde puedo consultar los módulos disponibles?

Poco a poco la comunidad de Nuxt va creciendo, y no son pocas las personas que se animan a crear nuevos módulos que nos facilitan mucho el desarrollo de nuestros proyectos.

Seguramente cuando has empezado a trastear con Nuxt te has preguntado si ya hay algún módulo que haga eso que tu quieres que tenga tu proyecto. Por suerte hay una web donde se pueden consultar los principales módulos oficiales de Nuxt:

https://modules.nuxtjs.org/

En esta web puedes encontrar los módulos separados por categorías, consultar el total de módulos y para cada uno datos útiles como las descargas mensuales en npm o la popularidad del módulo. También dispone de un enlace a la página principal del módulo o el repositorio en Github.

¿Qué módulos debería integrar en mi proyecto?

Cada proyecto es un mundo y dependerá de las necesidades que tengas, pero sin duda hay ciertos módulos que te van a hacer la vida más sencilla y puede que te saquen de algún apuro.

A continuación te enseño cuales son los que no pueden faltar en mis aplicaciones de Nuxt y recomiendo encarecidamente:

@nuxtjs/eslint-module

Documentación: https://github.com/nuxt-community/eslint-module

Este módulo no va a afectar directamente en el resultado de tu aplicación pero te va a ayudar mucho en el desarrollo, ya que puedes establecer ciertas reglas de programación o quedarte con las que ya vienen por defecto para asegurarte que el código que vas creando no tiene errores.

Principalmente este módulo te va a ir diciendo dónde metes la pata en tiempo real, por ejemplo con esa típica variable a la que le asignamos un valor pero... Nunca hemos declarado.

@nuxtjs/html-validator

Documentación: https://html-validator.nuxtjs.org/

Siguiendo en la línea de prevenir errores, este módulo nos va a ayudar con el código HTML que se genera una vez nuestra página ha renderizado, revisando al estructura del mismo. Esto nos va a ayudar a depurar errores de hidratación (Muy en resumen, cuando el servidor renderiza algo que no coincide con lo que tenemos renderizado en el HTML del cliente) y a mejorar la accesibilidad de nuestra página.

@nuxtjs/pwa

Documentación: https://pwa.nuxtjs.org/

¿Quieres configurar tu aplicación como una Progressive Web App sin mover un dedo? Instala este módulo y asunto solucionado.

Tiene muchos aspectos que puedes configurar a mano para definir el resultado de tu aplicación como el fichero manifest, las meta tags con la información necesaria o los iconos necesarios para Android e iOS cuando se instale tu aplicación como una PWA. Y por supuesto un service worker para trabajar con los archivos de la aplicación cuando está offline.

@nuxt/content

Documentación: https://content.nuxtjs.org/

Si necesitas trabajar con ficheros estáticos de los que leer información o necesitas mostrar esa información en tu aplicación, este es tu módulo. Trabaja con ficheros en formato Markdown, JSON, YAML, XML y CSV y permite la edición de estos documentos en vivo durante el desarrollo.

También tiene implementado un sistema de query builder para poder consultar y extraer información de los ficheros a nuestra conveniencia.

Sin duda para cualquier aplicación que gestione contenido vas a adorar usar este módulo.

Además en este quiero destacar que la documentación que han creado es super completa e intuitiva, lo que se agradece mucho cuando lo instalas por primera vez y necesitas aprender a usarlo.

Y para terminar...

Espero haberte ayudado un poco a introducirte en el mundo de los módulos de Nuxt si no lo conocías, y si ya lo conocías espero que estas recomendaciones también te ayuden.

Hay muchos otros módulos importantes para usar en nuestras aplicaciones y te recomiendo que antes de empezar el desarrollo de tu nuevo proyecto en Nuxt, le eches un vistazo a los módulos porque siempre hay algo nuevo que vas a adorar tener instalado.