Toast con Vue.js – Notificaciones

Dejar un comentario / javascript, VueJS, web / Por

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.

Dejar un comentario

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