Lightweight utility for integrating mitt with Vue 2 and Vue 3
npm install mitt-vuemitt-vue is a package for handling events in Vue 2 and Vue 3 applications using the mitt library. It provides a simple API for emitting and listening to events in your Vue components. (similar to the package mitt-react) mounted / destroyed (Vue 2), onMounted / onUnmounted or mounted / unmounted (Vue 3) bash
npm install mitt-vue
`
Features
$3
The useEventListener function allows you to listen to custom events in your Vue components. This will automatically create a suscription an unsuscription for the event in the component.
`js
useEventListener('customEvent', (data) => {
setMessage(data);
});
`
$3
The useEventEmit function allows you to emit custom events.
`js
useEventEmit('customEvent', 'Hello, World!');
`
Usage
$3
For Vue 2, use mixins to manage event subscription and unsubscription.
`js
{{ message }}
`
$3
For Vue 3, use the any API (Options or Composition) to manage event subscription and unsubscription.
The function useEventListener works both for Options and Composition API, so you can use
API
$3
#### useEventListener
Emits an event with the given name and data.
| Param | Type | Nullable | Desc |
| --------- | -------- | -------- | ----------------------------------------------- |
| eventName | string | ✗ | The name of the event to listen for |
| callback | Function | ✗ | The function to call when the event is emitted. |
#### useEventEmit
Registers event listeners for Vue 3 using lifecycle hooks.
| Param | Type | Nullable | Desc |
| --------- | ------ | -------- | --------------------------------------- |
| eventName | string | ✗ | The name of the event to emit. |
| data | any | ✗ | The data to pass to the event callback. |
$3
These types can be imported this way:
`js
import type { EventMap } from 'mitt-vue';
`
Here is the list of types used in the package.
`ts
export type EventMap = Record;
export type EventCallback = (...args: any[]) => void;
``