svnrnns/mitt-vue

Lightweight utility for integrating mitt with Vue 2 and Vue 3

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

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.

useEventListener('customEvent', (data) => {
  setMessage(data);
});

useEventEmit

The useEventEmit function allows you to emit custom events.

useEventEmit('customEvent', 'Hello, World!');

Usage

Vue 2

For Vue 2, use mixins to manage event subscription and unsubscription.

<template>
  <div id="app">
    <button @click="emitEvent">Emit Event</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
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' });
    },
  },
};
</script>

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 <script setup> perfectly.

<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,
    };
  },
};
</script>

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.