Vue.js

vuejs 3 emit the warning “Extraneous non-emits event listeners”

If you are migrating from Vuejs2 to Vuejs3, then there will be many new challenges you will face, and “Extraneous non-emits event listeners warning” is one of them I faced in Optional API.

Warning screenshot

What would cause this warning?

Let’s suppose you have a parent & child component as follows.

Child Component:

<script>
export default {
  name: 'Child',
  props: {
    items: {
      type: Array,
      defauly: null,
    },
  },
}
</script>
<template>
  <button @click="this.$emit('reloadAll')">Refresh</button>
  <div v-for="(item, i) in items" :key="i">
    {{ item }}
  </div>
</template>

Parent Component:

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  data() {
    return {
      items: [
        // list of items
      ],
    }
  },
  methods: {
    reloadAll() {
      // code to reload data
    },
  },
}
</script>
<template>
  <Table :items="items" @reloadAll="reloadAll" />
</template>

In order to avoid the “Extraneous non-emits event listeners” warning in the browser console, that would be quite irritating. To fix this you only need to define the emits in your child component as defined in the vuejs official doc: https://vuejs.org/guide/components/events.html#declaring-emitted-events

Child component with Declaring Emitted Events

<script>
export default {
  name: 'Child',
  emits: ['reloadAll'],
  props: {
    items: {
      type: Array,
      defauly: null,
    },
  },
}
</script>
<template>
  <button @click="this.$emit('reloadAll')">Refresh</button>
  <div v-for="(item, i) in items" :key="i">
    {{ item }}
  </div>
</template>

Emitted events can be explicitly declared on the component via the emits option: and this will resolve the warning issue with emitting to the parent component in vuejs3

export default {
  emits: ['reloadAll']
}
Author: Danyal
I'm working as programmer since 2002. Born, grew up, studied and worked in Pakistan now Im located in Denmark since 2006.