Actualmente Vue destaca entre los demás frameworks de front-end por su increíble facilidad de uso y por evitar las “vueltas complicadas” a la hora de resolver problemas. Sin embargo, no cuenta con ninguna estructura de proyecto preestablecida ni tiene soporte directo de plugins orientados a agilizar el desarrollo… ¡a menos que usemos Nuxt.js! 

Que Vue no fuerce una estructura es uno de los puntos fuertes de su filosofía progresiva: permite incorporarlo en cualquier proyecto con cualquier otra tecnología de manera gradual, simplemente incluyendo un archivo javascript. A pesar de ello, creemos que esto viene con sus desventajas: 

• No hay una estructura de proyecto “estándar” establecida, por lo que cada equipo tiene que inventar una, y tratar de no salir de ella fijando sus propias convenciones de código. Esto requiere mucho tiempo y toma de decisiones antes de siquiera empezar a desarrollar. 
• Vue no viene con autoconfiguraciones de sus plugins más populares, ya que no toma control de nuestra aplicación. Esto implica bastante trabajo a la hora de entender y usar en conjunto Vuex o Vue-router, que resuelven problemas muy recurrentes en el desarrollo frontend. 
• Instalar herramientas que comprueben que nuestro código siga la guía de estilos de Vue es bastante trabajoso, y recordarlas, aún más.

Pero hay casos en los que el aspecto progresivo no nos importa, por ejemplo, en un proyecto nuevo. En ese caso podemos montar una solución con todos los “chiches”, gracias a Nuxt.js.

¿Qué es?

NuxtJS es un framework y CLI de desarrollo de aplicaciones front-end basado en Vue, que funciona sobre NodeJS. Su filosofía es complementar la simpleza de Vue con una estructura de proyecto predefinida y un montón de herramientas que automatizan la parte tediosa del desarrollo para que tengamos que enfocarnos únicamente en desarrollar nuestra aplicación. 

Ventajas al desarrollar

Se comienza creando un proyecto con npx create-nuxt-app (con npm instalado). Apenas lo creamos, nuestro proyecto cuenta con:

• Estructura de carpetas definida: el proyecto viene con carpetas ya creadas, cada una con un propósito específico (incluso vienen cada una con un README), para que no tengamos que idear una estructura de proyecto. 

• Chequeo automático de convenciones de estilos oficiales de Vue + buenas prácticas de Nuxt.js con ESLint: Esto es compatible por ejemplo con Visual Studio Code (con su complemento de ESLint), el cual nos avisará cuando estamos yendo en contra de las “buenas prácticas” conocidas por la comunidad. 
• Soporte para Single Class Components: todos nuestros componentes se pueden escribir poniendo en archivos .vue el template, los estilos y el comportamiento. 
• Servidor de desarrollo con Hot-Reload: podemos ver nuestros cambios inmediatamente en nuestro navegador sin necesidad de actualizar la página. 
• Ruteo automático basado en cómo creamos los archivos en la carpeta pages: implementación pre-configurada de Vue-router para poder separar nuestro front-end en vistas asociadas a URLs distintas. Por ejemplo, si tenemos el archivo pages/personas.vue, la URL /personas nos mostrará ese componente. 
• Barra de progreso de carga para datos requeridos de componentes con asyncData. 

• Hablitación fácil del proxy de axios cambiando una línea de un archivo de configuración para no tener que configurarlo a mano o agregar CORS en nuestro backend para desarrollo. 
• Vuex autoconfigurado e inyectado en nuestros componentes sólo con colocar archivos en la carpeta store. 
• Babel preconfigurado para convertir nuestro Javascript moderno a Javascript compatible con IE. 
• Un ecosistema de módulos autoconfigurados que se pueden agregar al proyecto para integrarlo con una variedad de tecnologías. 

Desventajas

• El tiempo de build puede hacerse extenso.
• Se necesita tener ciertos conocimientos de la estructura de Nuxt para saber dónde tocar para cambiar algo o para resolver un problema. 
• Es un framework relativamente nuevo, donde la comunidad no es tan grande, comparada con otros frameworks de front-end. 

Nuestra experiencia 

A la hora de crear un proyecto nuevo con Nuxt se nos hizo bastante rápido el desarrollo a comparación de cuando usamos sólo Vue-CLI: fuimos incorporando las mejores prácticas de estilo gracias a ESLint, conseguimos rutear la aplicación sin tener idea de vue-router y utilizamos bootstrap-vue sin tener que configurar nada.

Para proyectos ya empezados creemos que pasarse a Nuxt puede llevar más trabajo (ya que hay que llevarlo a la estructura de carpetas de Nuxt y si no usamos Single Class Components hay que convertir nuestros componentes a este formato), pero para los proyectos nuevos nos ha agilizado bastante el proceso. Los invitamos a que experimenten con este framework que parece tener un futuro interesante y gran apoyo de la comunidad.