Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Chaining Event Modifiers

Vue Tip: Chaining Event Modifiers Image
Template

Most likely you have already called event.preventDefault() or event.stopPropagation() inside event handlers:

Component.vue
<script setup lang="ts"> function onClick(event: Event) { event.preventDefault() // ... some other logic } </script> <template> <button @click="onClick">Click me</button> </template>

As you can see, you can easily implement this functionality using methods. but as an alternative, Vue provides event modifiers.

Using these modifiers your method contains only the data logic and the DOM event details are part of the template:

Component.vue
<script setup lang="ts"> function onClick(event: Event) { // ... some other logic } </script> <template> <button @click.prevent="onClick">Click me</button> </template>

Vue provides the following event modifiers:

  • .stop
  • .prevent
  • .self
  • .capture
  • .once
  • .passive

You can also chain modifiers:

Component.vue
<script setup lang="ts"> function onClick(event: Event) { // ... some other logic } </script> <template> <button @click.stop.prevent="onClick">Click me</button> </template>

Order matters

The sequence of modifiers is significant as the corresponding code is generated in the exact order they appear.

An example: Using @click.prevent.self will prevent click's default action on the element itself and its children, while @click.self.prevent will only prevent click's default action on the element itself.

Warning

Do not use .passive and .prevent together.

By using the .passive modifier, you are effectively signaling to the browser that you have no intention of preventing the default behavior of the event.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Effortless Handle Asynchronous Components With Suspense

Suspense components are used to display fallback content when waiting for some sort of asynchronous component to resolve.

Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3

Use the path property in the page's definePageMeta to move the homepage to a sub-folder in Nuxt 3.