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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 7,384 suscriptores

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

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

A %d blogueros les gusta esto: