Event Modifiers

Vue offers modifiers that simplify common event operations.

Event Modifiers

1<template>
2  <!-- .prevent - prevents default action -->
3  <form @submit.prevent="onSubmit">
4    <button type="submit">Submit</button>
5  </form>
6
7  <!-- .stop - stops propagation -->
8  <div @click="outer">
9    <button @click.stop="inner">Only inner</button>
10  </div>
11
12  <!-- .once - only once -->
13  <button @click.once="runOnce">Only once</button>
14
15  <!-- .self - only on this element -->
16  <div @click.self="onlyThis">
17    <button>Click on button won't trigger onlyThis</button>
18  </div>
19
20  <!-- .capture - capture mode -->
21  <div @click.capture="captureFirst">
22    <button @click="child">Child</button>
23  </div>
24
25  <!-- .passive - for scroll performance -->
26  <div @scroll.passive="onScroll">Scroll content</div>
27
28  <!-- Combinations -->
29  <a @click.stop.prevent="handleLink">Link</a>
30</template>
31
32<script setup>
33function onSubmit() {
34  console.log('Form submitted without page reload')
35}
36
37function outer() { console.log('outer') }
38function inner() { console.log('inner') }
39function runOnce() { console.log('This runs only once') }
40function onlyThis() { console.log('Clicked on div itself') }
41</script>

Key Modifiers

1<template>
2  <!-- Specific keys -->
3  <input @keyup.enter="submit" placeholder="Enter to submit" />
4  <input @keyup.esc="cancel" placeholder="Esc to cancel" />
5
6  <!-- Arrow keys -->
7  <div @keyup.up="moveUp" @keyup.down="moveDown"
8       @keyup.left="moveLeft" @keyup.right="moveRight">
9
10  <!-- Function keys -->
11  <input @keyup.delete="deleteItem" />
12  <input @keyup.space="togglePlay" />
13  <input @keyup.tab="nextField" />
14
15  <!-- Combinations with modifiers -->
16  <input @keyup.ctrl.enter="submitWithCtrl" />
17  <input @keyup.shift.delete="forceDelete" />
18  <input @keyup.alt.s="saveShortcut" />
19  <input @keyup.meta.s="macSave" /> <!-- Cmd on Mac -->
20
21  <!-- Exact modifier -->
22  <input @keyup.ctrl.exact="onlyCtrl" /> <!-- Only Ctrl, not Ctrl+Shift -->
23</template>

Mouse Modifiers

1<template>
2  <!-- Mouse buttons -->
3  <div @click.left="leftClick">Left click</div>
4  <div @click.right="rightClick">Right click</div>
5  <div @click.middle="middleClick">Middle click</div>
6
7  <!-- Context menu -->
8  <div @contextmenu.prevent="showCustomMenu">
9    Right click = custom menu
10  </div>
11</template>
12
13<script setup>
14function leftClick() { console.log('Left') }
15function rightClick() { console.log('Right') }
16function middleClick() { console.log('Middle') }
17function showCustomMenu(e) {
18  console.log('Custom menu at:', e.clientX, e.clientY)
19}
20</script>