# useKeyboardLayout

<!-- DO NOT EDIT: this page is autogenerated from the type comments -->

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

Defined in: [useKeyboardLayout.ts:43](https://github.com/TanStack/hotkeys/blob/main/packages/vue-hotkeys/src/useKeyboardLayout.ts#L43)

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

```vue
<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>
```