Toast con Vue.js – Notificaciones

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *