{"id":21121725,"url":"https://github.com/svnrnns/mitt-vue","last_synced_at":"2025-07-08T21:32:57.096Z","repository":{"id":249785769,"uuid":"832550908","full_name":"svnrnns/mitt-vue","owner":"svnrnns","description":"Lightweight utility for integrating mitt with Vue 2 and Vue 3","archived":false,"fork":false,"pushed_at":"2025-03-22T09:03:08.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T15:13:45.721Z","etag":null,"topics":["package"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/mitt-vue","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svnrnns.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-23T08:50:11.000Z","updated_at":"2025-06-09T07:25:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"c903d972-cbc6-4a3e-8d65-3edc5f1c24d6","html_url":"https://github.com/svnrnns/mitt-vue","commit_stats":null,"previous_names":["svnrnns/mitt-vue"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/svnrnns/mitt-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svnrnns%2Fmitt-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svnrnns%2Fmitt-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svnrnns%2Fmitt-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svnrnns%2Fmitt-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svnrnns","download_url":"https://codeload.github.com/svnrnns/mitt-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svnrnns%2Fmitt-vue/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264352930,"owners_count":23594997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["package"],"created_at":"2024-11-20T03:56:11.117Z","updated_at":"2025-07-08T21:32:57.091Z","avatar_url":"https://github.com/svnrnns.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mitt Vue\n\n`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`) \u003cbr /\u003e\n\nThis 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) \u003cbr/\u003e\nThis simplifies the process of managing event listeners in Vue components, ensuring they are properly set up and cleaned up to avoid memory leaks.\n\n## Installation\n\n```bash\nnpm install mitt-vue\n```\n\n## Features\n\n### useEventListener\n\nThe `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.\n\n```js\nuseEventListener('customEvent', (data) =\u003e {\n  setMessage(data);\n});\n```\n\n### useEventEmit\n\nThe `useEventEmit` function allows you to emit custom events.\n\n```js\nuseEventEmit('customEvent', 'Hello, World!');\n```\n\n## Usage\n\n### Vue 2\n\nFor Vue 2, use mixins to manage event subscription and unsubscription.\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cbutton @click=\"emitEvent\"\u003eEmit Event\u003c/button\u003e\n    \u003cp\u003e{{ message }}\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { useEventEmit, useEventListener } from 'mitt-vue';\n\nexport default {\n  name: 'App',\n  data() {\n    return {\n      message: 'Waiting for event...',\n    };\n  },\n  mixins: [\n    useEventListener('my-event', (data) =\u003e {\n      this.message = `Event received with data: ${JSON.stringify(data)}`;\n    }),\n  ],\n  methods: {\n    emitEvent() {\n      useEventEmit('my-event', { foo: 'bar' });\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n### Vue 3\n\nFor Vue 3, use the any API (Options or Composition) to manage event subscription and unsubscription. \u003cbr/\u003e\nThe function `useEventListener` works both for Options and Composition API, so you can use `\u003cscript setup\u003e` perfectly.\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cbutton @click=\"emitEvent\"\u003eEmit Event\u003c/button\u003e\n    \u003cp\u003e{{ message }}\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref } from 'vue';\nimport { useEventEmit, useEventListener } from 'mitt-vue';\n\nexport default {\n  name: 'App',\n  setup() {\n    const message = ref('Waiting for event...');\n\n    useEventListener('my-event', (data) =\u003e {\n      message.value = `Event received with data: ${JSON.stringify(data)}`;\n    });\n\n    function emitEvent() {\n      useEventEmit('my-event', { foo: 'bar' });\n    }\n\n    return {\n      message,\n      emitEvent,\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n## API\n\n### Methods\n\n#### useEventListener\n\nEmits an event with the given name and data.\n\n| Param     | Type     | Nullable | Desc                                            |\n| --------- | -------- | -------- | ----------------------------------------------- |\n| eventName | string   | \u0026cross;  | The name of the event to listen for             |\n| callback  | Function | \u0026cross;  | The function to call when the event is emitted. |\n\n#### useEventEmit\n\nRegisters event listeners for Vue 3 using lifecycle hooks.\n\n| Param     | Type   | Nullable | Desc                                    |\n| --------- | ------ | -------- | --------------------------------------- |\n| eventName | string | \u0026cross;  | The name of the event to emit.          |\n| data      | any    | \u0026cross;  | The data to pass to the event callback. |\n\n### Types\n\nThese types can be imported this way:\n\n```js\nimport type { EventMap } from 'mitt-vue';\n```\n\nHere is the list of types used in the package.\n\n```ts\nexport type EventMap = Record\u003cEventType, unknown\u003e;\nexport type EventCallback = (...args: any[]) =\u003e void;\n```\n\n## Contribution\n\nContributions are welcome! Please open an issue or submit a pull request on GitHub.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvnrnns%2Fmitt-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvnrnns%2Fmitt-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvnrnns%2Fmitt-vue/lists"}