Training Example: VueUse – Review the Data, Give Your Score & Compare to the Real AI Evaluation

Skip to content
[H1] VueUseCollection of Vue Composition Utilities
Collection of Essential Vue Composition UtilitiesGet StartedFunctionsAdd-onsView on GitHub
[IMG: VueUse]
?
[H2] Feature Rich
200+ functions for you to choose from?
[H2] Built for Vue 3
Designed for Vue 3 to take full advantage of its latest capabilities⚡
[H2] Fully tree shakeable
Only take what you want?
[H2] Type Strong
Written in TypeScript, with full TS docs?
[H2] Flexible
Passing refs as arguments, fully customizable, configurable event filters and targets☁️
[H2] No bundler required
Usable via CDN, without any bundlers?
[H2] SSR Friendly
Works perfectly with server-side rendering/generation?
[H2] Interactive demos
Documentation of functions also come with interactive demos!?
[H2] Add-ons
Support various add-ons like Router, Firebase, RxJS, etc.
[H2] Anthony's Sponsors
The development of VueUse is supported by the following sponsors.
[H3] Special Sponsor
[IMG: Vercel]
[H3] Platinum Sponsors
[IMG: VoidZero]
[IMG: StackBlitz]
[IMG: Vite]
[H3] Gold Sponsors
[IMG: Workleap IT]
[IMG: JetBrains]
[IMG: Storyblok]
[H3] Silver Sponsors
[IMG: Mux]
[IMG: Ben Hong]
[IMG: Amplify]
[H3] Sponsors
[IMG: Marcel Laverdet]
[IMG: Checkly]
[IMG: chax.at]
[IMG: flofleche]
[IMG: Stefan Smiljkovic]
[IMG: Ulrich Stark]
[IMG: n8n - Workflow Automation]
[IMG: WebWorkerTech]
[IMG: RainbowBird]
[IMG: TANAKA Kohji]
[IMG: Neko]
[IMG: xjccc]
[IMG: Jianqi Pan]
[IMG: Yee]
[IMG: David Vallejo]
[IMG: Avantpage]
[IMG: Bjorn Lu]
[IMG: kang]
[IMG: Daniel Roe]
[IMG: m1heng]
[IMG: Ivan Demchuk]
[IMG: xx]
[IMG: mello-r]
[IMG: VueUse]
[IMG: UnoCSS]
[IMG: Carolyn Sun]
[IMG: Philippe Serhal]
[IMG: Rudi Bruchez]
[IMG: Mathieu Janio]
[IMG: 面条]
[IMG: blackbird GmbH]
[IMG: Eduardo San Martin Morote]
[IMG: Michel EDIGHOFFER]
[IMG: Emmanuel Salomon]
[IMG: wū yāng]
[IMG: yoyoIU]
[IMG: Anthony Fu]
[IMG: Anthony Fu]

