Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svnrnns/mitt-vue
Lightweight utility for integrating mitt with Vue 2 and Vue 3
https://github.com/svnrnns/mitt-vue
event-emitter event-handling event-management mitt vue-events vue-hooks vue-utility-library
Last synced: about 2 months 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 (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-01T08:40:12.000Z (6 months ago)
- Last Synced: 2024-10-02T08:23:45.031Z (4 months ago)
- Topics: event-emitter, event-handling, event-management, mitt, vue-events, vue-hooks, vue-utility-library
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/mitt-vue
- Size: 13.7 KB
- Stars: 1
- 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
### useEventListener
A function to listen for a custom event.
| 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
A function to emit a custom event.
| Param | Type | Nullable | Desc |
| --------- | ------ | -------- | --------------------------------------- |
| eventName | string | ✗ | The name of the event to emit. |
| data | any | ✗ | The data to pass to the event callback. |
## Contribution
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
## License
This project is licensed under the MIT License.