En este artículo vamos a empezar a desarrollar una aplicación con Nuxt, el "framework intuitivo" basado en Vue. Nuxt es una estupenda herramienta para hacer cualquier tipo de proyecto de sitio o aplicación web, es fácil de manejar y nos ahorra mucho trabajo de desarrollo si seguimos sus convenciones.

En este artículo no vamos a introducir el framework, sino ir directamente a la práctica. Así que, si quieres algo más de información puedes conocer mejor Nuxt y sus características, te recomendamos entrar Home de Nuxt en DesarrolloWeb.com.

Instalación de Nuxt

Comenzamos por crear un nuevo proyecto donde tendremos Nuxt instalado. Esto lo podemos hacer de manera muy cómoda con el CLI de Nuxt, llamado "nuxi".

npx nuxi init mi-nombre-proyecto

Si este comando detecta que necesitas instalar algo adicional en tu ordenador, lo hará inmediatamente.

Una vez instalado nos moveremos a la carpeta del proyecto que acabamos de crear. En este caso el proyecto lo hemos llamado "mi-nombre-proyecto", por lo que haremos este comando para movernos a la correspondiente carpeta.

cd mi-nombre-proyecto

Por supuesto, si tu proyecto se llama de otra manera, simplemente tienes que cambiar los comandos anteriores.

Si no lo ha hecho ya el CLI de Nuxt al crear el proyecto, puedes instalar las dependencias con npm o tu gestor de paquetes habitual.

npm install

Arrancar el servidor de desarrollo

Estos pasos nos habrán dejado el proyecto de Nuxt listo para comenzar a trabajar. El siguiente paso será arrancar el servidor de desarrollo para ver el proyecto en marcha.

Lo hacemos con este comando del terminal.

npm run dev -- -o

Actualizado: ahora puedes hacer simplemente npm run dev y hará el mismo efecto que con el flag -o

En el comando anterior hay un par de signos menos seguidos "--". Por si no conoces esta sintaxis, te informo que simplemente consiste en un separador, utilizado para indicar que los siguientes argumentos deben pasarse al script npm que se está ejecutando. Eso evitará que sean interpretados por npm directamente.

Al haber puesto el flag -o se abrirá el navegador inmediatamente con la página del proyecto Nuxt. Si no lo hace simplemente tienes que entrar en la URL con el puerto donde se encuentra el servidor.

http://localhost:3000/

Si no fuera esa URL por algún motivo, la podrías ver en la salida que te aparece en la consola al arrancar el servidor de desarrollo.

Carpetas y archivos del proyecto

Ahora vamos a repasar las carpetas del proyecto que obtenemos al iniciarlo con nuxi. Son solamente unas pocas carpetas para lo mucho que te ofrece Nuxt, el motivo es que el proyecto se crea con el mínimo necesario para comenzar y, a medida que vamos incorporando funcionalidades, otras carpetas necesarias se irán generando.

Carpeta .nuxt

Esta es una carpeta con código generado automáticamente al arrancar el servidor de desarrollo. Por eso, nunca debemos tocar esta carpeta.

La carpeta .nuxt podría ser interesante para ver qué archivos de tu aplicación se generan cuando usas Nuxt.

Carpeta node_modules

Esta es la conocida carpeta donde se guardan las dependencias instaladas vía npm. Tampoco debemos tocar esta carpeta para nada.

Carpeta public

Esta carpeta contiene archivos que se producirán en la raíz del proyecto que estamos creando, sin ningún tipo de tratamiento mediante Nuxt.

Es el sitio donde colocarás todos los archivos que no quieres que se toquen durante la construcción del proyecto, como iconos, imágenes el archivo robots.txt y otros.

En un principio esta carpeta verás que contiene un favicon.

Archivos en la raíz

A partir de ahí todo lo restante son los archivos que encontramos en la raíz del proyecto, que vamos a resumir.

• .gitignore es para ignorar archivos y carpetas con Git
• .npmrc es un archivo de configuración de npm. Contiene personalizaciones que se quieren efectuar al ejecutar los comandos de npm
• app.vue es el componente Vue raíz de tu aplicación
• nuxt.config.ts es el archivo donde colocaremos la configuración de Nuxt necesaria para nuestra aplicación. Observarás que este archivo está vacío inicialmente, esto es porque el proyecto estará usando las configuraciones predeterminadas de Vue. A pesar de seguir las convenciones impuestas por el framework deberemos trabajar mucho sobre este archivo, porque en él especificaremos muchos detalles como los módulos que deseamos instalar, las carpetas que queramos personalizar, los alias para el acceso a carpetas, el importado de CSS global y muchas otras cosas.
• package.json y package-lock.json son los archivos que especifican nuestro proyecto y fijan la versiones de las dependencias instaladas vía npm
• README.md es el típico archivo con la información del repositorio
• tsconfig.json es el archivo de configuración de TypeScript

Modificando el componente principal de la aplicación Nuxt

Ahora vamos a hacer algunos cambios en el proyecto para que nuestra página de bienvenida de Nuxt cambie.

Para ello vamos a tocar el archivo llamado app.vue, que hemos comentado que es el componente raíz de la aplicación. El código actual que encontramos en este archivo es el siguiente:

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

Vemos que dentro del componente raíz aparece otro componente Vue llamado <NuxtWelcome>. Este es el componente responsable de que, al abrir el proyecto generado inicialmente, se muestre una página de bienvenida, con un enlace a la documentación, ejemplos y el directorio de módulos de Nuxt.

Este componente es parte del propio framework y no aparece en las carpetas de tu proyecto. En realidad lo encuentras en el paquete @nuxt/ui.

Si quieres puedes borrar el componente <NuxtWelcome> y dejar un código como el que sigue:

<template>
  <div>
    <h1>Hola Nuxt!</h1>
    <p>Esto es un <b>test de aplicación desarrollada con Nuxt</b></p>
  </div>
</template>

Si tienes arrancado el servidor de desarrollo observarás que, cuando cambias el código del componente app.vue la página se refresca automáticamente. En este caso desaparecerán los mensajes de bienvenida y en su lugar aparecerá el párrofo con el texto "Hola Nuxt".

No hemos mencionado nada de la etiqueta <template>. Si vienes de Vue la conocerás perfectamente, pues es la etiqueta que usamos para poder especificar el template de un componente Vue. Esta etiqueta por tanto no la puedes borrar, porque Vue la necesita para identificar el código de la vista. En ella puedes colocar cualquier HTML y bindear datos.

Conclusión

Hemos empezado a entender la estructura básica de los proyectos Nuxt. Nos queda mucho por delante para comenzar a sacarle partido al framework, pero al menos ya tenemos un proyecto listo para comenzar a experimentar.

En el próximo artículo vamos a aprender a trabajar con rutas dentro de nuestro proyecto y veremos lo sencillo que resulta cuando usamos Nuxt, en relación a la creación de rutas en aplicaciones Vue tradicionales.