VueUse

Vueに必要なユーティリティーコレクションです。

Functions

Animation

`useAnimate`	reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
`useInterval`	reactive counter increases on every interval
`useIntervalFn`	wrapper for `setInterval` with controls
`useNow`	reactive current Date instance
`useRafFn`	call function on every `requestAnimationFrame`
`useTimeout`	update value after a given time with controls
`useTimeoutFn`	wrapper for `setTimeout` with controls
`useTimestamp`	reactive current timestamp
`useTransition`	transition between values

Array

`useArrayDifference`	reactive get array difference of two arrays
`useArrayEvery`	reactive `Array.every`
`useArrayFilter`	reactive `Array.filter`
`useArrayFind`	reactive `Array.find`
`useArrayFindIndex`	reactive `Array.findIndex`
`useArrayFindLast`	reactive `Array.findLast`
`useArrayIncludes`	reactive `Array.includes`
`useArrayJoin`	reactive `Array.join`
`useArrayMap`	reactive `Array.map`
`useArrayReduce`	reactive `Array.reduce`
`useArraySome`	reactive `Array.some`
`useArrayUnique`	reactive unique array
`useSorted`	reactive sort array

Browser

`useBluetooth`	reactive [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)
`useBreakpoints`	reactive viewport breakpoints
`useBroadcastChannel`	reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel)
`useBrowserLocation`	reactive browser location
`useClipboard`	reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
`useClipboardItems`	reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
`useColorMode`	reactive color mode (dark / light / customs) with auto data persistence
`useCssVar`	manipulate CSS variables
`useDark`	reactive dark mode with auto data persistence
`useEventListener`	use EventListener with ease
`useEyeDropper`	reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
`useFavicon`	reactive favicon
`useFileDialog`	open file dialog with ease
`useFileSystemAccess`	create and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
`useFullscreen`	reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
`useGamepad`	provides reactive bindings for the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)
`useImage`	reactive load an image in the browser
`useMediaControls`	reactive media controls for both `audio` and `video` elements
`useMediaQuery`	reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)
`useMemory`	reactive Memory Info
`useObjectUrl`	reactive URL representing an object
`usePerformanceObserver`	observe performance metrics
`usePermission`	reactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API)
`usePreferredColorScheme`	reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query
`usePreferredContrast`	reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query
`usePreferredDark`	reactive dark theme preference
`usePreferredLanguages`	reactive [Navigator Languages](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages)
`usePreferredReducedMotion`	reactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query
`useScreenOrientation`	reactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API)
`useScreenSafeArea`	reactive `env(safe-area-inset-*)`
`useScriptTag`	creates a script tag
`useShare`	reactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
`useStyleTag`	inject reactive `style` element in head
`useTextareaAutosize`	automatically update the height of a textarea depending on the content
`useTextDirection`	reactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text
`useTitle`	reactive document title
`useUrlSearchParams`	reactive [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
`useVibrate`	reactive [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
`useWakeLock`	reactive [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API)
`useWebNotification`	reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification)
`useWebWorker`	simple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) registration and communication
`useWebWorkerFn`	run expensive functions without blocking the UI

Component

`computedInject`	combine computed and inject
`createReusableTemplate`	define and reuse template inside the component scope
`createTemplatePromise`	template as Promise
`templateRef`	shorthand for binding ref to template element
`tryOnBeforeMount`	safe `onBeforeMount`
`tryOnBeforeUnmount`	safe `onBeforeUnmount`
`tryOnMounted`	safe `onMounted`
`tryOnScopeDispose`	safe `onScopeDispose`
`tryOnUnmounted`	safe `onUnmounted`
`unrefElement`	retrieves the underlying DOM element from a Vue ref or component instance
`useCurrentElement`	get the DOM element of current component as a ref
`useMounted`	mounted state in ref
`useTemplateRefsList`	shorthand for binding refs to template elements and components inside `v-for`
`useVirtualList`	create virtual lists with ease
`useVModel`	shorthand for v-model binding
`useVModels`	shorthand for props v-model binding

Elements

`useActiveElement`	reactive `document.activeElement`
`useDocumentVisibility`	reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
`useDraggable`	make elements draggable
`useDropZone`	create a zone where files can be dropped
`useElementBounding`	reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element
`useElementSize`	reactive size of an HTML element
`useElementVisibility`	tracks the visibility of an element within the viewport
`useIntersectionObserver`	detects that a target element's visibility
`useMouseInElement`	reactive mouse position related to an element
`useMutationObserver`	watch for changes being made to the DOM tree
`useParentElement`	get parent element of the given element
`useResizeObserver`	reports changes to the dimensions of an Element's content or the border-box
`useWindowFocus`	reactively track window focus with `window.onfocus` and `window.onblur` events
`useWindowScroll`	reactive window scroll
`useWindowSize`	reactive window size

Network

