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

Cargando las películas

Ahora que tenemos la información sólo tenemos que sustituir los datos de prueba por los que recibimos. Lo haremos borrando el array 'pelis' de data y devolviendo el nuevo 'data' asíncrono en el método asyncData de Nuxt.js:

pages/index.vue

asyncData ({ $axios }) {
  return $axios.get('/peliculas/')
  .then((res) => {
    return {
      'pelis': res.data
    }
  })
}

Con esto tenemos la magia hecha y al cargar la página ya nos aparecerán las películas en la portada cargadas a través de la API.

Si quisiéramos que aparezcan las películas ordenadas de más a menos favoritos, podríamos cambiar la query de axios añadiendo el filtro programado en DRF:

return $axios.get('/peliculas/?ordering=-favoritos')