+
+
+```
+
+### Global Registration
+
+```ts
+// main.ts
+app.directive('focus', {
+ mounted: (el) => el.focus()
+})
+```
+
+
diff --git a/.agents/skills/vue/references/core-new-apis.md b/.agents/skills/vue/references/core-new-apis.md
new file mode 100644
index 0000000..4c6a9b8
--- /dev/null
+++ b/.agents/skills/vue/references/core-new-apis.md
@@ -0,0 +1,264 @@
+---
+name: core-new-apis
+description: Vue 3 reactivity system, lifecycle hooks, and composable patterns
+---
+
+# Reactivity, Lifecycle & Composables
+
+## Reactivity
+
+### ref vs shallowRef
+
+```ts
+import { ref, shallowRef } from 'vue'
+
+// ref - deep reactivity (tracks nested changes)
+const user = ref({ name: 'John', profile: { age: 30 } })
+user.value.profile.age = 31 // Triggers reactivity
+
+// shallowRef - only .value assignment triggers reactivity (better performance)
+const data = shallowRef({ items: [] })
+data.value.items.push('new') // Does NOT trigger reactivity
+data.value = { items: ['new'] } // Triggers reactivity
+```
+
+**Prefer `shallowRef`** for large data structures or when deep reactivity is unnecessary.
+
+### computed
+
+```ts
+import { ref, computed } from 'vue'
+
+const count = ref(0)
+
+// Read-only computed
+const doubled = computed(() => count.value * 2)
+
+// Writable computed
+const plusOne = computed({
+ get: () => count.value + 1,
+ set: (val) => { count.value = val - 1 }
+})
+```
+
+### reactive & readonly
+
+```ts
+import { reactive, readonly } from 'vue'
+
+const state = reactive({ count: 0, nested: { value: 1 } })
+state.count++ // Reactive
+
+const readonlyState = readonly(state)
+readonlyState.count++ // Warning, mutation blocked
+```
+
+Note: `reactive()` loses reactivity on destructuring. Use `ref()` or `toRefs()`.
+
+## Watchers
+
+### watch
+
+```ts
+import { ref, watch } from 'vue'
+
+const count = ref(0)
+
+// Watch single ref
+watch(count, (newVal, oldVal) => {
+ console.log(`Changed from ${oldVal} to ${newVal}`)
+})
+
+// Watch getter
+watch(
+ () => props.id,
+ (id) => fetchData(id),
+ { immediate: true }
+)
+
+// Watch multiple sources
+watch([firstName, lastName], ([first, last]) => {
+ fullName.value = `${first} ${last}`
+})
+
+// Deep watch with depth limit (Vue 3.5+)
+watch(state, callback, { deep: 2 })
+
+// Once (Vue 3.4+)
+watch(source, callback, { once: true })
+```
+
+### watchEffect
+
+Runs immediately and auto-tracks dependencies.
+
+```ts
+import { ref, watchEffect, onWatcherCleanup } from 'vue'
+
+const id = ref(1)
+
+watchEffect(async () => {
+ const controller = new AbortController()
+
+ // Cleanup on re-run or unmount (Vue 3.5+)
+ onWatcherCleanup(() => controller.abort())
+
+ const res = await fetch(`/api/${id.value}`, { signal: controller.signal })
+ data.value = await res.json()
+})
+
+// Pause/resume (Vue 3.5+)
+const { pause, resume, stop } = watchEffect(() => {})
+pause()
+resume()
+stop()
+```
+
+### Flush Timing
+
+```ts
+// 'pre' (default) - before component update
+// 'post' - after component update (access updated DOM)
+// 'sync' - immediate, use with caution
+
+watch(source, callback, { flush: 'post' })
+watchPostEffect(() => {}) // Alias for flush: 'post'
+```
+
+## Lifecycle Hooks
+
+```ts
+import {
+ onBeforeMount,
+ onMounted,
+ onBeforeUpdate,
+ onUpdated,
+ onBeforeUnmount,
+ onUnmounted,
+ onErrorCaptured,
+ onActivated, // KeepAlive
+ onDeactivated, // KeepAlive
+ onServerPrefetch // SSR only
+} from 'vue'
+
+onMounted(() => {
+ console.log('DOM is ready')
+})
+
+onUnmounted(() => {
+ // Cleanup timers, listeners, etc.
+})
+
+// Error boundary
+onErrorCaptured((err, instance, info) => {
+ console.error(err)
+ return false // Stop propagation
+})
+```
+
+## Effect Scope
+
+Group reactive effects for batch disposal.
+
+```ts
+import { effectScope, onScopeDispose } from 'vue'
+
+const scope = effectScope()
+
+scope.run(() => {
+ const count = ref(0)
+ const doubled = computed(() => count.value * 2)
+
+ watch(count, () => console.log(count.value))
+
+ // Cleanup when scope stops
+ onScopeDispose(() => {
+ console.log('Scope disposed')
+ })
+})
+
+// Dispose all effects
+scope.stop()
+```
+
+## Composables
+
+Composables are functions that encapsulate stateful logic using Composition API.
+
+### Naming Convention
+
+- Start with `use`: `useMouse`, `useFetch`, `useCounter`
+
+### Pattern
+
+```ts
+// composables/useMouse.ts
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useMouse() {
+ const x = ref(0)
+ const y = ref(0)
+
+ const update = (e: MouseEvent) => {
+ x.value = e.pageX
+ y.value = e.pageY
+ }
+
+ onMounted(() => window.addEventListener('mousemove', update))
+ onUnmounted(() => window.removeEventListener('mousemove', update))
+
+ return { x, y }
+}
+```
+
+### Accept Reactive Input
+
+Use `toValue()` (Vue 3.3+) to normalize refs, getters, or plain values.
+
+```ts
+import { ref, watchEffect, toValue, type MaybeRefOrGetter } from 'vue'
+
+export function useFetch(url: MaybeRefOrGetter
) {
+ const data = ref(null)
+ const error = ref(null)
+
+ watchEffect(async () => {
+ data.value = null
+ error.value = null
+
+ try {
+ const res = await fetch(toValue(url))
+ data.value = await res.json()
+ } catch (e) {
+ error.value = e
+ }
+ })
+
+ return { data, error }
+}
+
+// Usage - all work:
+useFetch('/api/users')
+useFetch(urlRef)
+useFetch(() => `/api/users/${props.id}`)
+```
+
+### Return Refs (Not Reactive)
+
+Always return plain object with refs for destructuring compatibility.
+
+```ts
+// Good - preserves reactivity when destructured
+return { x, y }
+
+// Bad - loses reactivity when destructured
+return reactive({ x, y })
+```
+
+
diff --git a/.agents/skills/vue/references/script-setup-macros.md b/.agents/skills/vue/references/script-setup-macros.md
new file mode 100644
index 0000000..a0caaa9
--- /dev/null
+++ b/.agents/skills/vue/references/script-setup-macros.md
@@ -0,0 +1,204 @@
+---
+name: script-setup-macros
+description: Vue 3 script setup syntax and compiler macros for defining props, emits, models, and more
+---
+
+# Script Setup & Macros
+
+`
+
+
+
+
+
+```
+
+## defineProps
+
+Declare component props with full TypeScript support.
+
+```ts
+// Type-based declaration (recommended)
+const props = defineProps<{
+ title: string
+ count?: number
+ items: string[]
+}>()
+
+// With defaults (Vue 3.5+)
+const { title, count = 0 } = defineProps<{
+ title: string
+ count?: number
+}>()
+
+// With defaults (Vue 3.4 and below)
+const props = withDefaults(defineProps<{
+ title: string
+ items?: string[]
+}>(), {
+ items: () => [] // Use factory for arrays/objects
+})
+```
+
+## defineEmits
+
+Declare emitted events with typed payloads.
+
+```ts
+// Named tuple syntax (recommended)
+const emit = defineEmits<{
+ update: [value: string]
+ change: [id: number, name: string]
+ close: []
+}>()
+
+emit('update', 'new value')
+emit('change', 1, 'name')
+emit('close')
+```
+
+## defineModel
+
+Two-way binding prop consumed via `v-model`. Available in Vue 3.4+.
+
+```ts
+// Basic usage - creates "modelValue" prop
+const model = defineModel()
+model.value = 'hello' // Emits "update:modelValue"
+
+// Named model - consumed via v-model:name
+const count = defineModel('count', { default: 0 })
+
+// With modifiers
+const [value, modifiers] = defineModel()
+if (modifiers.trim) {
+ // Handle trim modifier
+}
+
+// With transformers
+const [value, modifiers] = defineModel({
+ get(val) { return val?.toLowerCase() },
+ set(val) { return modifiers.trim ? val?.trim() : val }
+})
+```
+
+Parent usage:
+```vue
+
+
+
+```
+
+## defineExpose
+
+Explicitly expose properties to parent via template refs. Components are closed by default.
+
+```ts
+import { ref } from 'vue'
+
+const count = ref(0)
+const reset = () => { count.value = 0 }
+
+defineExpose({
+ count,
+ reset
+})
+```
+
+Parent access:
+```ts
+const childRef = ref<{ count: number; reset: () => void }>()
+childRef.value?.reset()
+```
+
+## defineOptions
+
+Declare component options without a separate `
+```
+
+Multiple generics with constraints:
+```vue
+
+```
+
+## Local Custom Directives
+
+Use `vNameOfDirective` naming convention.
+
+```ts
+const vFocus = {
+ mounted: (el: HTMLElement) => el.focus()
+}
+
+// Or import and rename
+import { myDirective as vMyDirective } from './directives'
+```
+
+```vue
+
+
+
+```
+
+## Top-level await
+
+Use `await` directly in `
+```
+
+
diff --git a/.agents/skills/vueuse-functions/LICENSE.md b/.agents/skills/vueuse-functions/LICENSE.md
new file mode 100644
index 0000000..8a1060d
--- /dev/null
+++ b/.agents/skills/vueuse-functions/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SerKo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/.agents/skills/vueuse-functions/SKILL.md b/.agents/skills/vueuse-functions/SKILL.md
new file mode 100644
index 0000000..cb8cdb0
--- /dev/null
+++ b/.agents/skills/vueuse-functions/SKILL.md
@@ -0,0 +1,419 @@
+---
+name: vueuse-functions
+description: Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
+license: MIT
+metadata:
+ author: SerKo
+ version: "1.0"
+compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project
+---
+
+# VueUse Functions
+
+This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.
+
+## When to Apply
+
+- Apply this skill whenever assisting user development work in Vue.js / Nuxt.
+- Always check first whether a VueUse function can implement the requirement.
+- Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
+- Map requirements to the most appropriate VueUse function and follow the functionβs invocation rule.
+- Please refer to the `Invocation` field in the below functions table. For example:
+ - `AUTO`: Use automatically when applicable.
+ - `EXTERNAL`: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
+ - `EXPLICIT_ONLY`: Use only when explicitly requested by the user.
+ > *NOTE* User instructions in the prompt or `AGENTS.md` may override a functionβs default `Invocation` rule.
+
+## Functions
+
+All functions listed below are part of the [VueUse](https://vueuse.org/) library, each section categorizes functions based on their functionality.
+
+IMPORTANT: Each function entry includes a short `Description` and a detailed `Reference`. When using any function, always consult the corresponding document in `./references` for Usage details and Type Declarations.
+
+### State
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`createGlobalState`](references/createGlobalState.md) | Keep states in the global scope to be reusable across Vue instances | AUTO |
+| [`createInjectionState`](references/createInjectionState.md) | Create global state that can be injected into components | AUTO |
+| [`createSharedComposable`](references/createSharedComposable.md) | Make a composable function usable with multiple Vue instances | AUTO |
+| [`injectLocal`](references/injectLocal.md) | Extended `inject` with ability to call `provideLocal` to provide the value in the same component | AUTO |
+| [`provideLocal`](references/provideLocal.md) | Extended `provide` with ability to call `injectLocal` to obtain the value in the same component | AUTO |
+| [`useAsyncState`](references/useAsyncState.md) | Reactive async state | AUTO |
+| [`useDebouncedRefHistory`](references/useDebouncedRefHistory.md) | Shorthand for `useRefHistory` with debounced filter | AUTO |
+| [`useLastChanged`](references/useLastChanged.md) | Records the timestamp of the last change | AUTO |
+| [`useLocalStorage`](references/useLocalStorage.md) | Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) | AUTO |
+| [`useManualRefHistory`](references/useManualRefHistory.md) | Manually track the change history of a ref when the using calls `commit()` | AUTO |
+| [`useRefHistory`](references/useRefHistory.md) | Track the change history of a ref | AUTO |
+| [`useSessionStorage`](references/useSessionStorage.md) | Reactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO |
+| [`useStorage`](references/useStorage.md) | Create a reactive ref that can be used to access & modify [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO |
+| [`useStorageAsync`](references/useStorageAsync.md) | Reactive Storage in with async support | AUTO |
+| [`useThrottledRefHistory`](references/useThrottledRefHistory.md) | Shorthand for `useRefHistory` with throttled filter | AUTO |
+
+### Elements
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useActiveElement`](references/useActiveElement.md) | Reactive `document.activeElement` | AUTO |
+| [`useDocumentVisibility`](references/useDocumentVisibility.md) | Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState) | AUTO |
+| [`useDraggable`](references/useDraggable.md) | Make elements draggable | AUTO |
+| [`useDropZone`](references/useDropZone.md) | Create a zone where files can be dropped | AUTO |
+| [`useElementBounding`](references/useElementBounding.md) | Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element | AUTO |
+| [`useElementSize`](references/useElementSize.md) | Reactive size of an HTML element | AUTO |
+| [`useElementVisibility`](references/useElementVisibility.md) | Tracks the visibility of an element within the viewport | AUTO |
+| [`useIntersectionObserver`](references/useIntersectionObserver.md) | Detects that a target element's visibility | AUTO |
+| [`useMouseInElement`](references/useMouseInElement.md) | Reactive mouse position related to an element | AUTO |
+| [`useMutationObserver`](references/useMutationObserver.md) | Watch for changes being made to the DOM tree | AUTO |
+| [`useParentElement`](references/useParentElement.md) | Get parent element of the given element | AUTO |
+| [`useResizeObserver`](references/useResizeObserver.md) | Reports changes to the dimensions of an Element's content or the border-box | AUTO |
+| [`useWindowFocus`](references/useWindowFocus.md) | Reactively track window focus with `window.onfocus` and `window.onblur` events | AUTO |
+| [`useWindowScroll`](references/useWindowScroll.md) | Reactive window scroll | AUTO |
+| [`useWindowSize`](references/useWindowSize.md) | Reactive window size | AUTO |
+
+### Browser
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useBluetooth`](references/useBluetooth.md) | Reactive [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) | AUTO |
+| [`useBreakpoints`](references/useBreakpoints.md) | Reactive viewport breakpoints | AUTO |
+| [`useBroadcastChannel`](references/useBroadcastChannel.md) | Reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) | AUTO |
+| [`useBrowserLocation`](references/useBrowserLocation.md) | Reactive browser location | AUTO |
+| [`useClipboard`](references/useClipboard.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO |
+| [`useClipboardItems`](references/useClipboardItems.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO |
+| [`useColorMode`](references/useColorMode.md) | Reactive color mode (dark / light / customs) with auto data persistence | AUTO |
+| [`useCssSupports`](references/useCssSupports.md) | SSR compatible and reactive [`CSS.supports`](https://developer.mozilla.org/docs/Web/API/CSS/supports_static) | AUTO |
+| [`useCssVar`](references/useCssVar.md) | Manipulate CSS variables | AUTO |
+| [`useDark`](references/useDark.md) | Reactive dark mode with auto data persistence | AUTO |
+| [`useEventListener`](references/useEventListener.md) | Use EventListener with ease | AUTO |
+| [`useEyeDropper`](references/useEyeDropper.md) | Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) | AUTO |
+| [`useFavicon`](references/useFavicon.md) | Reactive favicon | AUTO |
+| [`useFileDialog`](references/useFileDialog.md) | Open file dialog with ease | AUTO |
+| [`useFileSystemAccess`](references/useFileSystemAccess.md) | Create and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) | AUTO |
+| [`useFullscreen`](references/useFullscreen.md) | Reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) | AUTO |
+| [`useGamepad`](references/useGamepad.md) | Provides reactive bindings for the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) | AUTO |
+| [`useImage`](references/useImage.md) | Reactive load an image in the browser | AUTO |
+| [`useMediaControls`](references/useMediaControls.md) | Reactive media controls for both `audio` and `video` elements | AUTO |
+| [`useMediaQuery`](references/useMediaQuery.md) | Reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) | AUTO |
+| [`useMemory`](references/useMemory.md) | Reactive Memory Info | AUTO |
+| [`useObjectUrl`](references/useObjectUrl.md) | Reactive URL representing an object | AUTO |
+| [`usePerformanceObserver`](references/usePerformanceObserver.md) | Observe performance metrics | AUTO |
+| [`usePermission`](references/usePermission.md) | Reactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) | AUTO |
+| [`usePreferredColorScheme`](references/usePreferredColorScheme.md) | Reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query | AUTO |
+| [`usePreferredContrast`](references/usePreferredContrast.md) | Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query | AUTO |
+| [`usePreferredDark`](references/usePreferredDark.md) | Reactive dark theme preference | AUTO |
+| [`usePreferredLanguages`](references/usePreferredLanguages.md) | Reactive [Navigator Languages](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages) | AUTO |
+| [`usePreferredReducedMotion`](references/usePreferredReducedMotion.md) | Reactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query | AUTO |
+| [`usePreferredReducedTransparency`](references/usePreferredReducedTransparency.md) | Reactive [prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query | AUTO |
+| [`useScreenOrientation`](references/useScreenOrientation.md) | Reactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API) | AUTO |
+| [`useScreenSafeArea`](references/useScreenSafeArea.md) | Reactive `env(safe-area-inset-*)` | AUTO |
+| [`useScriptTag`](references/useScriptTag.md) | Creates a script tag | AUTO |
+| [`useShare`](references/useShare.md) | Reactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) | AUTO |
+| [`useSSRWidth`](references/useSSRWidth.md) | Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like [`useMediaQuery`](../useMediaQuery/index.md) or [`useBreakpoints`](../useBreakpoints/index.md) | AUTO |
+| [`useStyleTag`](references/useStyleTag.md) | Inject reactive `style` element in head | AUTO |
+| [`useTextareaAutosize`](references/useTextareaAutosize.md) | Automatically update the height of a textarea depending on the content | AUTO |
+| [`useTextDirection`](references/useTextDirection.md) | Reactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text | AUTO |
+| [`useTitle`](references/useTitle.md) | Reactive document title | AUTO |
+| [`useUrlSearchParams`](references/useUrlSearchParams.md) | Reactive [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) | AUTO |
+| [`useVibrate`](references/useVibrate.md) | Reactive [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API) | AUTO |
+| [`useWakeLock`](references/useWakeLock.md) | Reactive [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) | AUTO |
+| [`useWebNotification`](references/useWebNotification.md) | Reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification) | AUTO |
+| [`useWebWorker`](references/useWebWorker.md) | Simple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) registration and communication | AUTO |
+| [`useWebWorkerFn`](references/useWebWorkerFn.md) | Run expensive functions without blocking the UI | AUTO |
+
+### Sensors
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`onClickOutside`](references/onClickOutside.md) | Listen for clicks outside of an element | AUTO |
+| [`onElementRemoval`](references/onElementRemoval.md) | Fires when the element or any element containing it is removed from the DOM | AUTO |
+| [`onKeyStroke`](references/onKeyStroke.md) | Listen for keyboard keystrokes | AUTO |
+| [`onLongPress`](references/onLongPress.md) | Listen for a long press on an element | AUTO |
+| [`onStartTyping`](references/onStartTyping.md) | Fires when users start typing on non-editable elements | AUTO |
+| [`useBattery`](references/useBattery.md) | Reactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) | AUTO |
+| [`useDeviceMotion`](references/useDeviceMotion.md) | Reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent) | AUTO |
+| [`useDeviceOrientation`](references/useDeviceOrientation.md) | Reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent) | AUTO |
+| [`useDevicePixelRatio`](references/useDevicePixelRatio.md) | Reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio) | AUTO |
+| [`useDevicesList`](references/useDevicesList.md) | Reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices | AUTO |
+| [`useDisplayMedia`](references/useDisplayMedia.md) | Reactive [`mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) streaming | AUTO |
+| [`useElementByPoint`](references/useElementByPoint.md) | Reactive element by point | AUTO |
+| [`useElementHover`](references/useElementHover.md) | Reactive element's hover state | AUTO |
+| [`useFocus`](references/useFocus.md) | Reactive utility to track or set the focus state of a DOM element | AUTO |
+| [`useFocusWithin`](references/useFocusWithin.md) | Reactive utility to track if an element or one of its decendants has focus | AUTO |
+| [`useFps`](references/useFps.md) | Reactive FPS (frames per second) | AUTO |
+| [`useGeolocation`](references/useGeolocation.md) | Reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) | AUTO |
+| [`useIdle`](references/useIdle.md) | Tracks whether the user is being inactive | AUTO |
+| [`useInfiniteScroll`](references/useInfiniteScroll.md) | Infinite scrolling of the element | AUTO |
+| [`useKeyModifier`](references/useKeyModifier.md) | Reactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) | AUTO |
+| [`useMagicKeys`](references/useMagicKeys.md) | Reactive keys pressed state | AUTO |
+| [`useMouse`](references/useMouse.md) | Reactive mouse position | AUTO |
+| [`useMousePressed`](references/useMousePressed.md) | Reactive mouse pressing state | AUTO |
+| [`useNavigatorLanguage`](references/useNavigatorLanguage.md) | Reactive [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language) | AUTO |
+| [`useNetwork`](references/useNetwork.md) | Reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) | AUTO |
+| [`useOnline`](references/useOnline.md) | Reactive online state | AUTO |
+| [`usePageLeave`](references/usePageLeave.md) | Reactive state to show whether the mouse leaves the page | AUTO |
+| [`useParallax`](references/useParallax.md) | Create parallax effect easily | AUTO |
+| [`usePointer`](references/usePointer.md) | Reactive [pointer state](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) | AUTO |
+| [`usePointerLock`](references/usePointerLock.md) | Reactive [pointer lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) | AUTO |
+| [`usePointerSwipe`](references/usePointerSwipe.md) | Reactive swipe detection based on [PointerEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | AUTO |
+| [`useScroll`](references/useScroll.md) | Reactive scroll position and state | AUTO |
+| [`useScrollLock`](references/useScrollLock.md) | Lock scrolling of the element | AUTO |
+| [`useSpeechRecognition`](references/useSpeechRecognition.md) | Reactive [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) | AUTO |
+| [`useSpeechSynthesis`](references/useSpeechSynthesis.md) | Reactive [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis) | AUTO |
+| [`useSwipe`](references/useSwipe.md) | Reactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) | AUTO |
+| [`useTextSelection`](references/useTextSelection.md) | Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) | AUTO |
+| [`useUserMedia`](references/useUserMedia.md) | Reactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming | AUTO |
+
+### Network
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useEventSource`](references/useEventSource.md) | An [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or [Server-Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) instance opens a persistent connection to an HTTP server | AUTO |
+| [`useFetch`](references/useFetch.md) | Reactive [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provides the ability to abort requests | AUTO |
+| [`useWebSocket`](references/useWebSocket.md) | Reactive [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket) client | AUTO |
+
+### Animation
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useAnimate`](references/useAnimate.md) | Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) | AUTO |
+| [`useInterval`](references/useInterval.md) | Reactive counter that increases on every interval | AUTO |
+| [`useIntervalFn`](references/useIntervalFn.md) | Wrapper for `setInterval` with controls | AUTO |
+| [`useNow`](references/useNow.md) | Reactive current Date instance | AUTO |
+| [`useRafFn`](references/useRafFn.md) | Call function on every `requestAnimationFrame` | AUTO |
+| [`useTimeout`](references/useTimeout.md) | Reactive value that becomes `true` after a given time | AUTO |
+| [`useTimeoutFn`](references/useTimeoutFn.md) | Wrapper for `setTimeout` with controls | AUTO |
+| [`useTimestamp`](references/useTimestamp.md) | Reactive current timestamp | AUTO |
+| [`useTransition`](references/useTransition.md) | Transition between values | AUTO |
+
+### Component
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`computedInject`](references/computedInject.md) | Combine `computed` and `inject` | AUTO |
+| [`createReusableTemplate`](references/createReusableTemplate.md) | Define and reuse template inside the component scope | AUTO |
+| [`createTemplatePromise`](references/createTemplatePromise.md) | Template as Promise | AUTO |
+| [`templateRef`](references/templateRef.md) | Shorthand for binding ref to template element | AUTO |
+| [`tryOnBeforeMount`](references/tryOnBeforeMount.md) | Safe `onBeforeMount` | AUTO |
+| [`tryOnBeforeUnmount`](references/tryOnBeforeUnmount.md) | Safe `onBeforeUnmount` | AUTO |
+| [`tryOnMounted`](references/tryOnMounted.md) | Safe `onMounted` | AUTO |
+| [`tryOnScopeDispose`](references/tryOnScopeDispose.md) | Safe `onScopeDispose` | AUTO |
+| [`tryOnUnmounted`](references/tryOnUnmounted.md) | Safe `onUnmounted` | AUTO |
+| [`unrefElement`](references/unrefElement.md) | Retrieves the underlying DOM element from a Vue ref or component instance | AUTO |
+| [`useCurrentElement`](references/useCurrentElement.md) | Get the DOM element of current component as a ref | AUTO |
+| [`useMounted`](references/useMounted.md) | Mounted state in ref | AUTO |
+| [`useTemplateRefsList`](references/useTemplateRefsList.md) | Shorthand for binding refs to template elements and components inside `v-for` | AUTO |
+| [`useVirtualList`](references/useVirtualList.md) | Create virtual lists with ease | AUTO |
+| [`useVModel`](references/useVModel.md) | Shorthand for v-model binding | AUTO |
+| [`useVModels`](references/useVModels.md) | Shorthand for props v-model binding | AUTO |
+
+### Watch
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`until`](references/until.md) | Promised one-time watch for changes | AUTO |
+| [`watchArray`](references/watchArray.md) | Watch for an array with additions and removals | AUTO |
+| [`watchAtMost`](references/watchAtMost.md) | `watch` with the number of times triggered | AUTO |
+| [`watchDebounced`](references/watchDebounced.md) | Debounced watch | AUTO |
+| [`watchDeep`](references/watchDeep.md) | Shorthand for watching value with `{deep: true}` | AUTO |
+| [`watchIgnorable`](references/watchIgnorable.md) | Ignorable watch | AUTO |
+| [`watchImmediate`](references/watchImmediate.md) | Shorthand for watching value with `{immediate: true}` | AUTO |
+| [`watchOnce`](references/watchOnce.md) | Shorthand for watching value with `{ once: true }` | AUTO |
+| [`watchPausable`](references/watchPausable.md) | Pausable watch | AUTO |
+| [`watchThrottled`](references/watchThrottled.md) | Throttled watch | AUTO |
+| [`watchTriggerable`](references/watchTriggerable.md) | Watch that can be triggered manually | AUTO |
+| [`watchWithFilter`](references/watchWithFilter.md) | `watch` with additional EventFilter control | AUTO |
+| [`whenever`](references/whenever.md) | Shorthand for watching value to be truthy | AUTO |
+
+### Reactivity
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`computedAsync`](references/computedAsync.md) | Computed for async functions | AUTO |
+| [`computedEager`](references/computedEager.md) | Eager computed without lazy evaluation | AUTO |
+| [`computedWithControl`](references/computedWithControl.md) | Explicitly define the dependencies of computed | AUTO |
+| [`createRef`](references/createRef.md) | Returns a `deepRef` or `shallowRef` depending on the `deep` param | AUTO |
+| [`extendRef`](references/extendRef.md) | Add extra attributes to Ref | AUTO |
+| [`reactify`](references/reactify.md) | Converts plain functions into reactive functions | AUTO |
+| [`reactifyObject`](references/reactifyObject.md) | Apply `reactify` to an object | AUTO |
+| [`reactiveComputed`](references/reactiveComputed.md) | Computed reactive object | AUTO |
+| [`reactiveOmit`](references/reactiveOmit.md) | Reactively omit fields from a reactive object | AUTO |
+| [`reactivePick`](references/reactivePick.md) | Reactively pick fields from a reactive object | AUTO |
+| [`refAutoReset`](references/refAutoReset.md) | A ref which will be reset to the default value after some time | AUTO |
+| [`refDebounced`](references/refDebounced.md) | Debounce execution of a ref value | AUTO |
+| [`refDefault`](references/refDefault.md) | Apply default value to a ref | AUTO |
+| [`refManualReset`](references/refManualReset.md) | Create a ref with manual reset functionality | AUTO |
+| [`refThrottled`](references/refThrottled.md) | Throttle changing of a ref value | AUTO |
+| [`refWithControl`](references/refWithControl.md) | Fine-grained controls over ref and its reactivity | AUTO |
+| [`syncRef`](references/syncRef.md) | Two-way refs synchronization | AUTO |
+| [`syncRefs`](references/syncRefs.md) | Keep target refs in sync with a source ref | AUTO |
+| [`toReactive`](references/toReactive.md) | Converts ref to reactive | AUTO |
+| [`toRef`](references/toRef.md) | Normalize value/ref/getter to `ref` or `computed` | EXPLICIT_ONLY |
+| [`toRefs`](references/toRefs.md) | Extended [`toRefs`](https://vuejs.org/api/reactivity-utilities.html#torefs) that also accepts refs of an object | AUTO |
+
+### Array
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useArrayDifference`](references/useArrayDifference.md) | Reactive get array difference of two arrays | AUTO |
+| [`useArrayEvery`](references/useArrayEvery.md) | Reactive `Array.every` | AUTO |
+| [`useArrayFilter`](references/useArrayFilter.md) | Reactive `Array.filter` | AUTO |
+| [`useArrayFind`](references/useArrayFind.md) | Reactive `Array.find` | AUTO |
+| [`useArrayFindIndex`](references/useArrayFindIndex.md) | Reactive `Array.findIndex` | AUTO |
+| [`useArrayFindLast`](references/useArrayFindLast.md) | Reactive `Array.findLast` | AUTO |
+| [`useArrayIncludes`](references/useArrayIncludes.md) | Reactive `Array.includes` | AUTO |
+| [`useArrayJoin`](references/useArrayJoin.md) | Reactive `Array.join` | AUTO |
+| [`useArrayMap`](references/useArrayMap.md) | Reactive `Array.map` | AUTO |
+| [`useArrayReduce`](references/useArrayReduce.md) | Reactive `Array.reduce` | AUTO |
+| [`useArraySome`](references/useArraySome.md) | Reactive `Array.some` | AUTO |
+| [`useArrayUnique`](references/useArrayUnique.md) | Reactive unique array | AUTO |
+| [`useSorted`](references/useSorted.md) | Reactive sort array | AUTO |
+
+### Time
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useCountdown`](references/useCountdown.md) | Reactive countdown timer in seconds | AUTO |
+| [`useDateFormat`](references/useDateFormat.md) | Get the formatted date according to the string of tokens passed in | AUTO |
+| [`useTimeAgo`](references/useTimeAgo.md) | Reactive time ago | AUTO |
+| [`useTimeAgoIntl`](references/useTimeAgoIntl.md) | Reactive time ago with i18n supported | AUTO |
+
+### Utilities
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`createEventHook`](references/createEventHook.md) | Utility for creating event hooks | AUTO |
+| [`createUnrefFn`](references/createUnrefFn.md) | Make a plain function accepting ref and raw values as arguments | AUTO |
+| [`get`](references/get.md) | Shorthand for accessing `ref.value` | EXPLICIT_ONLY |
+| [`isDefined`](references/isDefined.md) | Non-nullish checking type guard for Ref | AUTO |
+| [`makeDestructurable`](references/makeDestructurable.md) | Make isomorphic destructurable for object and array at the same time | AUTO |
+| [`set`](references/set.md) | Shorthand for `ref.value = x` | EXPLICIT_ONLY |
+| [`useAsyncQueue`](references/useAsyncQueue.md) | Executes each asynchronous task sequentially and passes the current task result to the next task | AUTO |
+| [`useBase64`](references/useBase64.md) | Reactive base64 transforming | AUTO |
+| [`useCached`](references/useCached.md) | Cache a ref with a custom comparator | AUTO |
+| [`useCloned`](references/useCloned.md) | Reactive clone of a ref | AUTO |
+| [`useConfirmDialog`](references/useConfirmDialog.md) | Creates event hooks to support modals and confirmation dialog chains | AUTO |
+| [`useCounter`](references/useCounter.md) | Basic counter with utility functions | AUTO |
+| [`useCycleList`](references/useCycleList.md) | Cycle through a list of items | AUTO |
+| [`useDebounceFn`](references/useDebounceFn.md) | Debounce execution of a function | AUTO |
+| [`useEventBus`](references/useEventBus.md) | A basic event bus | AUTO |
+| [`useMemoize`](references/useMemoize.md) | Cache results of functions depending on arguments and keep it reactive | AUTO |
+| [`useOffsetPagination`](references/useOffsetPagination.md) | Reactive offset pagination | AUTO |
+| [`usePrevious`](references/usePrevious.md) | Holds the previous value of a ref | AUTO |
+| [`useStepper`](references/useStepper.md) | Provides helpers for building a multi-step wizard interface | AUTO |
+| [`useSupported`](references/useSupported.md) | SSR compatibility `isSupported` | AUTO |
+| [`useThrottleFn`](references/useThrottleFn.md) | Throttle execution of a function | AUTO |
+| [`useTimeoutPoll`](references/useTimeoutPoll.md) | Use timeout to poll something | AUTO |
+| [`useToggle`](references/useToggle.md) | A boolean switcher with utility functions | AUTO |
+| [`useToNumber`](references/useToNumber.md) | Reactively convert a string ref to number | AUTO |
+| [`useToString`](references/useToString.md) | Reactively convert a ref to string | AUTO |
+
+### @Electron
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useIpcRenderer`](references/useIpcRenderer.md) | Provides [ipcRenderer](https://www.electronjs.org/docs/api/ipc-renderer) and all of its APIs with Vue reactivity | EXTERNAL |
+| [`useIpcRendererInvoke`](references/useIpcRendererInvoke.md) | Reactive [ipcRenderer.invoke API](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args) result | EXTERNAL |
+| [`useIpcRendererOn`](references/useIpcRendererOn.md) | Use [ipcRenderer.on](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener) with ease and [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted | EXTERNAL |
+| [`useZoomFactor`](references/useZoomFactor.md) | Reactive [WebFrame](https://www.electronjs.org/docs/api/web-frame#webframe) zoom factor | EXTERNAL |
+| [`useZoomLevel`](references/useZoomLevel.md) | Reactive [WebFrame](https://www.electronjs.org/docs/api/web-frame#webframe) zoom level | EXTERNAL |
+
+### @Firebase
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useAuth`](references/useAuth.md) | Reactive [Firebase Auth](https://firebase.google.com/docs/auth) binding | EXTERNAL |
+| [`useFirestore`](references/useFirestore.md) | Reactive [Firestore](https://firebase.google.com/docs/firestore) binding | EXTERNAL |
+| [`useRTDB`](references/useRTDB.md) | Reactive [Firebase Realtime Database](https://firebase.google.com/docs/database) binding | EXTERNAL |
+
+### @Head
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`createHead`](https://github.com/vueuse/head#api) | Create the head manager instance. | EXTERNAL |
+| [`useHead`](https://github.com/vueuse/head#api) | Update head meta tags reactively. | EXTERNAL |
+
+### @Integrations
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useAsyncValidator`](references/useAsyncValidator.md) | Wrapper for [`async-validator`](https://github.com/yiminghe/async-validator) | EXTERNAL |
+| [`useAxios`](references/useAxios.md) | Wrapper for [`axios`](https://github.com/axios/axios) | EXTERNAL |
+| [`useChangeCase`](references/useChangeCase.md) | Reactive wrapper for [`change-case`](https://github.com/blakeembrey/change-case) | EXTERNAL |
+| [`useCookies`](references/useCookies.md) | Wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie) | EXTERNAL |
+| [`useDrauu`](references/useDrauu.md) | Reactive instance for [drauu](https://github.com/antfu/drauu) | EXTERNAL |
+| [`useFocusTrap`](references/useFocusTrap.md) | Reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap) | EXTERNAL |
+| [`useFuse`](references/useFuse.md) | Easily implement fuzzy search using a composable with [Fuse.js](https://github.com/krisk/fuse) | EXTERNAL |
+| [`useIDBKeyval`](references/useIDBKeyval.md) | Wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval) | EXTERNAL |
+| [`useJwt`](references/useJwt.md) | Wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode) | EXTERNAL |
+| [`useNProgress`](references/useNProgress.md) | Reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress) | EXTERNAL |
+| [`useQRCode`](references/useQRCode.md) | Wrapper for [`qrcode`](https://github.com/soldair/node-qrcode) | EXTERNAL |
+| [`useSortable`](references/useSortable.md) | Wrapper for [`sortable`](https://github.com/SortableJS/Sortable) | EXTERNAL |
+
+### @Math
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`createGenericProjection`](references/createGenericProjection.md) | Generic version of `createProjection` | EXTERNAL |
+| [`createProjection`](references/createProjection.md) | Reactive numeric projection from one domain to another | EXTERNAL |
+| [`logicAnd`](references/logicAnd.md) | `AND` condition for refs | EXTERNAL |
+| [`logicNot`](references/logicNot.md) | `NOT` condition for ref | EXTERNAL |
+| [`logicOr`](references/logicOr.md) | `OR` conditions for refs | EXTERNAL |
+| [`useAbs`](references/useAbs.md) | Reactive `Math.abs` | EXTERNAL |
+| [`useAverage`](references/useAverage.md) | Get the average of an array reactively | EXTERNAL |
+| [`useCeil`](references/useCeil.md) | Reactive `Math.ceil` | EXTERNAL |
+| [`useClamp`](references/useClamp.md) | Reactively clamp a value between two other values | EXTERNAL |
+| [`useFloor`](references/useFloor.md) | Reactive `Math.floor` | EXTERNAL |
+| [`useMath`](references/useMath.md) | Reactive `Math` methods | EXTERNAL |
+| [`useMax`](references/useMax.md) | Reactive `Math.max` | EXTERNAL |
+| [`useMin`](references/useMin.md) | Reactive `Math.min` | EXTERNAL |
+| [`usePrecision`](references/usePrecision.md) | Reactively set the precision of a number | EXTERNAL |
+| [`useProjection`](references/useProjection.md) | Reactive numeric projection from one domain to another | EXTERNAL |
+| [`useRound`](references/useRound.md) | Reactive `Math.round` | EXTERNAL |
+| [`useSum`](references/useSum.md) | Get the sum of an array reactively | EXTERNAL |
+| [`useTrunc`](references/useTrunc.md) | Reactive `Math.trunc` | EXTERNAL |
+
+### @Motion
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useElementStyle`](https://motion.vueuse.org/api/use-element-style) | Sync a reactive object to a target element CSS styling | EXTERNAL |
+| [`useElementTransform`](https://motion.vueuse.org/api/use-element-transform) | Sync a reactive object to a target element CSS transform. | EXTERNAL |
+| [`useMotion`](https://motion.vueuse.org/api/use-motion) | Putting your components in motion. | EXTERNAL |
+| [`useMotionProperties`](https://motion.vueuse.org/api/use-motion-properties) | Access Motion Properties for a target element. | EXTERNAL |
+| [`useMotionVariants`](https://motion.vueuse.org/api/use-motion-variants) | Handle the Variants state and selection. | EXTERNAL |
+| [`useSpring`](https://motion.vueuse.org/api/use-spring) | Spring animations. | EXTERNAL |
+
+### @Router
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useRouteHash`](references/useRouteHash.md) | Shorthand for a reactive `route.hash` | EXTERNAL |
+| [`useRouteParams`](references/useRouteParams.md) | Shorthand for a reactive `route.params` | EXTERNAL |
+| [`useRouteQuery`](references/useRouteQuery.md) | Shorthand for a reactive `route.query` | EXTERNAL |
+
+### @RxJS
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`from`](references/from.md) | Wrappers around RxJS's [`from()`](https://rxjs.dev/api/index/function/from) and [`fromEvent()`](https://rxjs.dev/api/index/function/fromEvent) to allow them to accept `ref`s | EXTERNAL |
+| [`toObserver`](references/toObserver.md) | Sugar function to convert a `ref` into an RxJS [Observer](https://rxjs.dev/guide/observer) | EXTERNAL |
+| [`useExtractedObservable`](references/useExtractedObservable.md) | Use an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables | EXTERNAL |
+| [`useObservable`](references/useObservable.md) | Use an RxJS [`Observable`](https://rxjs.dev/guide/observable) | EXTERNAL |
+| [`useSubject`](references/useSubject.md) | Bind an RxJS [`Subject`](https://rxjs.dev/guide/subject) to a `ref` and propagate value changes both ways | EXTERNAL |
+| [`useSubscription`](references/useSubscription.md) | Use an RxJS [`Subscription`](https://rxjs.dev/guide/subscription) without worrying about unsubscribing from it or creating memory leaks | EXTERNAL |
+| [`watchExtractedObservable`](references/watchExtractedObservable.md) | Watch the values of an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables | EXTERNAL |
+
+### @SchemaOrg
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`createSchemaOrg`](https://vue-schema-org.netlify.app/api/core/create-schema-org.html) | Create the schema.org manager instance. | EXTERNAL |
+| [`useSchemaOrg`](https://vue-schema-org.netlify.app/api/core/use-schema-org.html) | Update schema.org reactively. | EXTERNAL |
+
+### @Sound
+
+| Function | Description | Invocation |
+|----------|-------------|------------|
+| [`useSound`](https://github.com/vueuse/sound#examples) | Play sound effects reactively. | EXTERNAL |
+
+
diff --git a/.agents/skills/vueuse-functions/SYNC.md b/.agents/skills/vueuse-functions/SYNC.md
new file mode 100644
index 0000000..b818d1b
--- /dev/null
+++ b/.agents/skills/vueuse-functions/SYNC.md
@@ -0,0 +1,5 @@
+# Sync Info
+
+- **Source:** `vendor/vueuse/skills/vueuse-functions`
+- **Git SHA:** `075b0d6d558cc5ca7d5ffe72a56b5fd92bbef2d1`
+- **Synced:** 2026-03-16
diff --git a/.agents/skills/vueuse-functions/references/computedAsync.md b/.agents/skills/vueuse-functions/references/computedAsync.md
new file mode 100644
index 0000000..34059d0
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/computedAsync.md
@@ -0,0 +1,195 @@
+---
+category: Reactivity
+alias: asyncComputed
+---
+
+# computedAsync
+
+Computed for async functions.
+
+## Usage
+
+```ts
+import { computedAsync } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const name = shallowRef('jack')
+
+const userInfo = computedAsync(
+ async () => {
+ return await mockLookUp(name.value)
+ },
+ null, // initial state
+)
+```
+
+### Evaluation State
+
+Pass a ref to track if the async function is currently evaluating.
+
+```ts
+import { computedAsync } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const evaluating = shallowRef(false)
+
+const userInfo = computedAsync(
+ async () => { /* your logic */ },
+ null,
+ evaluating, // can also be passed via options: { evaluating }
+)
+```
+
+### onCancel
+
+When the computed source changes before the previous async function resolves, you may want to cancel the previous one. Here is an example showing how to incorporate with the fetch API.
+
+```ts
+import { computedAsync } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const packageName = shallowRef('@vueuse/core')
+
+const downloads = computedAsync(async (onCancel) => {
+ const abortController = new AbortController()
+
+ onCancel(() => abortController.abort())
+
+ return await fetch(
+ `https://api.npmjs.org/downloads/point/last-week/${packageName.value}`,
+ { signal: abortController.signal },
+ )
+ .then(response => response.ok ? response.json() : { downloads: 'β' })
+ .then(result => result.downloads)
+}, 0)
+```
+
+### Lazy
+
+By default, `computedAsync` will start resolving immediately on creation. Specify `lazy: true` to make it start resolving on the first access.
+
+```ts
+import { computedAsync } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const evaluating = shallowRef(false)
+
+const userInfo = computedAsync(
+ async () => { /* your logic */ },
+ null,
+ { lazy: true, evaluating },
+)
+```
+
+### Error Handling
+
+Use the `onError` callback to handle errors from the async function.
+
+```ts
+import { computedAsync } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const name = shallowRef('jack')
+
+const userInfo = computedAsync(
+ async () => {
+ return await mockLookUp(name.value)
+ },
+ null,
+ {
+ onError(e) {
+ console.error('Failed to fetch user info', e)
+ },
+ },
+)
+```
+
+### Shallow Ref
+
+By default, `computedAsync` uses `shallowRef` internally. Set `shallow: false` to use a deep ref instead.
+
+```ts
+import { computedAsync } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const name = shallowRef('jack')
+
+const userInfo = computedAsync(
+ async () => {
+ return await fetchNestedData(name.value)
+ },
+ null,
+ { shallow: false }, // enables deep reactivity
+)
+```
+
+## Caveats
+
+- Just like Vue's built-in `computed` function, `computedAsync` does dependency tracking and is automatically re-evaluated when dependencies change. Note however that only dependencies referenced in the first call stack are considered for this. In other words: **Dependencies that are accessed asynchronously will not trigger re-evaluation of the async computed value.**
+
+- As opposed to Vue's built-in `computed` function, re-evaluation of the async computed value is triggered whenever dependencies are changing, regardless of whether its result is currently being tracked or not.
+
+## Type Declarations
+
+```ts
+/**
+ * Handle overlapping async evaluations.
+ *
+ * @param cancelCallback The provided callback is invoked when a re-evaluation of the computed value is triggered before the previous one finished
+ */
+export type AsyncComputedOnCancel = (cancelCallback: Fn) => void
+export interface AsyncComputedOptions<
+ Lazy = boolean,
+> extends ConfigurableFlushSync {
+ /**
+ * Should value be evaluated lazily
+ *
+ * @default false
+ */
+ lazy?: Lazy
+ /**
+ * Ref passed to receive the updated of async evaluation
+ */
+ evaluating?: Ref
+ /**
+ * Use shallowRef
+ *
+ * @default true
+ */
+ shallow?: boolean
+ /**
+ * Callback when error is caught.
+ */
+ onError?: (e: unknown) => void
+}
+/**
+ * Create an asynchronous computed dependency.
+ *
+ * @see https://vueuse.org/computedAsync
+ * @param evaluationCallback The promise-returning callback which generates the computed value
+ * @param initialState The initial state, used until the first evaluation finishes
+ * @param optionsOrRef Additional options or a ref passed to receive the updates of the async evaluation
+ */
+export declare function computedAsync(
+ evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise,
+ initialState: T,
+ optionsOrRef: AsyncComputedOptions,
+): ComputedRef
+export declare function computedAsync(
+ evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise,
+ initialState: undefined,
+ optionsOrRef: AsyncComputedOptions,
+): ComputedRef
+export declare function computedAsync(
+ evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise,
+ initialState: T,
+ optionsOrRef?: Ref | AsyncComputedOptions,
+): Ref
+export declare function computedAsync(
+ evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise,
+ initialState?: undefined,
+ optionsOrRef?: Ref | AsyncComputedOptions,
+): Ref
+/** @deprecated use `computedAsync` instead */
+export declare const asyncComputed: typeof computedAsync
+```
diff --git a/.agents/skills/vueuse-functions/references/computedEager.md b/.agents/skills/vueuse-functions/references/computedEager.md
new file mode 100644
index 0000000..225dc9a
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/computedEager.md
@@ -0,0 +1,62 @@
+---
+category: Reactivity
+alias: eagerComputed
+---
+
+# computedEager
+
+Eager computed without lazy evaluation.
+
+::: info
+This function will be removed in future version.
+:::
+
+::: tip
+Noteπ‘: If you are using Vue 3.4+, you can use `computed` right away, you no longer need this function.
+In Vue 3.4+, if the computed new value does not change, `computed`, `effect`, `watch`, `watchEffect`, `render` dependencies will not be triggered.
+See: https://github.com/vuejs/core/pull/5912
+:::
+
+Learn more at [Vue: When a computed property can be the wrong tool](https://dev.to/linusborg/vue-when-a-computed-property-can-be-the-wrong-tool-195j).
+
+- Use `computed()` when you have a complex calculation going on, which can actually profit from caching and lazy evaluation and should only be (re-)calculated if really necessary.
+- Use `computedEager()` when you have a simple operation, with a rarely changing return value β often a boolean.
+
+## Usage
+
+```ts
+import { computedEager } from '@vueuse/core'
+
+const todos = ref([])
+const hasOpenTodos = computedEager(() => !!todos.length)
+
+console.log(hasOpenTodos.value) // false
+toTodos.value.push({ title: 'Learn Vue' })
+console.log(hasOpenTodos.value) // true
+```
+
+## Type Declarations
+
+```ts
+export type ComputedEagerOptions = WatchOptionsBase
+export type ComputedEagerReturn = Readonly>
+/**
+ *
+ * @deprecated This function will be removed in future version.
+ *
+ * Note: If you are using Vue 3.4+, you can straight use computed instead.
+ * Because in Vue 3.4+, if computed new value does not change,
+ * computed, effect, watch, watchEffect, render dependencies will not be triggered.
+ * refer: https://github.com/vuejs/core/pull/5912
+ *
+ * @param fn effect function
+ * @param options WatchOptionsBase
+ * @returns readonly shallowRef
+ */
+export declare function computedEager(
+ fn: () => T,
+ options?: ComputedEagerOptions,
+): ComputedEagerReturn
+/** @deprecated use `computedEager` instead */
+export declare const eagerComputed: typeof computedEager
+```
diff --git a/.agents/skills/vueuse-functions/references/computedInject.md b/.agents/skills/vueuse-functions/references/computedInject.md
new file mode 100644
index 0000000..5e01016
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/computedInject.md
@@ -0,0 +1,137 @@
+---
+category: Component
+---
+
+# computedInject
+
+Combine `computed` and `inject`. Useful for creating a computed property based on an injected value.
+
+## Usage
+
+In Provider Component
+
+```ts twoslash include main
+import type { InjectionKey, Ref } from 'vue'
+import { provide, ref } from 'vue'
+
+interface Item {
+ key: number
+ value: string
+}
+
+export const ArrayKey: InjectionKey> = Symbol('symbol-key')
+
+const array = ref([{ key: 1, value: '1' }, { key: 2, value: '2' }, { key: 3, value: '3' }])
+
+provide(ArrayKey, array)
+```
+
+In Receiver Component
+
+```ts
+// @filename: provider.ts
+// @include: main
+// ---cut---
+import { computedInject } from '@vueuse/core'
+
+import { ArrayKey } from './provider'
+
+const computedArray = computedInject(ArrayKey, (source) => {
+ const arr = [...source.value]
+ arr.unshift({ key: 0, value: 'all' })
+ return arr
+})
+```
+
+### Default Value
+
+You can provide a default value that will be used if the injection key is not provided by a parent component.
+
+```ts
+import { computedInject } from '@vueuse/core'
+
+const computedArray = computedInject(
+ ArrayKey,
+ (source) => {
+ return source.value.map(item => item.value)
+ },
+ ref([]), // default source value
+)
+```
+
+### Factory Default
+
+Pass `true` as the fourth argument to treat the default value as a factory function.
+
+```ts
+import { computedInject } from '@vueuse/core'
+
+const computedArray = computedInject(
+ ArrayKey,
+ (source) => {
+ return source.value.map(item => item.value)
+ },
+ () => ref([]), // factory function for default
+ true, // treat default as factory
+)
+```
+
+### Writable Computed
+
+You can also create a writable computed property by passing an object with `get` and `set` functions.
+
+```ts
+import { computedInject } from '@vueuse/core'
+
+const computedArray = computedInject(ArrayKey, {
+ get(source) {
+ return source.value.map(item => item.value)
+ },
+ set(value) {
+ // handle setting the value
+ console.log('Setting value:', value)
+ },
+})
+```
+
+## Type Declarations
+
+```ts
+export type ComputedInjectGetter = (
+ source: T | undefined,
+ oldValue?: K,
+) => K
+export type ComputedInjectGetterWithDefault = (
+ source: T,
+ oldValue?: K,
+) => K
+export type ComputedInjectSetter = (v: T) => void
+export interface WritableComputedInjectOptions {
+ get: ComputedInjectGetter
+ set: ComputedInjectSetter
+}
+export interface WritableComputedInjectOptionsWithDefault {
+ get: ComputedInjectGetterWithDefault
+ set: ComputedInjectSetter
+}
+export declare function computedInject(
+ key: InjectionKey | string,
+ getter: ComputedInjectGetter,
+): ComputedRef
+export declare function computedInject(
+ key: InjectionKey | string,
+ options: WritableComputedInjectOptions,
+): ComputedRef
+export declare function computedInject(
+ key: InjectionKey | string,
+ getter: ComputedInjectGetterWithDefault,
+ defaultSource: T,
+ treatDefaultAsFactory?: false,
+): ComputedRef
+export declare function computedInject(
+ key: InjectionKey | string,
+ options: WritableComputedInjectOptionsWithDefault,
+ defaultSource: T | (() => T),
+ treatDefaultAsFactory: true,
+): ComputedRef
+```
diff --git a/.agents/skills/vueuse-functions/references/computedWithControl.md b/.agents/skills/vueuse-functions/references/computedWithControl.md
new file mode 100644
index 0000000..59e9704
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/computedWithControl.md
@@ -0,0 +1,98 @@
+---
+category: Reactivity
+alias: controlledComputed
+---
+
+# computedWithControl
+
+Explicitly define the dependencies of computed.
+
+## Usage
+
+```ts twoslash include main
+import { computedWithControl } from '@vueuse/core'
+
+const source = ref('foo')
+const counter = ref(0)
+
+const computedRef = computedWithControl(
+ () => source.value, // watch source, same as `watch`
+ () => counter.value, // computed getter, same as `computed`
+)
+```
+
+With this, the changes of `counter` won't trigger `computedRef` to update but the `source` ref does.
+
+```ts
+// @include: main
+// ---cut---
+console.log(computedRef.value) // 0
+
+counter.value += 1
+
+console.log(computedRef.value) // 0
+
+source.value = 'bar'
+
+console.log(computedRef.value) // 1
+```
+
+### Manual Triggering
+
+You can also manually trigger the update of the computed by:
+
+```ts
+// @include: main
+// ---cut---
+const computedRef = computedWithControl(
+ () => source.value,
+ () => counter.value,
+)
+
+computedRef.trigger()
+```
+
+### Deep Watch
+
+Unlike `computed`, `computedWithControl` is shallow by default.
+You can specify the same options as `watch` to control the behavior:
+
+```ts
+const source = ref({ name: 'foo' })
+
+const computedRef = computedWithControl(
+ source,
+ () => counter.value,
+ { deep: true },
+)
+```
+
+## Type Declarations
+
+```ts
+export interface ComputedWithControlRefExtra {
+ /**
+ * Force update the computed value.
+ */
+ trigger: () => void
+}
+export interface ComputedRefWithControl
+ extends ComputedRef, ComputedWithControlRefExtra {}
+export interface WritableComputedRefWithControl
+ extends WritableComputedRef, ComputedWithControlRefExtra {}
+export type ComputedWithControlRef =
+ | ComputedRefWithControl
+ | WritableComputedRefWithControl
+export declare function computedWithControl(
+ source: WatchSource | MultiWatchSources,
+ fn: ComputedGetter,
+ options?: WatchOptions,
+): ComputedRefWithControl
+export declare function computedWithControl(
+ source: WatchSource | MultiWatchSources,
+ fn: WritableComputedOptions,
+ options?: WatchOptions,
+): WritableComputedRefWithControl
+/** @deprecated use `computedWithControl` instead */
+export declare const controlledComputed: typeof computedWithControl
+```
diff --git a/.agents/skills/vueuse-functions/references/createEventHook.md b/.agents/skills/vueuse-functions/references/createEventHook.md
new file mode 100644
index 0000000..a01f218
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createEventHook.md
@@ -0,0 +1,86 @@
+---
+category: Utilities
+---
+
+# createEventHook
+
+Utility for creating event hooks
+
+## Usage
+
+Creating a function that uses `createEventHook`
+
+```ts
+import { createEventHook } from '@vueuse/core'
+
+export function useMyFetch(url) {
+ const fetchResult = createEventHook()
+ const fetchError = createEventHook()
+
+ fetch(url)
+ .then(result => fetchResult.trigger(result))
+ .catch(error => fetchError.trigger(error.message))
+
+ return {
+ onResult: fetchResult.on,
+ onError: fetchError.on,
+ }
+}
+```
+
+Using a function that uses `createEventHook`
+
+```vue
+
+```
+
+## Type Declarations
+
+```ts
+/**
+ * The source code for this function was inspired by vue-apollo's `useEventHook` util
+ * https://github.com/vuejs/vue-apollo/blob/v4/packages/vue-apollo-composable/src/util/useEventHook.ts
+ */
+type Callback =
+ IsAny extends true
+ ? (...param: any) => void
+ : [T] extends [void]
+ ? (...param: unknown[]) => void
+ : [T] extends [any[]]
+ ? (...param: T) => void
+ : (...param: [T, ...unknown[]]) => void
+export type EventHookOn = (fn: Callback) => {
+ off: () => void
+}
+export type EventHookOff = (fn: Callback) => void
+export type EventHookTrigger = (
+ ...param: Parameters>
+) => Promise
+export interface EventHook {
+ on: EventHookOn
+ off: EventHookOff
+ trigger: EventHookTrigger
+ clear: () => void
+}
+export type EventHookReturn = EventHook
+/**
+ * Utility for creating event hooks
+ *
+ * @see https://vueuse.org/createEventHook
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createEventHook(): EventHookReturn
+```
diff --git a/.agents/skills/vueuse-functions/references/createGenericProjection.md b/.agents/skills/vueuse-functions/references/createGenericProjection.md
new file mode 100644
index 0000000..c452031
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createGenericProjection.md
@@ -0,0 +1,25 @@
+---
+category: '@Math'
+---
+
+# createGenericProjection
+
+Generic version of `createProjection`. Accepts a custom projector function to map arbitrary type of domains.
+
+Refer to `createProjection` and `useProjection`
+
+## Type Declarations
+
+```ts
+export type ProjectorFunction = (
+ input: F,
+ from: readonly [F, F],
+ to: readonly [T, T],
+) => T
+export type UseProjection = (input: MaybeRefOrGetter) => ComputedRef
+export declare function createGenericProjection(
+ fromDomain: MaybeRefOrGetter,
+ toDomain: MaybeRefOrGetter,
+ projector: ProjectorFunction,
+): UseProjection
+```
diff --git a/.agents/skills/vueuse-functions/references/createGlobalState.md b/.agents/skills/vueuse-functions/references/createGlobalState.md
new file mode 100644
index 0000000..d0909fc
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createGlobalState.md
@@ -0,0 +1,95 @@
+---
+category: State
+related: createSharedComposable
+---
+
+# createGlobalState
+
+Keep states in the global scope to be reusable across Vue instances.
+
+## Usage
+
+### Without Persistence (Store in Memory)
+
+```ts
+// store.ts
+import { createGlobalState } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+export const useGlobalState = createGlobalState(
+ () => {
+ const count = shallowRef(0)
+ return { count }
+ }
+)
+```
+
+A bigger example:
+
+```ts
+// store.ts
+import { createGlobalState } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+export const useGlobalState = createGlobalState(
+ () => {
+ // state
+ const count = shallowRef(0)
+
+ // getters
+ const doubleCount = computed(() => count.value * 2)
+
+ // actions
+ function increment() {
+ count.value++
+ }
+
+ return { count, doubleCount, increment }
+ }
+)
+```
+
+### With Persistence
+
+Store in `localStorage` with `useStorage`:
+
+```ts twoslash include store
+// store.ts
+import { createGlobalState, useStorage } from '@vueuse/core'
+
+export const useGlobalState = createGlobalState(
+ () => useStorage('vueuse-local-storage', 'initialValue'),
+)
+```
+
+```ts
+// @filename: store.ts
+// @include: store
+// ---cut---
+// component.ts
+import { useGlobalState } from './store'
+
+export default defineComponent({
+ setup() {
+ const state = useGlobalState()
+ return { state }
+ },
+})
+```
+
+## Type Declarations
+
+```ts
+export type CreateGlobalStateReturn = Fn
+/**
+ * Keep states in the global scope to be reusable across Vue instances.
+ *
+ * @see https://vueuse.org/createGlobalState
+ * @param stateFactory A factory function to create the state
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createGlobalState(
+ stateFactory: Fn,
+): CreateGlobalStateReturn
+```
diff --git a/.agents/skills/vueuse-functions/references/createInjectionState.md b/.agents/skills/vueuse-functions/references/createInjectionState.md
new file mode 100644
index 0000000..5aa7331
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createInjectionState.md
@@ -0,0 +1,215 @@
+---
+category: State
+---
+
+# createInjectionState
+
+Create global state that can be injected into components.
+
+## Usage
+
+```ts twoslash include useCounterStore
+// useCounterStore.ts
+import { createInjectionState } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
+ // state
+ const count = shallowRef(initialValue)
+
+ // getters
+ const double = computed(() => count.value * 2)
+
+ // actions
+ function increment() {
+ count.value++
+ }
+
+ return { count, double, increment }
+})
+
+export { useProvideCounterStore }
+
+// If you want to hide `useCounterStore` and wrap it in default value logic or throw error logic, please don't export `useCounterStore`
+export { useCounterStore }
+
+export function useCounterStoreWithDefaultValue() {
+ return useCounterStore() ?? {
+ count: shallowRef(0),
+ double: shallowRef(0),
+ increment: () => {},
+ }
+}
+
+export function useCounterStoreOrThrow() {
+ const counterStore = useCounterStore()
+ if (counterStore == null)
+ throw new Error('Please call `useProvideCounterStore` on the appropriate parent component')
+ return counterStore
+}
+```
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+```vue
+
+
+
+
+
+ -
+ count: {{ count }}
+
+ -
+ double: {{ double }}
+
+
+
+```
+
+```vue
+
+
+
+
+
+
+```
+
+## Provide a custom InjectionKey
+
+```ts
+// useCounterStore.ts
+import { createInjectionState } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+// custom injectionKey
+const CounterStoreKey = 'counter-store'
+
+const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
+ // state
+ const count = shallowRef(initialValue)
+
+ // getters
+ const double = computed(() => count.value * 2)
+
+ // actions
+ function increment() {
+ count.value++
+ }
+
+ return { count, double, increment }
+}, { injectionKey: CounterStoreKey })
+```
+
+## Provide a custom default value
+
+```ts
+// useCounterStore.ts
+import { createInjectionState } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
+ // state
+ const count = shallowRef(initialValue)
+
+ // getters
+ const double = computed(() => count.value * 2)
+
+ // actions
+ function increment() {
+ count.value++
+ }
+
+ return { count, double, increment }
+}, { defaultValue: 0 })
+```
+
+## Type Declarations
+
+```ts
+export type CreateInjectionStateReturn<
+ Arguments extends Array,
+ Return,
+> = Readonly<
+ [
+ /**
+ * Call this function in a provider component to create and provide the state.
+ *
+ * @param args Arguments passed to the composable
+ * @returns The state returned by the composable
+ */
+ useProvidingState: (...args: Arguments) => Return,
+ /**
+ * Call this function in a consumer component to inject the state.
+ *
+ * @returns The injected state, or `undefined` if not provided and no default value was set.
+ */
+ useInjectedState: () => Return | undefined,
+ ]
+>
+export interface CreateInjectionStateOptions {
+ /**
+ * Custom injectionKey for InjectionState
+ */
+ injectionKey?: string | InjectionKey
+ /**
+ * Default value for the InjectionState
+ */
+ defaultValue?: Return
+}
+/**
+ * Create global state that can be injected into components.
+ *
+ * @see https://vueuse.org/createInjectionState
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createInjectionState<
+ Arguments extends Array,
+ Return,
+>(
+ composable: (...args: Arguments) => Return,
+ options?: CreateInjectionStateOptions,
+): CreateInjectionStateReturn
+```
diff --git a/.agents/skills/vueuse-functions/references/createProjection.md b/.agents/skills/vueuse-functions/references/createProjection.md
new file mode 100644
index 0000000..11bfcee
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createProjection.md
@@ -0,0 +1,31 @@
+---
+category: '@Math'
+related: useProjection, createGenericProjection
+---
+
+# createProjection
+
+Reactive numeric projection from one domain to another.
+
+## Usage
+
+```ts
+import { createProjection } from '@vueuse/math'
+
+const useProjector = createProjection([0, 10], [0, 100])
+const input = ref(0)
+const projected = useProjector(input) // projected.value === 0
+
+input.value = 5 // projected.value === 50
+input.value = 10 // projected.value === 100
+```
+
+## Type Declarations
+
+```ts
+export declare function createProjection(
+ fromDomain: MaybeRefOrGetter,
+ toDomain: MaybeRefOrGetter,
+ projector?: ProjectorFunction,
+): UseProjection
+```
diff --git a/.agents/skills/vueuse-functions/references/createRef.md b/.agents/skills/vueuse-functions/references/createRef.md
new file mode 100644
index 0000000..07f0cac
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createRef.md
@@ -0,0 +1,54 @@
+---
+category: Reactivity
+---
+
+# createRef
+
+Returns a `deepRef` or `shallowRef` depending on the `deep` param.
+
+## Usage
+
+```ts
+import { createRef } from '@vueuse/core'
+import { isShallow, ref } from 'vue'
+
+const initialData = 1
+
+const shallowData = createRef(initialData)
+const deepData = createRef(initialData, true)
+
+isShallow(shallowData) // true
+isShallow(deepData) // false
+```
+
+## Type Declarations
+
+```ts
+export type CreateRefReturn<
+ T = any,
+ D extends boolean = false,
+> = ShallowOrDeepRef
+export type ShallowOrDeepRef<
+ T = any,
+ D extends boolean = false,
+> = D extends true ? Ref : ShallowRef
+/**
+ * Returns a `deepRef` or `shallowRef` depending on the `deep` param.
+ *
+ * @example createRef(1) // ShallowRef
+ * @example createRef(1, false) // ShallowRef
+ * @example createRef(1, true) // Ref
+ * @example createRef("string") // ShallowRef
+ * @example createRef<"A"|"B">("A", true) // Ref<"A"|"B">
+ *
+ * @param value
+ * @param deep
+ * @returns the `deepRef` or `shallowRef`
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createRef(
+ value: T,
+ deep?: D,
+): CreateRefReturn
+```
diff --git a/.agents/skills/vueuse-functions/references/createReusableTemplate.md b/.agents/skills/vueuse-functions/references/createReusableTemplate.md
new file mode 100644
index 0000000..f82fb51
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createReusableTemplate.md
@@ -0,0 +1,357 @@
+---
+category: Component
+outline: deep
+---
+
+# createReusableTemplate
+
+Define and reuse template inside the component scope.
+
+## Motivation
+
+It's common to have the need to reuse some part of the template. For example:
+
+```vue
+
+
+
+
+
+
+```
+
+We'd like to reuse our code as much as possible. So normally we might need to extract those duplicated parts into a component. However, in a separated component you lose the ability to access the local bindings. Defining props and emits for them can be tedious sometimes.
+
+So this function is made to provide a way for defining and reusing templates inside the component scope.
+
+## Usage
+
+In the previous example, we could refactor it to:
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+- `` will register the template and renders nothing.
+- `` will render the template provided by ``.
+- `` must be used before ``.
+
+> **Note**: It's recommended to extract as separate components whenever possible. Abusing this function might lead to bad practices for your codebase.
+
+### Options API
+
+When using with [Options API](https://vuejs.org/guide/introduction.html#api-styles), you will need to define `createReusableTemplate` outside of the component setup and pass to the `components` option in order to use them in the template.
+
+```vue
+
+
+
+
+ {{ data }} passed from usage
+
+
+
+
+```
+
+### Passing Data
+
+You can also pass data to the template using slots:
+
+- Use `v-slot="..."` to access the data on ``
+- Directly bind the data on `` to pass them to the template
+
+```vue
+
+
+
+
+ {{ data }} passed from usage
+
+
+
+
+
+
+```
+
+### TypeScript Support
+
+`createReusableTemplate` accepts a generic type to provide type support for the data passed to the template:
+
+```vue
+
+
+
+
+
+ Hello {{ msg.toUpperCase() }}
+
+
+
+
+
+
+
+```
+
+Optionally, if you are not a fan of array destructuring, the following usages are also legal:
+
+```vue
+
+
+
+
+ Hello {{ msg.toUpperCase() }}
+
+
+
+
+```
+
+```vue
+
+
+
+
+ Hello {{ msg.toUpperCase() }}
+
+
+
+
+```
+
+::: warning
+Passing boolean props without `v-bind` is not supported. See the [Caveats](#boolean-props) section for more details.
+:::
+
+### Props and Attributes
+
+By default, all props and attributes passed to `` will be passed to the template. If you don't want certain props to be passed to the DOM, you need to define the runtime props:
+
+```ts
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
+ props: {
+ msg: String,
+ enable: Boolean,
+ }
+})
+```
+
+If you don't want to pass any props to the template, you can pass the `inheritAttrs` option:
+
+```ts
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
+ inheritAttrs: false,
+})
+```
+
+### Passing Slots
+
+It's also possible to pass slots back from ``. You can access the slots on `` from `$slots`:
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+ Some content
+
+
+ Another content
+
+
+```
+
+## Caveats
+
+### Boolean props
+
+As opposed to Vue's behavior, props defined as `boolean` that were passed without `v-bind` or absent will be resolved into an empty string or `undefined` respectively:
+
+```vue
+
+
+
+
+ {{ typeof value }}: {{ value }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## References
+
+This function is migrated from [vue-reuse-template](https://github.com/antfu/vue-reuse-template).
+
+Existing Vue discussions/issues about reusing template:
+
+- [Discussion on Reusing Templates](https://github.com/vuejs/core/discussions/6898)
+
+Alternative Approaches:
+
+- [Vue Macros - `namedTemplate`](https://vue-macros.sxzz.moe/features/named-template.html)
+- [`unplugin-vue-reuse-template`](https://github.com/liulinboyi/unplugin-vue-reuse-template)
+
+## Type Declarations
+
+```ts
+type ObjectLiteralWithPotentialObjectLiterals = Record<
+ string,
+ Record | undefined
+>
+type GenerateSlotsFromSlotMap<
+ T extends ObjectLiteralWithPotentialObjectLiterals,
+> = {
+ [K in keyof T]: Slot
+}
+export type DefineTemplateComponent<
+ Bindings extends Record,
+ MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent & {
+ new (): {
+ $slots: {
+ default: (
+ _: Bindings & {
+ $slots: GenerateSlotsFromSlotMap
+ },
+ ) => any
+ }
+ }
+}
+export type ReuseTemplateComponent<
+ Bindings extends Record,
+ MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent & {
+ new (): {
+ $slots: GenerateSlotsFromSlotMap
+ }
+}
+export type ReusableTemplatePair<
+ Bindings extends Record,
+ MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = [
+ DefineTemplateComponent,
+ ReuseTemplateComponent,
+] & {
+ define: DefineTemplateComponent
+ reuse: ReuseTemplateComponent
+}
+export interface CreateReusableTemplateOptions<
+ Props extends Record,
+> {
+ /**
+ * Inherit attrs from reuse component.
+ *
+ * @default true
+ */
+ inheritAttrs?: boolean
+ /**
+ * Props definition for reuse component.
+ */
+ props?: ComponentObjectPropsOptions
+}
+/**
+ * This function creates `define` and `reuse` components in pair,
+ * It also allow to pass a generic to bind with type.
+ *
+ * @see https://vueuse.org/createReusableTemplate
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createReusableTemplate<
+ Bindings extends Record,
+ MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals =
+ Record<"default", undefined>,
+>(
+ options?: CreateReusableTemplateOptions,
+): ReusableTemplatePair
+```
diff --git a/.agents/skills/vueuse-functions/references/createSharedComposable.md b/.agents/skills/vueuse-functions/references/createSharedComposable.md
new file mode 100644
index 0000000..19e6308
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createSharedComposable.md
@@ -0,0 +1,42 @@
+---
+category: State
+related: createGlobalState
+---
+
+# createSharedComposable
+
+Make a composable function usable with multiple Vue instances.
+
+> [!WARNING]
+> When used in a **SSR** environment, `createSharedComposable` will **automatically fallback** to a non-shared version.
+> This means every call will create a fresh instance in SSR to avoid [cross-request state pollution](https://vuejs.org/guide/scaling-up/ssr.html#cross-request-state-pollution).
+
+## Usage
+
+```ts
+import { createSharedComposable, useMouse } from '@vueuse/core'
+
+const useSharedMouse = createSharedComposable(useMouse)
+
+// CompA.vue
+const { x, y } = useSharedMouse()
+
+// CompB.vue - will reuse the previous state and no new event listeners will be registered
+const { x, y } = useSharedMouse()
+```
+
+## Type Declarations
+
+```ts
+export type SharedComposableReturn = T
+/**
+ * Make a composable function usable with multiple Vue instances.
+ *
+ * @see https://vueuse.org/createSharedComposable
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createSharedComposable(
+ composable: Fn,
+): SharedComposableReturn
+```
diff --git a/.agents/skills/vueuse-functions/references/createTemplatePromise.md b/.agents/skills/vueuse-functions/references/createTemplatePromise.md
new file mode 100644
index 0000000..c27d6b4
--- /dev/null
+++ b/.agents/skills/vueuse-functions/references/createTemplatePromise.md
@@ -0,0 +1,306 @@
+---
+category: Component
+outline: deep
+---
+
+# createTemplatePromise
+
+Template as Promise. Useful for constructing custom Dialogs, Modals, Toasts, etc.
+
+## Usage
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+## Features
+
+- **Programmatic** - call your UI as a promise
+- **Template** - use Vue template to render, not a new DSL
+- **TypeScript** - full type safety via generic type
+- **Renderless** - you take full control of the UI
+- **Transition** - use support Vue transition
+
+This function is migrated from [vue-template-promise](https://github.com/antfu/vue-template-promise)
+
+## Usage
+
+`createTemplatePromise` returns a **Vue Component** that you can directly use in your template with `
+
+
+
+
+
+
+
+
+
+```
+
+Learn more about [Vue Transition](https://vuejs.org/guide/built-ins/transition.html).
+
+### Slot Props
+
+The slot provides the following props:
+
+| Prop | Type | Description |
+| ------------- | ---------------------------------------- | --------------------------------------------------------- |
+| `promise` | `Promise \| undefined` | The current promise instance |
+| `resolve` | `(v: Return \| Promise) => void` | Resolve the promise with a value |
+| `reject` | `(v: any) => void` | Reject the promise |
+| `args` | `Args` | Arguments passed to `start()` |
+| `isResolving` | `boolean` | `true` when resolving another promise passed to `resolve` |
+| `key` | `number` | Unique key for list rendering |
+
+```vue
+
+
+
+ Loading...
+
+
+
+
+
+
+
+```
+
+## Motivation
+
+The common approach to call a dialog or a modal programmatically would be like this:
+
+```ts
+const dialog = useDialog()
+const result = await dialog.open({
+ title: 'Hello',
+ content: 'World',
+})
+```
+
+This would work by sending these information to the top-level component and let it render the dialog. However, it limits the flexibility you could express in the UI. For example, you could want the title to be red, or have extra buttons, etc. You would end up with a lot of options like:
+
+```ts
+const result = await dialog.open({
+ title: 'Hello',
+ titleClass: 'text-red',
+ content: 'World',
+ contentClass: 'text-blue text-sm',
+ buttons: [
+ { text: 'OK', class: 'bg-red', onClick: () => {} },
+ { text: 'Cancel', class: 'bg-blue', onClick: () => {} },
+ ],
+ // ...
+})
+```
+
+Even this is not flexible enough. If you want more, you might end up with manual render function.
+
+```ts
+const result = await dialog.open({
+ title: 'Hello',
+ contentSlot: () => h(MyComponent, { content }),
+})
+```
+
+This is like reinventing a new DSL in the script to express the UI template.
+
+So this function allows **expressing the UI in templates instead of scripts**, where it is supposed to be, while still being able to be manipulated programmatically.
+
+## Type Declarations
+
+```ts
+export interface TemplatePromiseProps {
+ /**
+ * The promise instance.
+ */
+ promise: Promise | undefined
+ /**
+ * Resolve the promise.
+ */
+ resolve: (v: Return | Promise) => void
+ /**
+ * Reject the promise.
+ */
+ reject: (v: any) => void
+ /**
+ * Arguments passed to TemplatePromise.start()
+ */
+ args: Args
+ /**
+ * Indicates if the promise is resolving.
+ * When passing another promise to `resolve`, this will be set to `true` until the promise is resolved.
+ */
+ isResolving: boolean
+ /**
+ * Options passed to createTemplatePromise()
+ */
+ options: TemplatePromiseOptions
+ /**
+ * Unique key for list rendering.
+ */
+ key: number
+}
+export interface TemplatePromiseOptions {
+ /**
+ * Determines if the promise can be called only once at a time.
+ *
+ * @default false
+ */
+ singleton?: boolean
+ /**
+ * Transition props for the promise.
+ */
+ transition?: TransitionGroupProps
+}
+export type TemplatePromise<
+ Return,
+ Args extends any[] = [],
+> = DefineComponent