[H1] Functions ​
Core StateElementsBrowserSensorsNetworkAnimationComponentWatchReactivityArrayTimeUtilities Add-ons ElectronFirebaseHeadIntegrationsMathMotionRouterRxJSSchemaOrgSound Sort by categorynameupdated Filters Has ComponentHas Directive
[H3] State
createGlobalState-keep states in the global scope to be reusable across Vue instancescreateInjectionState-create global state that can be injected into componentscreateSharedComposable-make a composable function usable with multiple Vue instancesinjectLocal-extended inject with ability to call provideLocal to provide the value in the same componentprovideLocal-extended provide with ability to call injectLocal to obtain the value in the same componentuseAsyncState-reactive async stateuseDebouncedRefHistory-shorthand for useRefHistory with debounced filteruseLastChanged-records the timestamp of the last changeuseLocalStorage-reactive LocalStorageuseManualRefHistory-manually track the change history of a ref when the user calls commit()useRefHistory-track the change history of a refuseSessionStorage-reactive SessionStorageuseStorage-create a reactive ref that can be used to access & modify LocalStorage or SessionStorageuseStorageAsync-reactive Storage with async supportuseThrottledRefHistory-shorthand for useRefHistory with throttled filter
[H3] Elements
useActiveElement-reactive document.activeElementuseDocumentVisibility-reactively track document.visibilityStateuseDraggable-make elements draggableuseDropZone-create a zone where files can be droppeduseElementBounding-reactive bounding box of an HTML elementuseElementSize-reactive size of an HTML elementuseElementVisibility-tracks the visibility of an element within the viewportuseIntersectionObserver-detects changes to a target element's visibilityuseMouseInElement-reactive mouse position related to an elementuseMutationObserver-watch for changes being made to the DOM treeuseParentElement-get parent element of the given elementuseResizeObserver-reports changes to the dimensions of an Element's content or the border-boxuseWindowFocus-reactively track window focus with window.onfocus and window.onblur eventsuseWindowScroll-reactive window scrolluseWindowSize-reactive window size
[H3] Browser
useBluetooth-reactive Web Bluetooth APIuseBreakpoints-reactive viewport breakpointsuseBroadcastChannel-reactive BroadcastChannel APIuseBrowserLocation-reactive browser locationuseClipboard-reactive Clipboard APIuseClipboardItems-reactive Clipboard APIuseColorMode-reactive color mode (dark / light / customs) with auto data persistenceuseCssSupports-SSR compatible and reactive CSS.supportsuseCssVar-manipulate CSS variablesuseDark-reactive dark mode with auto data persistenceuseEventListener-use EventListener with easeuseEyeDropper-reactive EyeDropper APIuseFavicon-reactive faviconuseFileDialog-open file dialog with easeuseFileSystemAccess-create and read and write local files with FileSystemAccessAPIuseFullscreen-reactive Fullscreen APIuseGamepad-provides reactive bindings for the Gamepad APIuseImage-reactive load an image in the browseruseMediaControls-reactive media controls for both audio and video elementsuseMediaQuery-reactive Media QueryuseMemory-reactive Memory InfouseObjectUrl-reactive URL representing an objectusePerformanceObserver-observe performance metricsusePermission-reactive Permissions APIusePreferredColorScheme-reactive prefers-color-scheme media queryusePreferredContrast-reactive prefers-contrast media queryusePreferredDark-reactive dark theme preferenceusePreferredLanguages-reactive Navigator LanguagesusePreferredReducedMotion-reactive prefers-reduced-motion media queryusePreferredReducedTransparency-reactive prefers-reduced-transparency media queryuseScreenOrientation-reactive Screen Orientation APIuseScreenSafeArea-reactive env(safe-area-inset-*)useScriptTag-creates a script taguseShare-reactive Web Share APIuseSSRWidth-used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like useMediaQuery or useBreakpointsuseStyleTag-inject reactive style element in headuseTextareaAutosize-automatically update the height of a textarea depending on the contentuseTextDirection-reactive dir of the element's textuseTitle-reactive document titleuseUrlSearchParams-reactive URLSearchParamsuseVibrate-reactive Vibration APIuseWakeLock-reactive Screen Wake Lock APIuseWebNotification-reactive NotificationuseWebWorker-simple Web Workers registration and communicationuseWebWorkerFn-run expensive functions without blocking the UI
[H3] Sensors
onClickOutside-listen for clicks outside of an elementonElementRemoval-fires when the element or any element containing it is removed from the DOMonKeyStroke-listen for keyboard keystrokesonLongPress-listen for a long press on an elementonStartTyping-fires when users start typing on non-editable elementsuseBattery-reactive Battery Status APIuseDeviceMotion-reactive DeviceMotionEventuseDeviceOrientation-reactive DeviceOrientationEventuseDevicePixelRatio-reactively track window.devicePixelRatiouseDevicesList-reactive enumerateDevices listing available input/output devicesuseDisplayMedia-reactive mediaDevices.getDisplayMedia streaminguseElementByPoint-reactive element by pointuseElementHover-reactive element's hover stateuseFocus-reactive utility to track or set the focus state of a DOM elementuseFocusWithin-reactive utility to track if an element or one of its descendants has focususeFps-reactive FPS (frames per second)useGeolocation-reactive Geolocation APIuseIdle-tracks whether the user is being inactiveuseInfiniteScroll-infinite scrolling of the elementuseKeyModifier-reactive Modifier StateuseMagicKeys-reactive keys pressed stateuseMouse-reactive mouse positionuseMousePressed-reactive mouse pressing stateuseNavigatorLanguage-reactive navigator.languageuseNetwork-reactive Network statususeOnline-reactive online stateusePageLeave-reactive state to show whether the mouse leaves the pageuseParallax-create parallax effect easilyusePointer-reactive pointer stateusePointerLock-reactive pointer lockusePointerSwipe-reactive swipe detection based on PointerEventsuseScroll-reactive scroll position and stateuseScrollLock-lock scrolling of the elementuseSpeechRecognition-reactive SpeechRecognitionuseSpeechSynthesis-reactive SpeechSynthesisuseSwipe-reactive swipe detection based on TouchEventsuseTextSelection-reactively track user text selection based on Window.getSelectionuseUserMedia-reactive mediaDevices.getUserMedia streaming
[H3] Network
useEventSource-an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP serveruseFetch-reactive Fetch API provides the ability to abort requestsuseWebSocket-reactive WebSocket client
[H3] Animation
useAnimate-reactive Web Animations APIuseInterval-reactive counter that increases on every intervaluseIntervalFn-wrapper for setInterval with controlsuseNow-reactive current Date instanceuseRafFn-call function on every requestAnimationFrameuseTimeout-reactive value that becomes true after a given timeuseTimeoutFn-wrapper for setTimeout with controlsuseTimestamp-reactive current timestampuseTransition-transition between values
[H3] Component
computedInject-combine computed and injectcreateReusableTemplate-define and reuse template inside the component scopecreateTemplatePromise-template as PromisetemplateRef-shorthand for binding ref to template elementtryOnBeforeMount-safe onBeforeMounttryOnBeforeUnmount-safe onBeforeUnmounttryOnMounted-safe onMountedtryOnScopeDispose-safe onScopeDisposetryOnUnmounted-safe onUnmountedunrefElement-retrieves the underlying DOM element from a Vue ref or component instanceuseCurrentElement-get the DOM element of current component as a refuseMounted-mounted state in refuseTemplateRefsList-shorthand for binding refs to template elements and components inside v-foruseVirtualList-create virtual lists with easeuseVModel-shorthand for v-model bindinguseVModels-shorthand for props v-model binding
[H3] Watch
until-promised one-time watch for changeswatchArray-watch for an array with additions and removalswatchAtMost-watch with the number of times triggeredwatchDebounced-debounced watchwatchDeep-shorthand for watching value with {deep: true}watchIgnorable-ignorable watchwatchImmediate-shorthand for watching value with {immediate: true}watchOnce-shorthand for watching value with { once: true }watchPausable-pausable watchwatchThrottled-throttled watchwatchTriggerable-watch that can be triggered manuallywatchWithFilter-watch with additional EventFilter controlwhenever-shorthand for watching value to be truthy
[H3] Reactivity
computedAsync-computed for async functionscomputedEager-eager computed without lazy evaluationcomputedWithControl-explicitly define the dependencies of computedcreateRef-returns a deepRef or shallowRef depending on the deep paramextendRef-add extra attributes to Refreactify-converts plain functions into reactive functionsreactifyObject-apply reactify to an objectreactiveComputed-computed reactive objectreactiveOmit-reactively omit fields from a reactive objectreactivePick-reactively pick fields from a reactive objectrefAutoReset-a ref which will be reset to the default value after some timerefDebounced-debounce execution of a ref valuerefDefault-apply default value to a refrefManualReset-create a ref with manual reset functionalityrefThrottled-throttle changing of a ref valuerefWithControl-fine-grained controls over ref and its reactivitysyncRef-two-way refs synchronizationsyncRefs-keep target refs in sync with a source reftoReactive-converts ref to reactivetoRef-normalize value/ref/getter to ref or computedtoRefs-extended toRefs that also accepts refs of an object
[H3] Array
useArrayDifference-reactive get array difference of two arraysuseArrayEvery-reactive Array.everyuseArrayFilter-reactive Array.filteruseArrayFind-reactive Array.finduseArrayFindIndex-reactive Array.findIndexuseArrayFindLast-reactive Array.findLastuseArrayIncludes-reactive Array.includesuseArrayJoin-reactive Array.joinuseArrayMap-reactive Array.mapuseArrayReduce-reactive Array.reduceuseArraySome-reactive Array.someuseArrayUnique-reactive unique arrayuseSorted-reactive sort array
[H3] Time
useCountdown-reactive countdown timer in secondsuseDateFormat-get the formatted date according to the string of tokens passed inuseTimeAgo-reactive time agouseTimeAgoIntl-reactive time ago with i18n supported
[H3] Utilities
createDisposableDirective-utility for authoring disposable directivescreateEventHook-utility for creating event hookscreateUnrefFn-make a plain function accepting ref and raw values as argumentsget-shorthand for accessing ref.valueisDefined-non-nullish checking type guard for RefmakeDestructurable-make isomorphic destructurable for object and array at the same timeset-shorthand for ref.value = xuseAsyncQueue-executes each asynchronous task sequentially and passes the current task result to the next taskuseBase64-reactive base64 transforminguseCached-cache a ref with a custom comparatoruseCloned-reactive clone of a refuseConfirmDialog-creates event hooks to support modals and confirmation dialog chainsuseCounter-basic counter with utility functionsuseCycleList-cycle through a list of itemsuseDebounceFn-debounce execution of a functionuseEventBus-a basic event bususeMemoize-cache results of functions depending on arguments and keep it reactiveuseOffsetPagination-reactive offset paginationusePrevious-holds the previous value of a refuseStepper-provides helpers for building a multi-step wizard interfaceuseSupported-SSR compatibility isSupporteduseThrottleFn-throttle execution of a functionuseTimeoutPoll-use timeout to poll somethinguseToggle-a boolean switcher with utility functionsuseToNumber-reactively convert a string ref to numberuseToString-reactively convert a ref to string
[H3] @Electron
useIpcRenderer-provides ipcRenderer and all of its APIs with Vue reactivityuseIpcRendererInvoke-reactive ipcRenderer.invoke API resultuseIpcRendererOn-use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounteduseZoomFactor-reactive WebFrame zoom factoruseZoomLevel-reactive WebFrame zoom level
[H3] @Firebase
useAuth-reactive Firebase Auth bindinguseFirestore-reactive Firestore bindinguseRTDB-reactive Firebase Realtime Database binding
[H3] @Head
createHead-create the head manager instance.useHead-update head meta tags reactively.
[H3] @Integrations
useAsyncValidator-wrapper for async-validatoruseAxios-wrapper for axiosuseChangeCase-reactive wrapper for change-caseuseCookies-wrapper for universal-cookieuseDrauu-reactive instance for drauuuseFocusTrap-reactive wrapper for focus-trapuseFuse-easily implement fuzzy search using a composable with Fuse.jsuseIDBKeyval-wrapper for idb-keyvaluseJwt-wrapper for jwt-decodeuseNProgress-reactive wrapper for nprogressuseQRCode-wrapper for qrcodeuseSortable-wrapper for sortable
[H3] @Math
createGenericProjection-generic version of createProjectioncreateProjection-reactive numeric projection from one domain to anotherlogicAnd-AND condition for refslogicNot-NOT condition for reflogicOr-OR conditions for refsuseAbs-reactive Math.absuseAverage-get the average of an array reactivelyuseCeil-reactive Math.ceiluseClamp-reactively clamp a value between two other valuesuseFloor-reactive Math.flooruseMath-reactive Math methodsuseMax-reactive Math.maxuseMin-reactive Math.minusePrecision-reactively set the precision of a numberuseProjection-reactive numeric projection from one domain to anotheruseRound-reactive Math.rounduseSum-get the sum of an array reactivelyuseTrunc-reactive Math.trunc
[H3] @Motion
useElementStyle-sync a reactive object to a target element CSS stylinguseElementTransform-sync a reactive object to a target element CSS transform.useMotion-putting your components in motion.useMotionProperties-access Motion Properties for a target element.useMotionVariants-handle the Variants state and selection.useSpring-spring animations.
[H3] @Router
useRouteHash-shorthand for a reactive route.hashuseRouteParams-shorthand for a reactive route.paramsuseRouteQuery-shorthand for a reactive route.query
[H3] @RxJS
from-wrappers around RxJS's from() and fromEvent() to allow them to accept refstoObserver-sugar function to convert a ref into an RxJS ObserveruseExtractedObservable-use an RxJS Observable as extracted from one or more composablesuseObservable-use an RxJS ObservableuseSubject-bind an RxJS Subject to a ref and propagate value changes both waysuseSubscription-use an RxJS Subscription without worrying about unsubscribing from it or creating memory leakswatchExtractedObservable-watch the values of an RxJS Observable as extracted from one or more composables
[H3] @SchemaOrg
createSchemaOrg-create the schema.org manager instance.useSchemaOrg-update schema.org reactively.
[H3] @Sound
useSound-play sound effects reactively.

