What are event modifiers?

VueJunior~1 min read

Event modifiers are special suffixes (for example: .stop, .prevent, .once) that are added to the v-on directive and let you change an event's behavior without writing extra JavaScript code.

In simpler terms:

Event modifiers are a way to tell Vue exactly how to handle an event, automatically performing commonly used event.* actions.

They exist for convenience, template cleanliness, and reducing the amount of boilerplate code.

What do event modifiers look like?

html

<button @click.stop="doSomething"></button>
<button @submit.prevent="onSubmit"></button>
<input @keyup.enter="search">

Why are modifiers needed?

They let you:

stop propagation (stopPropagation)
cancel default behavior (preventDefault)
make a handler fire only once
listen to events only on the element itself
work with keys
improve performance (passive)

And all this without writing extra code:

html

<button @click="event.stopPropagation(); event.preventDefault(); doStuff()">...</button>

becomes:

html

<button @click.stop.prevent="doStuff">

The main event modifiers

1. `.stop`

Stops the event from propagating.

html

@click.stop

Equivalent to:

event.stopPropagation()

2. `.prevent`

Cancels the browser's default behavior.

html

@submit.prevent

Equivalent to:

event.preventDefault()

3. `.once`

The handler fires only once.

html

@click.once

After the first call, Vue removes the listener itself.

4. `.self`

Fires only if the event came from the element itself, not from its children.

html

@click.self

5. `.capture`

Listens to the event during the capture phase (before propagation).

html

@click.capture

6. `.passive`

Creates a passive listener, useful for scroll handlers.

html

@scroll.passive

Improves performance.

Key modifiers

Applied to keyup / keydown:

html

@keyup.enter
@keyup.esc
@keyup.space
@keyup.up
@keyup.ctrl.enter

This also counts as an event modifier.

Combining modifiers

You can combine them:

html

@click.stop.prevent.once="save"

Order matters: Vue generates the handler in the order the modifiers are written.

Where can't you use modifiers?

Inside components for arbitrary custom events (they only work with DOM events and system events)

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.