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:
Después de eso, indicamos a Vue que use Toasted, así:
Vue.use(Toasted);
Y finalmente podemos mostrar un toast así:
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:
Después, en el script, hacemos lo siguiente:
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.
Mostrar toast con Vue y Vue Toasted (notificación)
Puedes probar el ejemplo en este enlace.
0 Comentarios