What are key modifiers?

VueJunior~1 min read

Key modifiers are special modifiers for the v-on directive that let a handler run only when a specific key or key combination is pressed.

They are used with the keyup and keydown events.

In simple terms:

Key modifiers let you react only to the keys you need (for example Enter, Escape, arrows, Tab), without manually checking event.key in code.

The simplest example

html

<input @keyup.enter="sendMessage">

The handler fires only if the user presses Enter.

Without modifiers, you would have to write:

onKeyPress(e) {
  if (e.key === 'Enter') {
    this.sendMessage()
  }
}

Main key modifiers

Frequently used:

html

@keyup.enter
@keyup.esc
@keyup.tab
@keyup.space

Arrows:

html

@keyup.up
@keyup.down
@keyup.left
@keyup.right

Deletion:

html

@keyup.delete  <!-- works as both Backspace and Delete -->

Combinations with system modifiers

html

@keyup.ctrl.enter="submit"
@keyup.shift.tab="backward"
@keyup.alt.s="save"

This works because Vue checks:

event.ctrlKey
event.shiftKey
event.altKey
event.metaKey (Cmd on Mac)

A useful case: submitting a form on Enter

html

<input @keyup.enter="submitForm">

Dynamic key modifier

You can use a computed event name:

html

<input v-on:[eventName]="doSomething">

But key modifiers only work with a direct key name, for example:

html

@keyup[eventName] Not allowed

Important (Vue 2 vs Vue 3)

In Vue 2, there were keyCodes (for example, keyCode: 13)
In Vue 3, they were removed, and modifiers work only through key names (enter, esc)

Short Answer

Interview ready

Premium

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