VueUse (original) (raw)
State
-keep states in the global scope to be reusable across Vue instances
-extended inject with ability to call provideLocal to provide the value in the same component
-extended provide with ability to call injectLocal to obtain the value in the same component
Elements
-reports changes to the dimensions of an Element's content or the border-box
-reactively track window focus with window.onfocus and window.onblur events
Browser
-reactive color mode (dark / light / customs) with auto data persistence
-reactive dark mode with auto data persistence
-reactive load an image in the browser
Sensors
-fires when users start typing on non-editable elements
-reactive utility to track or set the focus state of a DOM element
-reactive utility to track if an element or one of its decendants has focus
-reactive FPS (frames per second)
-tracks whether the user is being inactive
-reactive state to show whether the mouse leaves the page
Network
Animation
-reactive counter increases on every interval
-reactive current Date instance
-call function on every requestAnimationFrame
-update value after a given time with controls
Component
-shorthand for binding ref to template element
-retrieves the underlying DOM element from a Vue ref or component instance
-shorthand for binding refs to template elements and components inside v-for
Watch
-promised one-time watch for changes
-watch for an array with additions and removals
-shorthand for watching value with {deep: true}
-shorthand for watching value to be truthy
Reactivity
-returns a deepRef or shallowRef depending on the deep param
-converts plain functions into reactive functions
-a ref which will be reset to the default value after some time
-two-way refs synchronization
-keep target refs in sync with a source ref
-normalize value/ref/getter to ref or computed
-get the value of value/ref/getter
Array
Time
-wrapper for useIntervalFn that provides a countdown timer
-get the formatted date according to the string of tokens passed in
Utilities
-make a plain function accepting ref and raw values as arguments
-shorthand for accessing ref.value
-non-nullish checking type guard for Ref
-shorthand for ref.value = x
-executes each asynchronous task sequentially and passes the current task result to the next task
-cache a ref with a custom comparator
-creates event hooks to support modals and confirmation dialog chains
-cache results of functions depending on arguments and keep it reactive
-provides helpers for building a multi-step wizard interface
-a boolean switcher with utility functions
@Electron
@Firebase
@Head
createHead-create the head manager instance.
useHead-update head meta tags reactively.
@Integrations
@Math
-reactively clamp a value between two other values
-reactive numeric projection from one domain to another
-get the sum of an array reactively
@Motion
useElementStyle-sync a reactive object to a target element CSS styling
useElementTransform-sync a reactive object to a target element CSS transform.
useMotion-putting your components in motion.
@Router
@RxJS
@SchemaOrg
@Sound
useSound-play sound effects reactively.