https://github.com/svnrnns/mitt-vue
Lightweight utility for integrating mitt with Vue 2 and Vue 3
https://github.com/svnrnns/mitt-vue
package
Last synced: 1 day ago
JSON representation
Lightweight utility for integrating mitt with Vue 2 and Vue 3
- Host: GitHub
- URL: https://github.com/svnrnns/mitt-vue
- Owner: svnrnns
- License: mit
- Created: 2024-07-23T08:50:11.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-03-22T09:03:08.000Z (4 months ago)
- Last Synced: 2025-06-16T15:13:45.721Z (24 days ago)
- Topics: package
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mitt-vue
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
### useEventListener
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);
});
```
### useEventEmit
The `useEventEmit` function allows you to emit custom events.
```js
useEventEmit('customEvent', 'Hello, World!');
```
## Usage
### Vue 2
For Vue 2, use mixins to manage event subscription and unsubscription.
```js
Emit Event
{{ message }}
import { useEventEmit, useEventListener } from 'mitt-vue';
export default {
name: 'App',
data() {
return {
message: 'Waiting for event...',
};
},
mixins: [
useEventListener('my-event', (data) => {
this.message = `Event received with data: ${JSON.stringify(data)}`;
}),
],
methods: {
emitEvent() {
useEventEmit('my-event', { foo: 'bar' });
},
},
};
```
### Vue 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 `` perfectly.
```js
<template>
<div id="app">
<button @click="emitEvent">Emit Event</button>
<p>{{ message }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import { useEventEmit, useEventListener } from 'mitt-vue';
export default {
name: 'App',
setup() {
const message = ref('Waiting for event...');
useEventListener('my-event', (data) => {
message.value = `Event received with data: ${JSON.stringify(data)}`;
});
function emitEvent() {
useEventEmit('my-event', { foo: 'bar' });
}
return {
message,
emitEvent,
};
},
};
```
## API
### Methods
#### 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. |
### Types
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.