[H1] Get Started ​
Learn VueUse with videoVueUse is a collection of utility functions based on Composition API. We assume you are already familiar with the basic ideas of Composition API before you continue.
[H2] Installation ​
From v12.0, VueUse no longer supports Vue 2. Please use v11.x for Vue 2 support.bashnpm i @vueuse/coreAdd ons | Nuxt Module
[H6] Demos ​
Vite + Vue 3Nuxt 3 + Vue 3Webpack + Vue 3
[H3] CDN ​
vue<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>It will be exposed to global as window.VueUse
[H3] Nuxt ​
From v7.2.0, we shipped a Nuxt module to enable auto importing for Nuxt 3 and Nuxt Bridge.Install the vueuse module into your application using @nuxt/cli:bashnpx nuxt@latest module add vueuseOr use npm:bashnpm i -D @vueuse/nuxt @vueuse/coreNuxt 3ts// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@vueuse/nuxt',
],
})And then use VueUse function anywhere in your Nuxt app. For example:vue<script setup lang="ts">
const { x, y } = useMouse()
</script>
<template>
<div>pos: {{ x }}, {{ y }}</div>
</template>
[H2] Usage Example ​
Simply importing the functions you need from @vueuse/corevue<script setup>
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
// tracks mouse position
const { x, y } = useMouse()
// is user prefers dark theme
const isDark = usePreferredDark()
// persist state in localStorage
const store = useLocalStorage(
'my-storage',
{
name: 'Apple',
color: 'red',
},
)
</script>Refer to functions list for more details.

