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.
