How to Make Vue v-on:click Work on Component

There is a situation when you want to use the v-on:click directive on a component but it doesn’t work. Here we suggest a snippet that will work like a charm.

To listen to native events on the root element of a component, the .native modifier for v-on should be used like this:

---

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

There is a shorthand version of the above snippet:

---

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

Binding Native Events to Components

There are times that you want to listen directly to a native event on the root element of a component. In such cases, the .native modifier for v-on comes to rescue. However, using it on a very specific element is not a good idea. Read more about the native events here.

Components do not emit native events by default because they act as custom wrappers rather than direct DOM elements. In Vue 2, the .native modifier is required to forward events to the root element. In Vue 3, this modifier was removed; native events on the root element are now listened to automatically.