Mitt Vue

mitt-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)


This package offers a function that automatically handles event subscription and unsubscription in the lifecycke hooks mounted / destroyed (Vue 2), onMounted / onUnmounted or mounted / unmounted (Vue 3)

This simplifies the process of managing event listeners in Vue components, ensuring they are properly set up and cleaned up to avoid memory leaks.

Installation

``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



`

$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;
``

Contribution

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.