vue-typed-emit

TypeScript utility type for Vue.js $emit

Usage no npm install needed!

<script type="module">
  import vueTypedEmit from 'https://cdn.skypack.dev/vue-typed-emit';
</script>

README

vue-typed-emit

TypeScript utility type for Vue.js $emit

BuildStatus Version Bundle Size Codacy Badge Total alerts Language grade: JavaScript Downloads LastCommit License

Installation

Via NPM

$ npm i vue-typed-emit -D

Via Yarn

$ yarn add vue-typed-emit --dev

Usage

Options API

import Vue from 'vue'
// import type { WithEvents } from 'vue-typed-emit' TypeScript 3.8+
import { WithEvents } from 'vue-typed-emit'

interface Events {
  foo: string
  bar: [string, number]
  baz: undefined
}

export default (Vue as WithEvents<Events>).extend({
  name: 'Component',
  methods: {
    method() {
      this.$emit('foo', 'foo')
      this.$emit('bar', 0)
      this.$emit('baz')
    },
  },
})
Extending extended components
// YourAwesomeExtendedComponent.vue
// ...

export default Vue.extend({
  // ...
  methods: {
    baz() {},
  },
  // ...
})
// ...
import YourAwesomeExtendedComponent from 'path/to/your/awewsome/extended/component'

export default (YourAwesomeExtendedComponent as WithEvents<
  WithEvents,
  typeof YourAwesomeExtendedComponent
>).extend({})

Composition API

import { SetupContext, defineComponent } from '@vue/composition-api'
// import type { CompositionAPIEmit } from 'vue-typed-emit' TypeScript 3.8+
import { CompositionAPIEmit } from 'vue-typed-emit'

interface Events {
  foo: string
  bar: [string, number]
  baz: undefined
}

interface ExtendedSetupContext extends SetupContext {
  emit: CompositionAPIEmit<Events>
}

export default defineComponent({
  name: 'Component',
  setup(props, { emit }: ExtendedSetupContext) {
    emit('foo', 'foo')
    emit('bar', 0)
    emit('baz')
  },
})

Motivation

If your project is written using TypeScript + Vue.js, likely your components have some "contracts" – props they receive and events they emit. vue-typed-emit is aimed to ensure that your components adhere to the contract they claimed when it comes to events emitting and corresponding payloads.

Tests

npm run test

Build

npm run build

License

MIT