TanStack · wouterlms · Feb 23, 2026 · Mar 8, 2026 · Mar 8, 2026
diff --git a/.changeset/all-poets-write.md b/.changeset/all-poets-write.md
@@ -0,0 +1,6 @@
+---
+'@tanstack/vue-hotkeys': minor
+'@tanstack/vue-hotkeys-devtools': minor
+---
+
+- Initial Vue adapter release
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objec
 - Type-safe bindings — template strings (`Mod+Shift+S`, `Escape`) or parsed objects for full control
 - Flexible options — `keydown`/`keyup`, `preventDefault`, `stopPropagation`, conditional enabled, `requireReset`
 - Cross-platform Mod — maps to Cmd on macOS and Ctrl on Windows/Linux
-- Batteries included — validation + matching, sequences (Vim-style), key-state tracking, recorder UI helpers, React hooks, and devtools (in progress)
+- Batteries included — validation + matching, sequences (Vim-style), key-state tracking, recorder UI helpers, framework adapters, and devtools
 
 ### <a href="https://tanstack.com/hotkeys">Read the docs →</a>
 
@@ -57,8 +57,8 @@ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objec
 > - [**Preact Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/preact/preact-hotkeys)
 > - [**Solid Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/solid/reference)
 > - [**Angular Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/angular/reference)
+> - [**Vue Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/vue/reference)
 > - Svelte Hotkeys – needs a contributor!
-> - Vue Hotkeys – needs a contributor!
 
 ## Get Involved
 

diff --git a/docs/config.json b/docs/config.json
@@ -49,6 +49,24 @@
               "to": "framework/solid/reference/index"
             }
           ]
+        },
+        {
+          "label": "angular",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/angular/quick-start"
+            }
+          ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/vue/quick-start"
+            }
+          ]
         }
       ]
     },
@@ -130,6 +148,56 @@
               "to": "framework/solid/guides/formatting-display"
             }
           ]
+        },
+        {
+          "label": "angular",
+          "children": [
+            {
+              "label": "Hotkeys",
+              "to": "framework/angular/guides/hotkeys"
+            },
+            {
+              "label": "Sequences",
+              "to": "framework/angular/guides/sequences"
+            },
+            {
+              "label": "Hotkey Recording",
+              "to": "framework/angular/guides/hotkey-recording"
+            },
+            {
+              "label": "Key State Tracking",
+              "to": "framework/angular/guides/key-state-tracking"
+            },
+            {
+              "label": "Formatting & Display",
+              "to": "framework/angular/guides/formatting-display"
+            }
+          ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "Hotkeys",
+              "to": "framework/vue/guides/hotkeys"
+            },
+            {
+              "label": "Sequences",
+              "to": "framework/vue/guides/sequences"
+            },
+            {
+              "label": "Hotkey Recording",
+              "to": "framework/vue/guides/hotkey-recording"
+            },
+            {
+              "label": "Key State Tracking",
+              "to": "framework/vue/guides/key-state-tracking"
+            },
+            {
+              "label": "Formatting & Display",
+              "to": "framework/vue/guides/formatting-display"
+            }
+          ]
         }
       ]
     },
@@ -177,6 +245,15 @@
               "to": "framework/angular/reference/index"
             }
           ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "Vue Composables",
+              "to": "framework/vue/reference/index"
+            }
+          ]
         }
       ]
     },
@@ -278,6 +355,27 @@
               "to": "framework/angular/reference/interfaces/HotkeysProviderOptions"
             }
           ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "useHotkey",
+              "to": "framework/vue/reference/functions/useHotkey"
+            },
+            {
+              "label": "UseHotkeyOptions",
+              "to": "framework/vue/reference/interfaces/UseHotkeyOptions"
+            },
+            {
+              "label": "provideHotkeysContext",
+              "to": "framework/vue/reference/functions/provideHotkeysContext"
+            },
+            {
+              "label": "HotkeysProviderOptions",
+              "to": "framework/vue/reference/interfaces/HotkeysProviderOptions"
+            }
+          ]
         }
       ]
     },
@@ -359,6 +457,19 @@
               "to": "framework/angular/reference/interfaces/InjectHotkeySequenceOptions"
             }
           ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "useHotkeySequence",
+              "to": "framework/vue/reference/functions/useHotkeySequence"
+            },
+            {
+              "label": "UseHotkeySequenceOptions",
+              "to": "framework/vue/reference/interfaces/UseHotkeySequenceOptions"
+            }
+          ]
         }
       ]
     },
@@ -420,6 +531,15 @@
               "to": "framework/angular/reference/functions/injectKeyHold"
             }
           ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "useKeyHold",
+              "to": "framework/vue/reference/functions/useKeyHold"
+            }
+          ]
         }
       ]
     },
@@ -497,6 +617,19 @@
               "to": "framework/angular/reference/functions/injectHeldKeyCodes"
             }
           ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "useHeldKeys",
