Proyecto cliente SPA para la API de películas con Nuxt.js

Creando nuestro proyecto

Este curso es una continuación del Proyecto API de pelis con DRF, en el que utilizando un framework JavaScript llamado Nuxt.js (basado en Vue.js), os enseñaré a crear un cliente web SPA.

El cliente nos ofrecerá tanto formularios de registro como de identificación y contará con dos páginas, una para visualizar el top de películas y realizar búsquedas, y otra para gestionar sus películas favoritas, ya que éstas se podrán marcar o desmarcar fácilmente y gestionarse en la propia sección.

Por si fuera poco añadiremos también unas alertas toast asíncronas que quedan geniales.

Dicho lo cual, teniendo Node.js instalado, desde la terminal ejecutamos:

npx create-nuxt-app cli_peliculas

Tendremos que elegir las siguientes opciones:

  • Project name: Enter
  • Project description: Enter
  • Author name: Enter
  • Package manager: npm
  • UI Framework: Buefy
  • Custom server framework: none
  • Nuxt.js modules: Axios
  • Linting tools: Enter
  • Test framework: Enter
  • Rendering mode: SPA

Esto nos creará una SPA básica usando Nuxt.js y la UI de Buefy automáticamente, vamos a echarle un vistazo:

cd .\cli_pelis\
npm run dev

Si accedemos a la url http://localhost:3000 podréis ver que la SPA ya cuenta con dos páginas y un diseño adaptativo basado en Bulma pero utilizando Buefy como librería de componentes para Vue.

Podríamos borrar lo que hay y construir nuestro cliente desde cero, pero he pensado que es mejor adaptar lo que tenemos, así nos centramos en lo importante.