Vue.js 3 + TypeScript + Mitt

[nanodeath]

Hey, I'm working on getting Mitt working with the tech in the title and thought I'd share what I found to work.

First, for attaching mitt to Vue at all, I combined the mitt docs and the Vue.js 3 migration docs to get this:

import mitt from 'mitt';

const app = ...;

app.config.globalProperties.emitter = mitt();

Obviously you don't have to call it emitter, but whatever you do call it has to be consistent with the type declaration below.

I think if you're not running TS in strict mode, or you don't need the this.emitter in your other methods to typecheck, you're done, but if you are in strict mode, you need some additional bits.

For the new property to typecheck when using it, you have to do some module augmentation stuff. Vue.js docs. I created this:

// in src/typings/mitt.d.ts
import { Emitter } from "mitt";

declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        emitter: Emitter<any>
    }
}

Lastly...I was using this shorthand for defining components:

export default {
    ....

And this seems to not work with the module augmentation. Instead I had to do this, as the docs suggest:

import { defineComponent } from "vue";

export default defineComponent({
    ....

Finally, if you're using VS Code, you might get a little error (Property 'emitter' does not exist on type...) where you're referencing emitter in your main application. I found that restarting VS Code fixed it (?!) so...you might give that a try.

[MetRonnie]

You don't need to add the emitter as a global property of the app (or using provide either).

You can just import the emitter and use it.

// emitter.ts
import mitt from 'mitt'

type Events = {
  foo: string,
  bar: number,
}

export const emitter = mitt<Events>()

<!-- Component.vue -->
<script setup lang="ts">
import { emitter } from './emitter'

emitter.on('foo', (str) => {})
</script>