+              "to": "framework/vue/reference/functions/useHeldKeys"
+            },
+            {
+              "label": "useHeldKeyCodes",
+              "to": "framework/vue/reference/functions/useHeldKeyCodes"
+            }
+          ]
         }
       ]
     },
@@ -570,6 +703,19 @@
               "to": "framework/angular/reference/interfaces/AngularHotkeyRecorder"
             }
           ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "useHotkeyRecorder",
+              "to": "framework/vue/reference/functions/useHotkeyRecorder"
+            },
+            {
+              "label": "VueHotkeyRecorder",
+              "to": "framework/vue/reference/interfaces/VueHotkeyRecorder"
+            }
+          ]
         }
       ]
     },
@@ -710,6 +856,56 @@
               "to": "framework/solid/examples/createKeyHold"
             }
           ]
+        },
+        {
+          "label": "angular",
+          "children": [
+            {
+              "label": "injectHotkey",
+              "to": "framework/angular/examples/injectHotkey"
+            },
+            {
+              "label": "injectHotkeySequence",
+              "to": "framework/angular/examples/injectHotkeySequence"
+            },
+            {
+              "label": "injectHotkeyRecorder",
+              "to": "framework/angular/examples/injectHotkeyRecorder"
+            },
+            {
+              "label": "injectHeldKeys",
+              "to": "framework/angular/examples/injectHeldKeys"
+            },
+            {
+              "label": "injectKeyHold",
+              "to": "framework/angular/examples/injectKeyHold"
+            }
+          ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "useHotkey",
+              "to": "framework/vue/examples/useHotkey"
+            },
+            {
+              "label": "useHotkeySequence",
+              "to": "framework/vue/examples/useHotkeySequence"
+            },
+            {
+              "label": "useHotkeyRecorder",
+              "to": "framework/vue/examples/useHotkeyRecorder"
+            },
+            {
+              "label": "useHeldKeys",
+              "to": "framework/vue/examples/useHeldKeys"
+            },
+            {
+              "label": "useKeyHold",
+              "to": "framework/vue/examples/useKeyhold"
+            }
+          ]
         }
       ]
     }

diff --git a/docs/devtools.md b/docs/devtools.md
@@ -27,6 +27,26 @@ Install the devtools packages for your framework:
 npm install @tanstack/react-devtools @tanstack/react-hotkeys-devtools
 ```
 
+### Preact
+
+```sh
+npm install @tanstack/preact-devtools @tanstack/preact-hotkeys-devtools
+```
+
+### Solid
+
+```sh
+npm install @tanstack/solid-devtools @tanstack/solid-hotkeys-devtools
+```
+
+### Vue
+
+```sh
+npm install @tanstack/vue-hotkeys-devtools
+```
+
+Angular does not currently ship a dedicated hotkeys devtools adapter.
+
 ## Setup
 
 ### React Setup
@@ -36,32 +56,53 @@ import { TanStackDevtools } from '@tanstack/react-devtools'
 import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools'
 
 function App() {
-  return (
-    <div>
-      {/* Your app content */}
-
-      <TanStackDevtools
-        plugins={[hotkeysDevtoolsPlugin()]}
-      />
-    </div>
-  )
+  return <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
 }
 ```
 
-The devtools panel will appear as a tab in the TanStack Devtools UI, alongside any other TanStack devtools plugins you may have installed (e.g., Query devtools, Pacer devtools).
+### Preact Setup
 
-## Production Builds
+```tsx
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+import { hotkeysDevtoolsPlugin } from '@tanstack/preact-hotkeys-devtools'
 
-By default, devtools are excluded from production builds to minimize bundle size. The default imports will return no-op implementations in production:
+export function App() {
+  return <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
+}
+```
+
+### Solid Setup
 
 ```tsx
-// This will be a no-op in production builds
-import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { hotkeysDevtoolsPlugin } from '@tanstack/solid-hotkeys-devtools'
+
+export function App() {
+  return <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
+}
+```
+
+### Vue Setup
+
+```vue
+<script setup lang="ts">
+import { HotkeysDevtoolsPanel } from '@tanstack/vue-hotkeys-devtools'
+</script>
+
+<template>
+  <AppContent />
+  <HotkeysDevtoolsPanel />
+</template>
 ```
 
-If you need to include devtools in production builds (e.g., for debugging production issues), use the production-specific imports:
+For React, Preact, and Solid, the Hotkeys panel appears alongside any other TanStack devtools plugins you have installed.
+
+## Production Builds
+
+By default, the framework devtools adapters return no-op implementations in production builds so they do not affect your production bundle behavior.
+
+React additionally exposes a production import when you explicitly want to include the plugin in production:
 
 ```tsx
-// This will include full devtools even in production builds
 import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools/production'
 ```