Toast con Vue.js – Notificaciones

Mostrar toast con Vue y Vue Toasted (notificación)

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:

 <script src="https://unpkg.com/vue">
 </script>
 <script src="https://unpkg.com/vue-toasted">
 </script>

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

Vue.use(Toasted);

Y finalmente podemos mostrar un toast así:

this.$toasted.show("Soy un toast", {
  duration: 1000,
  position: "top-left",
});

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:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Ejemplo de Toast en Vue - By Parzibyte</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div id="app">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis deserunt iusto amet ipsam repudiandae cupiditate perferendis
  deleniti maxime, quas, earum architecto numquam obcaecati enim quaerat, velit labore officiis suscipit. Minus?
 </div>
 <script src="https://unpkg.com/vue">

 </script>
 <script src="https://unpkg.com/vue-toasted">

 </script>
 <script src="script.js">

 </script>
</body>

</html>

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

Vue.use(Toasted);
new Vue({
 el: "#app",
 mounted(){
  this.$toasted.show("Soy un toast", {
   duration: 1000,
   position: "top-left",
  });
 }
});

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)

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.

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/