agent-skills/skills/vue-best-practices/reference/exact-modifier-for-precise-shortcuts.md

title, impact, impactDescription, type, tags

title	impact	impactDescription	type	tags
Use .exact Modifier for Precise Keyboard/Mouse Shortcuts	MEDIUM	Without .exact, shortcuts fire even when additional modifier keys are pressed, causing unintended behavior	best-practice	vue3 events keyboard modifiers shortcuts accessibility

Use .exact Modifier for Precise Keyboard/Mouse Shortcuts

Impact: MEDIUM - By default, Vue's modifier key handlers (.ctrl, .alt, .shift, .meta) fire even when other modifier keys are also pressed. Use .exact to require that ONLY the specified modifiers are pressed, preventing accidental triggering of shortcuts.

Task Checklist

• Use .exact when you need precise modifier combinations
• Without .exact: @click.ctrl fires for Ctrl+Click AND Ctrl+Shift+Click
• With .exact: @click.ctrl.exact fires ONLY for Ctrl+Click
• Use @click.exact for plain clicks with no modifiers

Incorrect:

<!-- WRONG: Fires even with additional modifiers -->
<template>
  <button @click.ctrl="copyItem">Copy</button>
  <!-- Also fires on Ctrl+Shift+Click, Ctrl+Alt+Click, etc. -->

  <button @click.ctrl.shift="copyAll">Copy All</button>
  <!-- User expects Ctrl+Shift, but also fires on Ctrl+Shift+Alt -->
</template>

<!-- WRONG: Conflicting shortcuts without .exact -->
<template>
  <div>
    <button @click.ctrl="copy">Copy (Ctrl+Click)</button>
    <button @click.ctrl.shift="copyAll">Copy All (Ctrl+Shift+Click)</button>
    <!-- Both fire when user does Ctrl+Shift+Click! -->
  </div>
</template>

Correct:

<!-- CORRECT: Precise modifier matching with .exact -->
<template>
  <button @click.ctrl.exact="copyItem">Copy (Ctrl only)</button>
  <!-- Only fires on Ctrl+Click, not Ctrl+Shift+Click -->

  <button @click.ctrl.shift.exact="copyAll">Copy All (Ctrl+Shift only)</button>
  <!-- Only fires on Ctrl+Shift+Click, not Ctrl+Shift+Alt+Click -->
</template>

<!-- CORRECT: Plain click without any modifiers -->
<template>
  <button @click.exact="selectItem">Select</button>
  <!-- Only fires when NO modifier keys are pressed -->
  <!-- Ctrl+Click, Shift+Click, etc. will NOT trigger this -->
</template>

<!-- CORRECT: Non-conflicting shortcuts -->
<template>
  <div class="editor">
    <div
      @click.exact="selectItem"
      @click.ctrl.exact="addToSelection"
      @click.shift.exact="extendSelection"
      @click.ctrl.shift.exact="selectRange"
    >
      Click, Ctrl+Click, Shift+Click, or Ctrl+Shift+Click
    </div>
  </div>
</template>

Behavior Comparison

// WITHOUT .exact
@click.ctrl="handler"
// Fires when: Ctrl+Click, Ctrl+Shift+Click, Ctrl+Alt+Click, Ctrl+Shift+Alt+Click
// Does NOT fire: Click (without Ctrl)

// WITH .exact
@click.ctrl.exact="handler"
// Fires when: ONLY Ctrl+Click
// Does NOT fire: Ctrl+Shift+Click, Ctrl+Alt+Click, Click

// ONLY .exact (no other modifiers)
@click.exact="handler"
// Fires when: Plain click with NO modifiers
// Does NOT fire: Ctrl+Click, Shift+Click, Alt+Click

Practical Example: File Browser Selection

<template>
  <ul class="file-list">
    <li
      v-for="file in files"
      :key="file.id"
      @click.exact="selectSingle(file)"
      @click.ctrl.exact="toggleSelection(file)"
      @click.shift.exact="selectRange(file)"
      @click.ctrl.shift.exact="addRangeToSelection(file)"
      :class="{ selected: isSelected(file) }"
    >
      {{ file.name }}
    </li>
  </ul>
</template>

<script setup>
// Each click type has distinct, non-overlapping behavior
function selectSingle(file) {
  // Clear selection and select only this file
}

function toggleSelection(file) {
  // Add or remove this file from current selection
}

function selectRange(file) {
  // Select all files from last selected to this one
}

function addRangeToSelection(file) {
  // Add range to existing selection
}
</script>

Keyboard Shortcuts with .exact

<template>
  <div
    tabindex="0"
    @keydown.ctrl.s.exact.prevent="save"
    @keydown.ctrl.shift.s.exact.prevent="saveAs"
    @keydown.ctrl.z.exact.prevent="undo"
    @keydown.ctrl.shift.z.exact.prevent="redo"
  >
    <!-- Each shortcut is precisely defined -->
  </div>
</template>

Reference

• Vue.js Event Handling - .exact Modifier