En este post de programación con el framework Vue te mostraré cómo mostrar notificaciones, avisos o toasts usando la librería llamada vue-toasted que nos permitirá mostrar pequeños cuadros como notificaciones.

Mostrar notificaciones con Vue

Comenzaré diciéndote que puedes encontrar más información y detalles en el repositorio oficial.

Lo primero que hacemos es importar al propio Vue y al script para mostrar toasts con Vue:

See the gist on github.

Después de eso, indicamos a Vue que use Toasted, así:

Vue.use(Toasted);

Y finalmente podemos mostrar un toast así:

See the gist on github.

Ejemplo completo

Te mostraré un ejemplo para mostrar estas notificaciones usando JavaScript y Vue Toasted. Primero vemos el HTML que es muy simple; fíjate que ahí está presente el div que contendrá la app:

See the gist on github.

Después, en el script, hacemos lo siguiente:

See the gist on github.

Estamos mostrando la notificación desde la línea 5 hasta la línea 8. En este caso la misma se mostrará en la esquina superior izquierda y desaparecerá al pasar 1 segundo.

Puedes probar el ejemplo en este enlace.