How to set up and emit event with typescript and the new vue3 composition api

In this simple tutorial or less than a tutorial i will explain you how to strongly type your emit event with the ner composition api from vue3

Ismael Garcia

Wed,27,Jul

How to set up and emit event with typescript and the new vue3 composition api

Question how to set an emit defined?,3. Vue3 composition api how to set an emit event defined in setup script?

Vuejs

Set props interface vue3

While working with vue-3 and typescript we always need to define the props types,like if we have card and that card component need a couple of porps right like title, sub-title, content

interface propsInterface {
  bannerLabel: string
  bannerLabelBack: string
  tagLabel: string
}

Vuejs

Here is small an example

<script lang="ts" setup>
interface propsInterface {
  bannerLabel: string
  bannerLabelBack: string
  tagLabel: string
}
const props = withDefaults(defineProps<propsInterface>(), {
  bannerLabel: 'Explainer',
  tagLabel: 'Typescript',
  bannerLabelBack: 'Example',
})
const { bannerLabel, tagLabel, bannerLabelBack } = props
</script>

Question how to set an emit defined?

How to declare a emit event in typescript and vue3 While developing a feature in one of the project that we were working on here at Reflect-media

vue3 how to set an emit event defined?
typescript vue3 set a emit defined?
Vue3 composition api how to set an emit event defined in setup script?

const $emit = defineEmits<{ (e: 'close-edit-form'): void }>()

export default () => {
  console.log('Code block')
}