Cómo crear una applicación con Nuxt.js v2 Paso a Paso

Por Darío Rivera

Publicado el 2023-05-02 en Nuxt.js

Nuxt.js es un framework de frontend construido sobre Vue.js que ofrece excelentes características de desarrollo, como renderizado del lado del servidor, rutas generadas automáticamente, gestión mejorada de meta etiquetas y mejora del SEO.

En este post veremos cómo crear una aplicación en Nuxt.js v2 usando TypeScript, Tailwind CSS y otras herramientas que mejorarán nuestro proceso de desarrollo.

Requisitos

- Tener instalado Node v14 o v16
- Tener instalado yarn, npx o npm.

Una vez se tiene todo el setup para correr Nuxt, lo siguiente es crear el proyecto con el siguiente comando:

yarn create nuxt-app NOMBRE_PROYECTO

En donde porsupuesto deberás reemplazar NOMBRE_PROYECTO con el nombre específico de tu proyecto. Después de esto, el instalador de Nuxt te dará a elegir un número casi infinito de posibilidades con las que tal vez te puedas sentir abrumado. Vamos a explicar cada una en detalle.

Opciones del instalador

La primera opción del instalador es el "Project name" el cual deberás escoger acorde al proyecto que vas a crear. Por defecto el nombre del proyecto será el que pasaste como argumento al comando de creación del proyecto nuxt.

Programming language

En esta opción podrás seleccionar entre JavaScript o Typescript. Si aún no usas TypeScript lo recomendable es que selecciones JavaScript.

? Programming language: (Use arrow keys)
❯ JavaScript 
  TypeScript

Si quieres empezar a utiliar typescript en tus proyectos te recomiendo el siguiente artículo:

- Instalar y configurar TypeScript

Package manager

En esta opción podrás elegir entre Yarn y Npm. Ambos paquetes de software con gestores de dependencias y realizan tareas similares. Sin embargo, Yarn es generalmente más rápido y más seguro, mientras que Npm es el gestor por default de Node.

? Package manager: (Use arrow keys)
❯ Yarn 
  Npm

UI framework

En esta opción podrás elegir el framework CSS de tu preferencia. Para efectos de este tutorial, yo he seleccionado Tailwind CSS.

? UI framework: (Use arrow keys)
  None 
  Ant Design Vue 
  BalmUI 
  Bootstrap Vue 
  Buefy 
  Chakra UI 
  Element 
  Oruga 
  Primevue 
  Tachyons 
❯ Tailwind CSS 
  Windi CSS 
  Vant 
  View UI 
  Vuetify.js

Template engine

HTML es el lenguaje de marcado estándar utilizado para crear páginas web mientras que Pug es un lenguaje de plantillas de HTML que simplifica la creación de páginas web mediante la eliminación de la necesidad de escribir etiquetas HTML.

? Template engine: (Use arrow keys)
❯ HTML 
  Pug

Nuxt.js modules

Los módulos de Nuxt.js permiten agregar funcionalidades bastante útiles que facilitarán el desarrollo de ciertos proyectos de software. En este caso, he seleccionado Axios la cual es una biblioteca para realizar solicitudes HTTP y PWA para crear Web Apps progresivas (con cache, notificaciones push y otras cosas).

? Nuxt.js modules: 
 ◉ Axios - Promise based HTTP client
❯◉ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

Linting tools

Las herramientas de linting son programas que ayudan a los desarrolladores a detectar y corregir errores de sintaxis, estilo y errores comunes de programación en su código fuente. En este caso he seleccionado ESLint.

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

Si quieres profundizar un poco más en esta herramientas te recomiendo visitar nuestro artículo:

- Qué es ESLINT, para qué sirve y cómo utilizarlo

Testing framework

Un marco de pruebas (testing framework, en inglés) es un conjunto de herramientas, bibliotecas y convenciones que se utilizan para automatizar el proceso de pruebas de software. En este caso he seleccionado Jest pues no he usado ningún otro.

? Testing framework: 
  None 
❯ Jest 
  AVA 
  WebdriverIO 
  Nightwatch

Rendering mode

El modo de renderizado (rendering mode) de Nuxt.js se refiere a la forma en que se renderiza el contenido de una página web en el servidor antes de ser enviada al cliente. Nuxt.js ofrece dos modos de renderizado diferentes: "Universal" y "Single Page App".

El modo de renderizado Universal o SSR (Server-Side Rendering), permite renderizar el contenido de una página en el servidor antes de enviarlo al cliente. Esto significa que el contenido de la página se genera en el servidor y se envía como un HTML completo al cliente, en lugar de enviar sólo una página en blanco con código JavaScript que se ejecuta en el navegador para renderizar la página. Esto porsupuesto mejora el SEO ya que lo que obtiene el browser es una página HTML y no un JavaScript que carga el HTML.

El modo de renderizado sólo cliente, también conocido como SPA (Single-Page Application), se utiliza cuando se desea que el contenido se genere en el lado del cliente. En este modo, la página se carga en blanco y el código JavaScript en el navegador se encarga de generar el contenido de la página en el cliente.

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG) 
  Single Page App

Deployment target

La opción de servidor de despliegue (deployment server) se refiere a la plataforma o servidor donde se aloja y se ejecuta una aplicación web después de haber sido desarrollada. Nuxt nos da dos opciones, la primera consiste en utilizar Node.js por lo que el servidor de Node será el encargado de recibir los HTTP requests y mostrar la página adecuada. La segunda opción (Static) consiste en generar un sitio estático por lo que en teoría no necesitamos un servidor de por medio para procesar las solicitudes HTTP.

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting) 
  Static (Static/Jamstack hosting)

Development tools

Semantic Pull Requests es una herramienta que se utiliza para mejorar la calidad y consistencia del código mediante el uso de reglas de revisión predefinidas y personalizadas. Por otro lado, Dependabot es una herramienta que se utiliza para mantener actualizadas las dependencias de un proyecto de software.

? Development tools: 
 ◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
❯◉ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)

Continuous integration

Las herramientas de integración continua son herramientas de software que se utilizan para automatizar el proceso de integración, compilación y pruebas de un proyecto de software. En este caso he seleccionado None puesto que esta configuración puede realizarse después cuando el repo esté montado en el servidor de código.

? Continuous integration: (Use arrow keys)
❯ None 
  GitHub Actions (GitHub only) 
  Travis CI 
  CircleCI

Version control system

Git es un sistema de control de versiones distribuido, utilizado principalmente en el desarrollo de software para rastrear los cambios en el código fuente y facilitar la colaboración entre los miembros del equipo de desarrollo. Porsupuesto, es la opción por defecto para manejadr las versiones de nuestro proyecto.

? Version control system: (Use arrow keys)
❯ Git 
  None

Ejecutar la aplicación

Si todo lo anterior ha salido bien obtendrás una salida como la siguiente que te dará un repaso rápido de los comandos que puedes utilizar para iniciar el proyecto.

🎉  Successfully created project site-builder-front

  To get started:

        cd site-builder-front
        yarn dev

  To build & start for production:

        cd site-builder-front
        yarn build
        yarn start

  To test:

        cd site-builder-front
        yarn test


  For TypeScript users. 

  See : https://typescript.nuxtjs.org/cookbook/components/
Done in 57.86s.

En síntesis, cada vez que descargues el proyecto en una nueva máquina o en otro directorio deberás ejecutar

yarn install

Después de esto, con el siguiente comando podrás hacer un hot reload, lo que significa que cada vez que cambies algo en el código se reflejará automáticamente en tu aplicación si necesidad de recargar.

yarn dev

La aplicación quedará disponible en http://localhost:3000/.