@robonen/vue
@robonen/vue
Collection of composables and utilities for Vue 3 — 213+ tree-shakeable, SSR-safe composables.
Install
pnpm install @robonen/vue
Composables
| Category | Composables |
|---|---|
| animation | useAnimate, useCountdown, useDateFormat, useInterval, useIntervalFn, useNow, useRafFn, useTimeAgo, useTimeout, useTimeoutFn, useTimestamp, useTransition |
| array | useArrayDifference, useArrayEvery, useArrayFilter, useArrayFind, useArrayFindIndex, useArrayFindLast, useArrayIncludes, useArrayJoin, useArrayMap, useArrayReduce, useArraySome, useArrayUnique, useSorted |
| browser | broadcastedRef, useBreakpoints, useClipboard, useClipboardItems, useCloseWatcher, useColorMode, useCssVar, useDark, useDocumentPiP, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFileSystemAccess, useFullscreen, useImage, useLocalFonts, useMediaQuery, useObjectUrl, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePreferredReducedMotion, usePreferredReducedTransparency, useScriptTag, useShare, useStyleTag, useTabLeader, useTextareaAutosize, useTitle, useUrlSearchParams, useVibrate, useWakeLock, useWebNotification |
| component | createReusableTemplate, unrefElement, useCurrentElement, useForwardExpose, useTemplateRefsList, useVirtualList |
| debug | useRenderCount, useRenderInfo |
| elements | onElementRemoval, useActiveElement, useDocumentReadyState, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useFocusGuard, useIntersectionObserver, useMutationObserver, useParentElement, useResizeObserver, useWindowFocus, useWindowScroll, useWindowSize |
| forms | useField, useFieldArray, useForm, useFormContext |
| lifecycle | tryOnBeforeMount, tryOnMounted, tryOnScopeDispose, useMounted |
| math | logicAnd, logicNot, logicOr, useAbs, useAverage, useCeil, useClamp, useFloor, useMath, useMax, useMin, usePrecision, useProjection, useRound, useSum, useTrunc |
| media | useBluetooth, useDisplayMedia, useMediaControls, useMemory, usePerformanceObserver, useSpeechRecognition, useSpeechSynthesis, useUserMedia, useWebWorker, useWebWorkerFn |
| reactivity | computedAsync, computedEager, computedWithControl, extendRef, reactiveComputed, reactiveOmit, reactivePick, refAutoReset, refDebounced, refDefault, refThrottled, refWithControl, syncRef, toReactive, useCached, useCloned, useDebounceFn, usePrevious, useSyncRefs, useThrottleFn, useToNumber, useToString |
| sensors | onKeyStroke, onLongPress, onStartTyping, useBattery, useBodyScrollLock, useClickOutside, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useElementByPoint, useElementHover, useEscapeKey, useFocus, useFocusWithin, useFps, useGamepad, useGeolocation, useIdle, useInfiniteScroll, useKeyModifier, useMagicKeys, useMouse, useMouseInElement, useMousePressed, useNetwork, useOnline, usePageLeave, useParallax, usePointer, usePointerLock, usePointerSwipe, useScreenOrientation, useScroll, useScrollLock, useSwipe, useTextSelection |
| state | createSharedComposable, useAppSharedState, useAsyncState, useContextFactory, useCounter, useCycleList, useDebouncedRefHistory, useId, useInjectionStore, useLastChanged, useManualRefHistory, useOffsetPagination, useRefHistory, useStepper, useThrottledRefHistory, useToggle |
| storage | useLocalStorage, useSessionStorage, useStorage, useStorageAsync |
| utilities | createEventHook, get, isDefined, set, useEventBus, useMemoize, useSupported |
| watch | until, watchDebounced, watchIgnorable, watchOnce, watchPausable, watchThrottled, whenever |
The package also exports event-filter helpers (debounceFilter, throttleFilter, pausableFilter, createFilterWrapper) and shared types (ConfigurableWindow, ConfigurableDocument, ConfigurableNavigator, ConfigurableFlush, MaybeComputedElementRef, …).
Usage
import { useEventListener, useMagicKeys, useToggle } from @robonen/vue;
const { value, toggle } = useToggle();
useEventListener(scroll, () => {/* … */}, { passive: true });
const keys = useMagicKeys();
watchEffect(() => {
if (keys[ctrl+s].value)
save();
});
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.2.3 | ^3.5 | Apache-2.0 | |
| 0.2.2 | ^3.5 | Apache-2.0 | |
| 0.2.1 | ^3.5 | Apache-2.0 | |
| 0.2.0 | ^3.5 | Apache-2.0 | |
| 0.1.0 | ^3.5 | Apache-2.0 | |
| 0.0.14 | ^3.5 | Apache-2.0 | |
| 0.0.13 | ^3.5.28 | Apache-2.0 | |
| 0.0.12 | ^3.5.28 | Apache-2.0 | |
| 0.0.11 | ^3.5.18 | Apache-2.0 | |
| 0.0.10 | ^3.5.18 | Apache-2.0 | |
| 0.0.9 | ^3.5.17 | Apache-2.0 | |
| 0.0.8 | ^3.5.17 | Apache-2.0 | |
| 0.0.7 | ^3.5.13 | Apache-2.0 | |
| 0.0.6 | catalog: | Apache-2.0 | |
| 0.0.5 | ^3.5.13 | Apache-2.0 | |
| 0.0.4 | ^3.5.12 | Apache-2.0 | |
| 0.0.3 | ^3.5.12 | Apache-2.0 | |
| 0.0.1 | catalog: | Apache-2.0 |