useKeyboardLayout

function useKeyboardLayout(): Readonly<Ref<KeyboardLayoutMap | null>>;

Defined in: useKeyboardLayout.ts:43

Vue composable that returns a ref of the browser's keyboard layout, or null until it loads and in browsers that don't report one. The layout maps each physical code to the character it types, such as KeyQ to a on a French AZERTY keyboard. Only Chromium browsers report one.

The layout loads after the first component that uses this composable mounts, so server-rendered output hydrates unchanged. useFormatForDisplay uses this composable, so you only need it for labels you draw yourself.

To never ask the browser for the layout, set keyboardLayout: false in HotkeysProvider's defaultOptions. The ref then holds null.

Returns#

Readonly<Ref<KeyboardLayoutMap | null>>

Read-only reactive ref of the keyboard layout, or null

Example#

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

const layoutMap = useKeyboardLayout()
const label = (code: string) =>
  (layoutMap.value?.get(code) ?? code).toUpperCase()
</script>

<template>
  <kbd>{{ label('KeyW') }}</kbd>
</template>