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

Implementando un plugin de alertas

La aplicación ya está funcionando perfectamente, pero hay un detalle que podemos perfeccionar, me refiero a esos alerts() que hemos puesto.

Los alerts son como ventanas emergentes que bloquean la ejecución del código.

Vamos a usar una librería llamada Toastr para sustituirlos y crear un efecto non-blocking mucho más interesante y elegante.

Pero no vamos a utilizarla desde CDN, aprovecharemos que Vue tiene una versión llamada vue-toaster que podemos instalar de la siguiente forma:

npm install vue-toasted --save

Ahora vamos a crear un plugin para poder utilizarlo en nuestra app:

plugins/toast.js

import Vue from 'vue'
import Toasted from 'vue-toasted';

var options = {
  position: 'top-center',
  duration: 4000,  // milisegundos de vida
}

Vue.use(Toasted, options)

Para activar el plugin, y dado que sólo funcionará en el lado del cliente lo haremos así en:

nuxt.config.js

plugins: [
  { src: '~/plugins/toast', ssr: false},
],

Ahora sólo tenemos que hacer uso de la librería sustituyendo los alerts de los errores, por ejemplo del registro y el login:

layouts/default.vue

// alert(Object.values(error.response.data))
this.$toasted.error(Object.values(error.response.data))

El resultado es simplemente genial.

Hay varias opciones, para mostrar mensajes satisfactorios, errores y más, echad una ojeada a la documentación de vue-toasted para aprender más:

Por mi parte, hemos acabado el proyecto, espero que os haya gustado y nos vemos en el siguiente 😁.