Formatting & Display Guide

import { formatForDisplay } from '@tanstack/vue-hotkeys'

formatForDisplay('Mod+S')
formatForDisplay('Mod+Shift+Z')

import { formatWithLabels } from '@tanstack/vue-hotkeys'

formatWithLabels('Mod+S')
formatWithLabels('Mod+Shift+Z')

import { formatKeyForDebuggingDisplay } from '@tanstack/vue-hotkeys'

formatKeyForDebuggingDisplay('Meta')
formatKeyForDebuggingDisplay('Shift')

<script setup lang="ts">
import { formatForDisplay } from '@tanstack/vue-hotkeys'

defineProps<{ hotkey: string }>()
</script>

<template>
  <kbd class="shortcut-badge">{{ formatForDisplay(hotkey) }}</kbd>
</template>

<script setup lang="ts">
import { formatForDisplay, useHotkey } from '@tanstack/vue-hotkeys'

const props = defineProps<{
  label: string
  hotkey: string
  onAction: () => void
}>()

useHotkey(() => props.hotkey, () => props.onAction())
</script>

<template>
  <div class="menu-item">
    <span>{{ label }}</span>
    <span class="menu-shortcut">{{ formatForDisplay(hotkey) }}</span>
  </div>
</template>

import { validateHotkey } from '@tanstack/vue-hotkeys'

const result = validateHotkey('Alt+A')