[H1] Add-ons ​
The core package aims to be lightweight and dependence free. While the add-ons are wrapping popular packages into the consistent API style.
[H2] Head - @vueuse/head ​
Document head manager for Vue 3. SSR ready. Created and maintained by @egoist
[H2] Motion - @vueuse/motion ​
Vue Composables putting your components in motion.? Smooth animations based on Popmotion? Declarative API? Plug & play with 10+ presets? Supports Nuxt using nuxt-use-motion✨ Written in TypeScript?️‍♀️ Lightweight with <20kb bundle sizeCreated and maintained by @Tahul
[H2] Gesture - @vueuse/gesture ​
Vue Composables making your app interactive? Plug & play? Mouse & Touch support? Directives support (v-drag, v-pinch, v-move...)✨ Written in TypeScript? Plays well with vueuse/motion or any other animation solutionCreated and maintained by @Tahul
[H2] Sound - @vueuse/sound ​
Vue composables for playing sound effects.? Lets your website communicate using 2 human senses instead of 1? Built with Vue Composition API? Supports Nuxt 3 using @vueuse/sound/nuxt⚡️ <1kb bytes (gzip) in your bundle! ~10kb loaded async.✨ Built with TypeScript? Uses a powerful, battle-tested audio utility: Howler.jsCreated and maintained by @Tahul
[H2] SchemaOrg - @vueuse/schema-org ​
Schema.org for Vue. Supports typed and automated Google Rich Results? No Schema knowledge required, get up and running in minutes with minimal configuration✨ 20+ Typed Schemas for best practice (Google, Yoast) Rich Results? Automated Schema: @id, URL / date resolving, route meta and more? Integrations for VitePress, Nuxt, Vitesse and Vite with auto-imports? Choose your preferred API: Composables or Components? SSR, tree-shaking and Schema inheritance readyCreated and maintained by @harlan-zw
[H2] Router - @vueuse/router ​
Utilities for vue-routeruseRouteHash — shorthand for a reactive route.hashuseRouteParams — shorthand for a reactive route.paramsuseRouteQuery — shorthand for a reactive route.query
[H2] Integrations - @vueuse/integrations ​
Integration wrappers for utility librariesuseAsyncValidator — wrapper for async-validatoruseAxios — wrapper for axiosuseChangeCase — reactive wrapper for change-caseuseCookies — wrapper for universal-cookieuseDrauu — reactive instance for drauuuseFocusTrap — reactive wrapper for focus-trapuseFuse — easily implement fuzzy search using a composable with Fuse.jsuseIDBKeyval — wrapper for idb-keyvaluseJwt — wrapper for jwt-decodeuseNProgress — reactive wrapper for nprogressuseQRCode — wrapper for qrcodeuseSortable — wrapper for sortable
[H2] RxJS - @vueuse/rxjs ​
Enables RxJS reactive functions in Vuefrom — wrappers around RxJS's from() and fromEvent() to allow them to accept refstoObserver — sugar function to convert a ref into an RxJS ObserveruseExtractedObservable — use an RxJS Observable as extracted from one or more composablesuseObservable — use an RxJS ObservableuseSubject — bind an RxJS Subject to a ref and propagate value changes both waysuseSubscription — use an RxJS Subscription without worrying about unsubscribing from it or creating memory leakswatchExtractedObservable — watch the values of an RxJS Observable as extracted from one or more composables
[H2] Firebase - @vueuse/firebase ​
Enables realtime bindings for FirebaseuseAuth — reactive Firebase Auth bindinguseFirestore — reactive Firestore bindinguseRTDB — reactive Firebase Realtime Database binding
[H2] Electron - @vueuse/electron ​
Electron renderer process modules for VueUseuseIpcRenderer — provides ipcRenderer and all of its APIs with Vue reactivityuseIpcRendererInvoke — reactive ipcRenderer.invoke API resultuseIpcRendererOn — use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounteduseZoomFactor — reactive WebFrame zoom factoruseZoomLevel — reactive WebFrame zoom level