`useEventSource`	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
`useFetch`	reactive [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provides the ability to abort requests
`useWebSocket`	reactive [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket) client

Reactivity

`computedAsync`	computed for async functions
`computedEager`	eager computed without lazy evaluation
`computedWithControl`	explicitly define the dependencies of computed
`extendRef`	add extra attributes to Ref
`reactify`	converts plain functions into reactive functions
`reactifyObject`	apply `reactify` to an object
`reactiveComputed`	computed reactive object
`reactiveOmit`	reactively omit fields from a reactive object
`reactivePick`	reactively pick fields from a reactive object
`refAutoReset`	a ref which will be reset to the default value after some time
`refDebounced`	debounce execution of a ref value
`refDefault`	apply default value to a ref
`refThrottled`	throttle changing of a ref value
`refWithControl`	fine-grained controls over ref and its reactivity
`syncRef`	two-way refs synchronization
`syncRefs`	keep target refs in sync with a source ref
`toReactive`	converts ref to reactive
`toRef`	normalize value/ref/getter to `ref` or `computed`
`toRefs`	extended [`toRefs`](https://vuejs.org/api/reactivity-utilities.html#torefs) that also accepts refs of an object
`toValue`	get the value of value/ref/getter

Sensors

`onClickOutside`	listen for clicks outside of an element
`onKeyStroke`	listen for keyboard keystrokes
`onLongPress`	listen for a long press on an element
`onStartTyping`	fires when users start typing on non-editable elements
`useBattery`	reactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API)
`useDeviceMotion`	reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent)
`useDeviceOrientation`	reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)
`useDevicePixelRatio`	reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio)
`useDevicesList`	reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices
`useDisplayMedia`	reactive [`mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) streaming
`useElementByPoint`	reactive element by point
`useElementHover`	reactive element's hover state
`useFocus`	reactive utility to track or set the focus state of a DOM element
`useFocusWithin`	reactive utility to track if an element or one of its decendants has focus
`useFps`	reactive FPS (frames per second)
`useGeolocation`	reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
`useIdle`	tracks whether the user is being inactive
`useInfiniteScroll`	infinite scrolling of the element
`useKeyModifier`	reactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState)
`useMagicKeys`	reactive keys pressed state
`useMouse`	reactive mouse position
`useMousePressed`	reactive mouse pressing state
`useNavigatorLanguage`	reactive [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language)
`useNetwork`	reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)
`useOnline`	reactive online state
`usePageLeave`	reactive state to show whether the mouse leaves the page
`useParallax`	create parallax effect easily
`usePointer`	reactive [pointer state](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
`usePointerLock`	reactive [pointer lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
`usePointerSwipe`	reactive swipe detection based on [PointerEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)
`useScroll`	reactive scroll position and state
`useScrollLock`	lock scrolling of the element
`useSpeechRecognition`	reactive [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
`useSpeechSynthesis`	reactive [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
`useSwipe`	reactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
`useTextSelection`	reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection)
`useUserMedia`	reactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming

State

`createGlobalState`	keep states in the global scope to be reusable across Vue instances
`createInjectionState`	create global state that can be injected into components
`createSharedComposable`	make a composable function usable with multiple Vue instances
`injectLocal`	extended `inject` with ability to call `provideLocal` to provide the value in the same component
`provideLocal`	extended `provide` with ability to call `injectLocal` to obtain the value in the same component
`useAsyncState`	reactive async state
`useDebouncedRefHistory`	shorthand for `useRefHistory` with debounced filter
`useLastChanged`	records the timestamp of the last change
`useLocalStorage`	reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
`useManualRefHistory`	manually track the change history of a ref when the using calls `commit()`
`useRefHistory`	track the change history of a ref
`useSessionStorage`	reactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
`useStorage`	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)
`useStorageAsync`	reactive Storage in with async support
`useThrottledRefHistory`	shorthand for `useRefHistory` with throttled filter

Time

`useDateFormat`	get the formatted date according to the string of tokens passed in
`useTimeAgo`	reactive time ago

Utilities

`createEventHook`	utility for creating event hooks
`createUnrefFn`	make a plain function accepting ref and raw values as arguments
`get`	shorthand for accessing `ref.value`
`isDefined`	non-nullish checking type guard for Ref
`makeDestructurable`	make isomorphic destructurable for object and array at the same time
`set`	shorthand for `ref.value = x`
`useAsyncQueue`	executes each asynchronous task sequentially and passes the current task result to the next task
`useBase64`	reactive base64 transforming
`useCached`	cache a ref with a custom comparator
`useCloned`	reactive clone of a ref
`useConfirmDialog`	creates event hooks to support modals and confirmation dialog chains
`useCounter`	basic counter with utility functions
`useCycleList`	cycle through a list of items
`useDebounceFn`	debounce execution of a function
`useEventBus`	a basic event bus
`useMemoize`	cache results of functions depending on arguments and keep it reactive
`useOffsetPagination`	reactive offset pagination
`usePrevious`	holds the previous value of a ref
`useStepper`	provides helpers for building a multi-step wizard interface
`useSupported`	sSR compatibility `isSupported`
`useThrottleFn`	throttle execution of a function
`useTimeoutPoll`	use timeout to poll something
`useToggle`	a boolean switcher with utility functions
`useToNumber`	reactively convert a string ref to number
`useToString`	reactively convert a ref to string

Watch

`until`	promised one-time watch for changes
`watchArray`	watch for an array with additions and removals
`watchAtMost`	`watch` with the number of times triggered
`watchDebounced`	debounced watch
`watchDeep`	shorthand for watching value with `{deep: true}`
`watchIgnorable`	ignorable watch
`watchImmediate`	shorthand for watching value with `{immediate: true}`
`watchOnce`	`watch` that only triggers once
`watchPausable`	pausable watch
`watchThrottled`	throttled watch
`watchTriggerable`	watch that can be triggered manually
`watchWithFilter`	`watch` with additional EventFilter control
`whenever`	shorthand for watching value to be truthy

Bootstrap

VueUse

Functions

Animation

Array

Browser

Component

Elements

Network

Reactivity

Sensors

State

Time

Utilities

Watch