Eventos globales en Vue 3

En Vue 3 $on, $off y $once han sido eliminados y ya no podemos utilizar una instancia de Vue como bus para tener un sistema de comunicación global, algo que en muchos casos es muy útil.

Para ponernos en contexto, veamos un ejemplo de a lo que me refiero, en este caso utilizando Vue 2.

Eso en Vue 3 ya no es posible, pero por suerte tenemos alternativas que nos permiten hacer exactamente lo mismo, aunque por otra vía.

Provide/Inject al rescate

Lo que vamos a hacer para implementar eventos globales en Vue 3 va a ser primero instalar mitt, una vez instalado, gracias a provide/inject podremos tener la instancia de mitt a nivel global en nuestro proyecto. Para ello, vamos a modificar la inicialización de nuestra app.

A partir de ahora podemos hacer lo siguiente en nuestros componentes, por ejemplo utilizando la API de Composición.