diff --git a/packages/.vitepress/config.ts b/packages/.vitepress/config.ts
index 7023be424a3..0e36d40a46d 100644
--- a/packages/.vitepress/config.ts
+++ b/packages/.vitepress/config.ts
@@ -74,6 +74,7 @@ export default withPwa(defineConfig({
codeTransformers: [
transformerTwoslash(),
],
+ languages: ['js', 'ts'],
},
themeConfig: {
diff --git a/packages/.vitepress/theme/styles/demo.css b/packages/.vitepress/theme/styles/demo.css
index 8a3cd4940b9..ab5da2fc61d 100644
--- a/packages/.vitepress/theme/styles/demo.css
+++ b/packages/.vitepress/theme/styles/demo.css
@@ -122,7 +122,7 @@
outline: none;
background: var(--vp-c-bg);
color: var(--vp-c-text);
- min-width: 20rem;
+ min-width: min(20rem, 100%);
margin: 0.5rem 0;
}
@@ -135,6 +135,39 @@
border: 1px solid var(--vp-c-border);
}
+ .radio {
+ @apply inline-flex items-center my-auto cursor-pointer select-none;
+ }
+
+ .radio input {
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ @apply bg-gray-400/30;
+ @apply rounded-full h-4 w-4 select-none relative;
+ @apply mr-1;
+ --tw-ring-offset-width: 1px !important;
+ --tw-ring-color: #8885 !important;
+ --tw-ring-offset-color: transparent !important;
+ }
+
+ .radio input:checked::after {
+ content: '';
+ @apply absolute inset-[3px] rounded-full bg-primary;
+ }
+
+ .radio span {
+ @apply ml-1.5 text-13px opacity-70;
+ }
+
pre,
.code-block {
opacity: 0.8;
@@ -164,6 +197,7 @@
white-space: pre;
overflow-wrap: normal;
overflow: hidden;
+ max-width: 100%;
}
.float {
diff --git a/packages/core/useCached/demo.vue b/packages/core/useCached/demo.vue
index 857725f0f65..49d479f3b61 100644
--- a/packages/core/useCached/demo.vue
+++ b/packages/core/useCached/demo.vue
@@ -34,11 +34,11 @@ function onSyncClick() {
-
+
-
+
- -->
-
-
diff --git a/packages/core/useUrlSearchParams/demo.vue b/packages/core/useUrlSearchParams/demo.vue
index 2c1e2341c6f..b3e44e88a96 100644
--- a/packages/core/useUrlSearchParams/demo.vue
+++ b/packages/core/useUrlSearchParams/demo.vue
@@ -4,6 +4,10 @@ import { useUrlSearchParams } from '@vueuse/core'
const params = useUrlSearchParams('history')
params.foo = 'bar'
params.vueuse = 'awesome'
+
+function handleAddParams() {
+ params.biz = 'biz'
+}
@@ -11,7 +15,12 @@ params.vueuse = 'awesome'
+
+
diff --git a/packages/core/useVModels/index.test.ts b/packages/core/useVModels/index.test.ts
new file mode 100644
index 00000000000..316a15b51df
--- /dev/null
+++ b/packages/core/useVModels/index.test.ts
@@ -0,0 +1,305 @@
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick, reactive } from 'vue'
+import { useVModels } from './index'
+
+describe('useVModels', () => {
+ it('should be defined', () => {
+ expect(useVModels).toBeDefined()
+ })
+
+ it('should create refs for all props', () => {
+ const props = {
+ name: 'John',
+ age: 25,
+ isActive: true,
+ score: 98.5,
+ }
+
+ const models = useVModels(props)
+
+ expect(models.name.value).toBe('John')
+ expect(models.age.value).toBe(25)
+ expect(models.isActive.value).toBe(true)
+ expect(models.score.value).toBe(98.5)
+ })
+
+ it('should work with empty object', () => {
+ const props = {}
+ const models = useVModels(props)
+
+ expect(typeof models).toBe('object')
+ expect(Object.keys(models)).toHaveLength(0)
+ })
+
+ it('should work with null and undefined values', () => {
+ const props = {
+ nullValue: null,
+ undefinedValue: undefined,
+ }
+
+ const models = useVModels(props)
+
+ expect(models.nullValue.value).toBe(null)
+ expect(models.undefinedValue.value).toBe(undefined)
+ })
+
+ it('should work with nested objects', () => {
+ const props = {
+ user: { name: 'John', age: 25 },
+ config: { theme: 'dark', lang: 'en' },
+ }
+
+ const models = useVModels(props)
+
+ expect(models.user.value).toEqual({ name: 'John', age: 25 })
+ expect(models.config.value).toEqual({ theme: 'dark', lang: 'en' })
+ })
+
+ it('should work with arrays', () => {
+ const props = {
+ items: ['apple', 'banana', 'orange'],
+ numbers: [1, 2, 3],
+ }
+
+ const models = useVModels(props)
+
+ expect(models.items.value).toEqual(['apple', 'banana', 'orange'])
+ expect(models.numbers.value).toEqual([1, 2, 3])
+ })
+
+ it('should emit on value change', async () => {
+ const emitMock = vi.fn()
+ const props = {
+ name: 'John',
+ age: 25,
+ isActive: true,
+ }
+
+ const models = useVModels(props, emitMock)
+
+ models.name.value = 'Jane'
+ models.age.value = 30
+ models.isActive.value = false
+
+ await nextTick()
+
+ expect(emitMock).toHaveBeenCalledWith('update:name', 'Jane')
+ expect(emitMock).toHaveBeenCalledWith('update:age', 30)
+ expect(emitMock).toHaveBeenCalledWith('update:isActive', false)
+ expect(emitMock).toHaveBeenCalledTimes(3)
+ })
+
+ it('should use custom eventName if provided', async () => {
+ const emitMock = vi.fn()
+ const props = {
+ name: 'John',
+ value: 'test',
+ }
+
+ const models = useVModels(props, emitMock, { eventName: 'onChange' })
+
+ models.name.value = 'Jane'
+ models.value.value = 'changed'
+
+ await nextTick()
+
+ expect(emitMock).toHaveBeenCalledWith('onChange', 'Jane')
+ expect(emitMock).toHaveBeenCalledWith('onChange', 'changed')
+ expect(emitMock).toHaveBeenCalledTimes(2)
+ })
+
+ it('should work with passive mode', () => {
+ const emitMock = vi.fn()
+ const props = {
+ name: 'John',
+ age: 25,
+ }
+
+ const models = useVModels(props, emitMock, { passive: true })
+
+ models.name.value = 'Jane'
+ models.age.value = 30
+
+ // In passive mode, emit should not be called
+ expect(emitMock).not.toHaveBeenCalled()
+
+ // But values should still be updated
+ expect(models.name.value).toBe('Jane')
+ expect(models.age.value).toBe(30)
+ })
+
+ it('should work with clone option', () => {
+ const originalUser = { name: 'John', age: 25 }
+ const props = {
+ user: originalUser,
+ }
+
+ const models = useVModels(props, undefined, { clone: true })
+
+ // Should create a copy, not reference the same object
+ expect(models.user.value).toEqual(originalUser)
+ expect(models.user.value).not.toBe(originalUser)
+ })
+
+ it('should work with custom defaultValue', () => {
+ const props = {
+ name: undefined,
+ age: undefined,
+ }
+
+ const models = useVModels(props, undefined, { defaultValue: 'default' })
+
+ expect(models.name.value).toBe('default')
+ expect(models.age.value).toBe('default')
+ })
+
+ it('should work with shouldEmit function', async () => {
+ const emitMock = vi.fn()
+ const shouldEmitMock = vi.fn().mockReturnValue(true)
+ const props = {
+ name: 'John',
+ age: 25,
+ }
+
+ const models = useVModels(props, emitMock, { shouldEmit: shouldEmitMock })
+
+ models.name.value = 'Jane'
+ models.age.value = 30
+
+ await nextTick()
+
+ expect(shouldEmitMock).toHaveBeenCalledWith('Jane')
+ expect(shouldEmitMock).toHaveBeenCalledWith(30)
+ expect(emitMock).toHaveBeenCalledWith('update:name', 'Jane')
+ expect(emitMock).toHaveBeenCalledWith('update:age', 30)
+ })
+
+ it('should not emit when shouldEmit returns false', async () => {
+ const emitMock = vi.fn()
+ const shouldEmitMock = vi.fn().mockReturnValue(false)
+ const props = {
+ name: 'John',
+ }
+
+ const models = useVModels(props, emitMock, { shouldEmit: shouldEmitMock })
+
+ models.name.value = 'Jane'
+
+ await nextTick()
+
+ expect(shouldEmitMock).toHaveBeenCalledWith('Jane')
+ expect(emitMock).not.toHaveBeenCalled()
+ })
+
+ it('should handle complex object mutations', async () => {
+ const emitMock = vi.fn()
+ const props = {
+ user: { name: 'John', age: 25 },
+ config: { theme: 'dark' },
+ }
+
+ const models = useVModels(props, emitMock)
+
+ // Direct object replacement
+ models.user.value = { name: 'Jane', age: 30 }
+ // Property update
+ models.config.value = { theme: 'light' }
+
+ await nextTick()
+
+ expect(emitMock).toHaveBeenCalledWith('update:user', { name: 'Jane', age: 30 })
+ expect(emitMock).toHaveBeenCalledWith('update:config', { theme: 'light' })
+ })
+
+ it('should handle array mutations', async () => {
+ const emitMock = vi.fn()
+ const props = {
+ items: ['apple', 'banana'],
+ numbers: [1, 2, 3],
+ }
+
+ const models = useVModels(props, emitMock)
+
+ models.items.value = ['orange', 'grape']
+ models.numbers.value = [4, 5, 6]
+
+ await nextTick()
+
+ expect(emitMock).toHaveBeenCalledWith('update:items', ['orange', 'grape'])
+ expect(emitMock).toHaveBeenCalledWith('update:numbers', [4, 5, 6])
+ })
+
+ it('should preserve reactivity for all props', async () => {
+ const emitMock = vi.fn()
+ const props = reactive({
+ a: 1,
+ b: 2,
+ c: 3,
+ })
+
+ const models = useVModels(props, emitMock, { passive: true })
+
+ // Change all values
+ models.a.value = 10
+ models.b.value = 20
+ models.c.value = 30
+
+ await nextTick()
+
+ expect(models.a.value).toBe(10)
+ expect(models.b.value).toBe(20)
+ expect(models.c.value).toBe(30)
+ expect(emitMock).toHaveBeenCalledTimes(3)
+ expect(emitMock).toHaveBeenCalledWith('update:a', 10)
+ expect(emitMock).toHaveBeenCalledWith('update:b', 20)
+ expect(emitMock).toHaveBeenCalledWith('update:c', 30)
+ })
+
+ it('should work with mixed data types', () => {
+ const props = {
+ string: 'hello',
+ number: 42,
+ boolean: true,
+ array: [1, 2, 3],
+ object: { key: 'value' },
+ nullValue: null,
+ undefinedValue: undefined,
+ }
+
+ const models = useVModels(props)
+
+ expect(models.string.value).toBe('hello')
+ expect(models.number.value).toBe(42)
+ expect(models.boolean.value).toBe(true)
+ expect(models.array.value).toEqual([1, 2, 3])
+ expect(models.object.value).toEqual({ key: 'value' })
+ expect(models.nullValue.value).toBe(null)
+ expect(models.undefinedValue.value).toBe(undefined)
+ })
+
+ it('should work without emit function', async () => {
+ const props = reactive({
+ name: 'John',
+ age: 25,
+ })
+
+ // Provide a no-op emit function
+ const noOpEmit = vi.fn()
+ const models = useVModels(props, noOpEmit, { passive: true })
+
+ expect(models.name.value).toBe('John')
+ expect(models.age.value).toBe(25)
+
+ // Should not throw error when changing values
+ models.name.value = 'Jane'
+ models.age.value = 30
+
+ await nextTick()
+
+ expect(models.name.value).toBe('Jane')
+ expect(models.age.value).toBe(30)
+
+ // The emit function should have been called
+ expect(noOpEmit).toHaveBeenCalledTimes(2)
+ })
+})
diff --git a/packages/core/useVibrate/demo.vue b/packages/core/useVibrate/demo.vue
new file mode 100644
index 00000000000..c4dacae6b7e
--- /dev/null
+++ b/packages/core/useVibrate/demo.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
{{ isSupported ? 'Vibration API Supported' : 'Your browser does not support the Vibration API' }}
+
+
+
+
+
+
+
-version: 12.1.0
-date: 2024-12-23T08:32:26.309Z
+version: 13.5.0
+date: 2025-07-11T09:34:53.844Z
> Please note this is bundle size for each individual APIs (excluding Vue). Since we have a lot shared utilities underneath each function, importing two different functions does NOT necessarily mean the bundle size will be the sum of them (usually smaller). Depends on the bundler and minifier you use, the final result might vary, this list is for reference only.
@vueuse/core
-| Function | min+gzipped |
-| ------------------------------- | ----------- |
-| `useDark` | 2.8 kB |
-| `useColorMode` | 2.69 kB |
-| `createFetch` | 2.59 kB |
-| `useInfiniteScroll` | 2.51 kB |
-| `useFetch` | 2.24 kB |
-| `useMediaControls` | 2.17 kB |
-| `useParallax` | 1.94 kB |
-| `useSessionStorage` | 1.82 kB |
-| `useLocalStorage` | 1.81 kB |
-| `useScroll` | 1.79 kB |
-| `useStorage` | 1.78 kB |
-| `useVirtualList` | 1.75 kB |
-| `useAnimate` | 1.64 kB |
-| `useScreenSafeArea` | 1.5 kB |
-| `useWebSocket` | 1.44 kB |
-| `usePointerLock` | 1.42 kB |
-| `useStorageAsync` | 1.41 kB |
-| `useTimeAgo` | 1.39 kB |
-| `useThrottledRefHistory` | 1.37 kB |
-| `useClipboard` | 1.35 kB |
-| `useGamepad` | 1.34 kB |
-| `useMouseInElement` | 1.31 kB |
-| `useDraggable` | 1.3 kB |
-| `useUrlSearchParams` | 1.3 kB |
-| `useDebouncedRefHistory` | 1.28 kB |
-| `useElementBounding` | 1.25 kB |
-| `usePointerSwipe` | 1.24 kB |
-| `useDevicesList` | 1.2 kB |
-| `useFocusWithin` | 1.13 kB |
-| `useScrollLock` | 1.12 kB |
-| `useWebNotification` | 1.11 kB |
-| `useImage` | 1.11 kB |
-| `useFullscreen` | 1.1 kB |
-| `useRefHistory` | 1.09 kB |
-| `useIdle` | 1.08 kB |
-| `useMagicKeys` | 1.08 kB |
-| `useSwipe` | 1.04 kB |
-| `onClickOutside` | 1.03 kB |
-| `useActiveElement` | 1.02 kB |
-| `useEventSource` | 1.02 kB |
-| `useWindowSize` | 1.02 kB |
-| `useMouse` | 1 kB |
-| `useWakeLock` | 991 B |
-| `useDropZone` | 990 B |
-| `onLongPress` | 979 B |
-| `usePointer` | 959 B |
-| `useTitle` | 954 B |
-| `useClipboardItems` | 939 B |
-| `useDateFormat` | 932 B |
-| `useAsyncState` | 930 B |
-| `useTransition` | 920 B |
-| `useBreakpoints` | 919 B |
-| `useOffsetPagination` | 918 B |
-| `useElementSize` | 903 B |
-| `useOnline` | 900 B |
-| `useNetwork` | 889 B |
-| `useWebWorkerFn` | 875 B |
-| `usePermission` | 869 B |
-| `useElementByPoint` | 834 B |
-| `useBrowserLocation` | 820 B |
-| `useTextDirection` | 808 B |
-| `useCssVar` | 802 B |
-| `useBattery` | 799 B |
-| `useTextareaAutosize` | 779 B |
-| `useBase64` | 771 B |
-| `useScreenOrientation` | 770 B |
-| `useDeviceMotion` | 758 B |
-| `onStartTyping` | 757 B |
-| `formatTimeAgo` | 750 B |
-| `useSpeechSynthesis` | 748 B |
-| `useElementVisibility` | 735 B |
-| `useMousePressed` | 735 B |
-| `onKeyPressed` | 733 B |
-| `onKeyDown` | 731 B |
-| `useDeviceOrientation` | 731 B |
-| `onKeyUp` | 730 B |
-| `useTextSelection` | 723 B |
-| `useFocus` | 718 B |
-| `useScriptTag` | 713 B |
-| `useSpeechRecognition` | 705 B |
-| `onKeyStroke` | 702 B |
-| `useFileSystemAccess` | 699 B |
-| `formatDate` | 699 B |
-| `useVibrate` | 690 B |
-| `useNavigatorLanguage` | 681 B |
-| `useTimestamp` | 678 B |
-| `useWindowScroll` | 666 B |
-| `useElementHover` | 650 B |
-| `useKeyModifier` | 644 B |
-| `useIntersectionObserver` | 642 B |
-| `useNow` | 641 B |
-| `useUserMedia` | 636 B |
-| `until` | 631 B |
-| `useBluetooth` | 627 B |
-| `usePageLeave` | 625 B |
-| `watchTriggerable` | 618 B |
-| `executeTransition` | 614 B |
-| `useDocumentVisibility` | 599 B |
-| `usePreferredLanguages` | 592 B |
-| `useWindowFocus` | 590 B |
-| `useFileDialog` | 577 B |
-| `createReusableTemplate` | 576 B |
-| `useMutationObserver` | 564 B |
-| `useGeolocation` | 558 B |
-| `refThrottled` | 556 B |
-| `throttledRef` | 556 B |
-| `useThrottle` | 556 B |
-| `throttledWatch` | 550 B |
-| `watchThrottled` | 550 B |
-| `useMemory` | 533 B |
-| `syncRef` | 527 B |
-| `usePreferredContrast` | 522 B |
-| `useResizeObserver` | 520 B |
-| `useManualRefHistory` | 518 B |
-| `usePreferredColorScheme` | 515 B |
-| `useEventListener` | 514 B |
-| `useBroadcastChannel` | 510 B |
-| `useVModels` | 509 B |
-| `useAsyncQueue` | 501 B |
-| `usePreferredReducedMotion` | 499 B |
-| `useFps` | 497 B |
-| `useParentElement` | 497 B |
-| `useStyleTag` | 497 B |
-| `useDisplayMedia` | 496 B |
-| `useThrottleFn` | 493 B |
-| `usePreferredDark` | 486 B |
-| `useVModel` | 486 B |
-| `reactivePick` | 477 B |
-| `debouncedWatch` | 458 B |
-| `watchDebounced` | 458 B |
-| `useMediaQuery` | 455 B |
-| `useCycleList` | 454 B |
-| `useInterval` | 453 B |
-| `useFavicon` | 445 B |
-| `debouncedRef` | 440 B |
-| `refDebounced` | 440 B |
-| `useDebounce` | 440 B |
-| `ignorableWatch` | 433 B |
-| `watchIgnorable` | 433 B |
-| `controlledRef` | 413 B |
-| `useTimeoutPoll` | 411 B |
-| `useTimeout` | 409 B |
-| `reactiveOmit` | 403 B |
-| `useConfirmDialog` | 402 B |
-| `refWithControl` | 402 B |
-| `useCurrentElement` | 401 B |
-| `throttleFilter` | 394 B |
-| `useStepper` | 392 B |
-| `useDebounceFn` | 392 B |
-| `usePerformanceObserver` | 388 B |
-| `createTemplatePromise` | 387 B |
-| `useRafFn` | 385 B |
-| `useIntervalFn` | 368 B |
-| `useShare` | 365 B |
-| `createInjectionState` | 364 B |
-| `useArrayIncludes` | 362 B |
-| `useSorted` | 356 B |
-| `asyncComputed` | 347 B |
-| `computedAsync` | 347 B |
-| `pausableWatch` | 347 B |
-| `watchPausable` | 347 B |
-| `TransitionPresets` | 345 B |
-| `watchAtMost` | 339 B |
-| `useWebWorker` | 325 B |
-| `reactifyObject` | 324 B |
-| `useTimeoutFn` | 321 B |
-| `useDevicePixelRatio` | 309 B |
-| `toRefs` | 309 B |
-| `watchArray` | 301 B |
-| `debounceFilter` | 299 B |
-| `normalizeDate` | 291 B |
-| `reactiveComputed` | 288 B |
-| `templateRef` | 283 B |
-| `useEyeDropper` | 283 B |
-| `useEventBus` | 282 B |
-| `toReactive` | 269 B |
-| `computedWithControl` | 267 B |
-| `controlledComputed` | 267 B |
-| `useObjectUrl` | 263 B |
-| `useCloned` | 262 B |
-| `useArrayDifference` | 256 B |
-| `autoResetRef` | 255 B |
-| `refAutoReset` | 255 B |
-| `usePrevious` | 251 B |
-| `mapGamepadToXbox360Controller` | 247 B |
-| `useCounter` | 247 B |
-| `useMemoize` | 242 B |
-| `createEventHook` | 238 B |
-| `isIOS` | 238 B |
-| `useArrayUnique` | 236 B |
-| `watchWithFilter` | 233 B |
-| `createSharedComposable` | 232 B |
-| `injectLocal` | 229 B |
-| `provideLocal` | 227 B |
-| `useToggle` | 224 B |
-| `useToNumber` | 223 B |
-| `useArrayFindLast` | 216 B |
-| `StorageSerializers` | 211 B |
-| `extendRef` | 207 B |
-| `useArrayReduce` | 203 B |
-| `makeDestructurable` | 201 B |
-| `increaseWithUnit` | 199 B |
-| `createReactiveFn` | 198 B |
-| `reactify` | 198 B |
-| `resolveRef` | 193 B |
-| `computedEager` | 189 B |
-| `eagerComputed` | 189 B |
-| `setSSRHandler` | 188 B |
-| `hyphenate` | 187 B |
-| `getSSRHandler` | 186 B |
-| `syncRefs` | 185 B |
-| `camelize` | 184 B |
-| `pausableFilter` | 181 B |
-| `toRef` | 180 B |
-| `useSupported` | 176 B |
-| `whenever` | 173 B |
-| `createFilterWrapper` | 172 B |
-| `useLastChanged` | 172 B |
-| `tryOnBeforeMount` | 163 B |
-| `tryOnMounted` | 162 B |
-| `useArraySome` | 161 B |
-| `useArrayJoin` | 160 B |
-| `useArrayFind` | 159 B |
-| `createSingletonPromise` | 157 B |
-| `useArrayEvery` | 157 B |
-| `useArrayFindIndex` | 157 B |
-| `useArrayMap` | 155 B |
-| `createUnrefFn` | 153 B |
-| `unrefElement` | 152 B |
-| `createGlobalState` | 152 B |
-| `useArrayFilter` | 151 B |
-| `tryOnBeforeUnmount` | 148 B |
-| `objectOmit` | 145 B |
-| `useToString` | 145 B |
-| `tryOnUnmounted` | 144 B |
-| `computedInject` | 142 B |
-| `objectPick` | 141 B |
-| `refDefault` | 140 B |
-| `watchOnce` | 140 B |
-| `promiseTimeout` | 138 B |
-| `useTemplateRefsList` | 133 B |
-| `isObject` | 133 B |
-| `DefaultMagicKeysAliasMap` | 130 B |
-| `getLifeCycleTarget` | 128 B |
-| `resolveUnref` | 128 B |
-| `set` | 127 B |
-| `tryOnScopeDispose` | 125 B |
-| `rand` | 124 B |
-| `breakpointsMasterCss` | 120 B |
-| `assert` | 120 B |
-| `defaultLocation` | 118 B |
-| `defaultNavigator` | 118 B |
-| `get` | 117 B |
-| `watchImmediate` | 117 B |
-| `defaultWindow` | 116 B |
-| `defaultDocument` | 114 B |
-| `useCached` | 114 B |
-| `useMounted` | 114 B |
-| `watchDeep` | 113 B |
-| `breakpointsSematic` | 111 B |
-| `containsProp` | 111 B |
-| `clamp` | 109 B |
-| `breakpointsBootstrapV5` | 108 B |
-| `hasOwn` | 107 B |
-| `noop` | 107 B |
-| `now` | 106 B |
-| `toValue` | 106 B |
-| `breakpointsTailwind` | 104 B |
-| `isDefined` | 103 B |
-| `timestamp` | 103 B |
-| `breakpointsVuetifyV3` | 102 B |
-| `notNullish` | 102 B |
-| `bypassFilter` | 98 B |
-| `isClient` | 97 B |
-| `breakpointsAntDesign` | 96 B |
-| `breakpointsVuetifyV2` | 96 B |
-| `isDef` | 94 B |
-| `objectEntries` | 94 B |
-| `breakpointsVuetify` | 93 B |
-| `breakpointsQuasar` | 92 B |
-| `invoke` | 92 B |
-| `isWorker` | 84 B |
-| `identity` | 83 B |
-| `breakpointsPrimeFlex` | 82 B |
-| `breakpointsElement` | 81 B |
-| `cloneFnJSON` | 78 B |
-| `customStorageEventName` | 67 B |
+| Function | min+gzipped |
+| --------------------------------- | ----------- |
+| `useDark` | 3.24 kB |
+| `useColorMode` | 3.14 kB |
+| `useInfiniteScroll` | 2.86 kB |
+| `createFetch` | 2.66 kB |
+| `useParallax` | 2.41 kB |
+| `useFetch` | 2.28 kB |
+| `useMediaControls` | 2.26 kB |
+| `useWindowScroll` | 2.24 kB |
+| `useScroll` | 2.22 kB |
+| `useSessionStorage` | 2.03 kB |
+| `useLocalStorage` | 2.03 kB |
+| `useStorage` | 2 kB |
+| `useMouseInElement` | 1.87 kB |
+| `useAnimate` | 1.75 kB |
+| `useBreakpoints` | 1.74 kB |
+| `useVirtualList` | 1.74 kB |
+| `useScreenSafeArea` | 1.63 kB |
+| `useWebSocket` | 1.58 kB |
+| `useUrlSearchParams` | 1.51 kB |
+| `useWindowSize` | 1.49 kB |
+| `usePointerLock` | 1.48 kB |
+| `useStorageAsync` | 1.47 kB |
+| `useGamepad` | 1.47 kB |
+| `useThrottledRefHistory` | 1.47 kB |
+| `useClipboard` | 1.44 kB |
+| `useTimeAgo` | 1.42 kB |
+| `useDebouncedRefHistory` | 1.39 kB |
+| `useDraggable` | 1.37 kB |
+| `useFocusWithin` | 1.37 kB |
+| `useDevicesList` | 1.34 kB |
+| `usePointerSwipe` | 1.33 kB |
+| `useElementBounding` | 1.31 kB |
+| `onClickOutside` | 1.27 kB |
+| `useDevicePixelRatio` | 1.27 kB |
+| `usePreferredContrast` | 1.24 kB |
+| `usePreferredColorScheme` | 1.24 kB |
+| `useWebNotification` | 1.23 kB |
+| `useFullscreen` | 1.23 kB |
+| `usePreferredReducedTransparency` | 1.22 kB |
+| `usePreferredReducedMotion` | 1.22 kB |
+| `usePreferredDark` | 1.21 kB |
+| `useScrollLock` | 1.2 kB |
+| `useRefHistory` | 1.2 kB |
+| `useActiveElement` | 1.19 kB |
+| `useImage` | 1.19 kB |
+| `useDeviceMotion` | 1.19 kB |
+| `useIdle` | 1.18 kB |
+| `useMagicKeys` | 1.17 kB |
+| `useMediaQuery` | 1.17 kB |
+| `useElementHover` | 1.17 kB |
+| `useScriptTag` | 1.16 kB |
+| `useDropZone` | 1.13 kB |
+| `useEventSource` | 1.12 kB |
+| `useMouse` | 1.08 kB |
+| `useBluetooth` | 1.04 kB |
+| `onLongPress` | 1.04 kB |
+| `useWakeLock` | 1.04 kB |
+| `useClipboardItems` | 1.03 kB |
+| `usePointer` | 1.03 kB |
+| `useOffsetPagination` | 1.02 kB |
+| `useSwipe` | 1.02 kB |
+| `useOnline` | 979 B |
+| `useDateFormat` | 972 B |
+| `useNetwork` | 964 B |
+| `usePermission` | 941 B |
+| `useAsyncState` | 931 B |
+| `useDisplayMedia` | 926 B |
+| `useTextareaAutosize` | 922 B |
+| `useBroadcastChannel` | 917 B |
+| `useTitle` | 912 B |
+| `useTransition` | 912 B |
+| `useElementSize` | 897 B |
+| `useWebWorkerFn` | 888 B |
+| `useBrowserLocation` | 884 B |
+| `useBattery` | 869 B |
+| `useElementByPoint` | 859 B |
+| `useScreenOrientation` | 848 B |
+| `useMousePressed` | 837 B |
+| `onStartTyping` | 825 B |
+| `onKeyPressed` | 813 B |
+| `onKeyUp` | 812 B |
+| `onKeyDown` | 811 B |
+| `useDeviceOrientation` | 807 B |
+| `useFocus` | 802 B |
+| `useCssVar` | 796 B |
+| `useTextDirection` | 796 B |
+| `useBase64` | 794 B |
+| `useElementVisibility` | 793 B |
+| `useTextSelection` | 786 B |
+| `onKeyStroke` | 784 B |
+| `useNavigatorLanguage` | 759 B |
+| `formatTimeAgo` | 750 B |
+| `formatDate` | 742 B |
+| `useSpeechSynthesis` | 736 B |
+| `onElementRemoval` | 735 B |
+| `useKeyModifier` | 728 B |
+| `useSpeechRecognition` | 714 B |
+| `useTimestamp` | 709 B |
+| `usePageLeave` | 707 B |
+| `useFileDialog` | 702 B |
+| `useVibrate` | 700 B |
+| `useDocumentVisibility` | 692 B |
+| `useFileSystemAccess` | 683 B |
+| `useWindowFocus` | 681 B |
+| `useNow` | 676 B |
+| `usePreferredLanguages` | 664 B |
+| `useIntersectionObserver` | 638 B |
+| `syncRef` | 637 B |
+| `useUserMedia` | 633 B |
+| `until` | 609 B |
+| `executeTransition` | 603 B |
+| `createReusableTemplate` | 593 B |
+| `useEventListener` | 588 B |
+| `watchTriggerable` | 570 B |
+| `useCountdown` | 565 B |
+| `useMutationObserver` | 558 B |
+| `useFps` | 553 B |
+| `useGeolocation` | 553 B |
+| `useMemory` | 538 B |
+| `refThrottled` | 534 B |
+| `throttledRef` | 534 B |
+| `useThrottle` | 534 B |
+| `throttledWatch` | 531 B |
+| `watchThrottled` | 531 B |
+| `useManualRefHistory` | 518 B |
+| `useStyleTag` | 513 B |
+| `useVModels` | 509 B |
+| `useAsyncQueue` | 505 B |
+| `useResizeObserver` | 500 B |
+| `useVModel` | 486 B |
+| `useThrottleFn` | 471 B |
+| `useParentElement` | 467 B |
+| `reactivePick` | 464 B |
+| `pausableWatch` | 463 B |
+| `watchPausable` | 463 B |
+| `useInterval` | 461 B |
+| `debouncedWatch` | 455 B |
+| `watchDebounced` | 455 B |
+| `debouncedRef` | 451 B |
+| `refDebounced` | 451 B |
+| `useDebounce` | 451 B |
+| `useCycleList` | 444 B |
+| `useRafFn` | 443 B |
+| `useFavicon` | 441 B |
+| `useConfirmDialog` | 416 B |
+| `useTimeoutPoll` | 414 B |
+| `controlledRef` | 413 B |
+| `ignorableWatch` | 410 B |
+| `watchIgnorable` | 410 B |
+| `refWithControl` | 402 B |
+| `useTimeout` | 402 B |
+| `reactiveOmit` | 395 B |
+| `useStepper` | 392 B |
+| `usePerformanceObserver` | 391 B |
+| `createTemplatePromise` | 390 B |
+| `useDebounceFn` | 388 B |
+| `createInjectionState` | 386 B |
+| `throttleFilter` | 371 B |
+| `useIntervalFn` | 367 B |
+| `useCurrentElement` | 365 B |
+| `asyncComputed` | 360 B |
+| `computedAsync` | 360 B |
+| `useShare` | 360 B |
+| `TransitionPresets` | 345 B |
+| `useArrayIncludes` | 344 B |
+| `useTimeoutFn` | 335 B |
+| `useWebWorker` | 325 B |
+| `watchAtMost` | 323 B |
+| `reactifyObject` | 318 B |
+| `useSSRWidth` | 309 B |
+| `useSorted` | 309 B |
+| `watchArray` | 303 B |
+| `useArrayDifference` | 301 B |
+| `pausableFilter` | 293 B |
+| `debounceFilter` | 292 B |
+| `normalizeDate` | 291 B |
+| `useCloned` | 289 B |
+| `provideSSRWidth` | 288 B |
+| `reactiveComputed` | 288 B |
+| `toRefs` | 285 B |
+| `templateRef` | 283 B |
+| `useEyeDropper` | 283 B |
+| `useEventBus` | 282 B |
+| `toReactive` | 269 B |
+| `useCounter` | 265 B |
+| `computedWithControl` | 251 B |
+| `controlledComputed` | 251 B |
+| `usePrevious` | 249 B |
+| `mapGamepadToXbox360Controller` | 247 B |
+| `useObjectUrl` | 247 B |
+| `createEventHook` | 247 B |
+| `injectLocal` | 246 B |
+| `useMemoize` | 242 B |
+| `isIOS` | 238 B |
+| `autoResetRef` | 236 B |
+| `refAutoReset` | 236 B |
+| `watchWithFilter` | 233 B |
+| `createSharedComposable` | 232 B |
+| `provideLocal` | 226 B |
+| `useArrayUnique` | 219 B |
+| `useToNumber` | 213 B |
+| `StorageSerializers` | 211 B |
+| `useToggle` | 208 B |
+| `extendRef` | 207 B |
+| `useArrayFindLast` | 204 B |
+| `makeDestructurable` | 201 B |
+| `useCached` | 199 B |
+| `increaseWithUnit` | 199 B |
+| `syncRefs` | 198 B |
+| `resolveRef` | 193 B |
+| `computedEager` | 189 B |
+| `eagerComputed` | 189 B |
+| `setSSRHandler` | 188 B |
+| `useLastChanged` | 188 B |
+| `hyphenate` | 187 B |
+| `getSSRHandler` | 186 B |
+| `camelize` | 184 B |
+| `useArrayReduce` | 183 B |
+| `toRef` | 181 B |
+| `createReactiveFn` | 179 B |
+| `reactify` | 179 B |
+| `whenever` | 173 B |
+| `createFilterWrapper` | 172 B |
+| `useSupported` | 170 B |
+| `tryOnMounted` | 164 B |
+| `tryOnBeforeMount` | 163 B |
+| `createSingletonPromise` | 157 B |
+| `createGlobalState` | 152 B |
+| `tryOnBeforeUnmount` | 148 B |
+| `objectOmit` | 145 B |
+| `tryOnUnmounted` | 144 B |
+| `computedInject` | 142 B |
+| `objectPick` | 141 B |
+| `refDefault` | 140 B |
+| `useArrayJoin` | 139 B |
+| `promiseTimeout` | 138 B |
+| `useArrayFindIndex` | 138 B |
+| `useArrayFind` | 137 B |
+| `useArraySome` | 135 B |
+| `useTemplateRefsList` | 133 B |
+| `isObject` | 133 B |
+| `useArrayFilter` | 133 B |
+| `useArrayEvery` | 131 B |
+| `DefaultMagicKeysAliasMap` | 130 B |
+| `useArrayMap` | 129 B |
+| `getLifeCycleTarget` | 128 B |
+| `set` | 127 B |
+| `tryOnScopeDispose` | 125 B |
+| `rand` | 124 B |
+| `watchOnce` | 123 B |
+| `useMounted` | 122 B |
+| `breakpointsMasterCss` | 120 B |
+| `assert` | 120 B |
+| `defaultLocation` | 118 B |
+| `defaultNavigator` | 118 B |
+| `useToString` | 118 B |
+| `get` | 117 B |
+| `watchImmediate` | 117 B |
+| `defaultWindow` | 116 B |
+| `defaultDocument` | 114 B |
+| `pxValue` | 114 B |
+| `createRef` | 113 B |
+| `watchDeep` | 113 B |
+| `breakpointsSematic` | 111 B |
+| `containsProp` | 111 B |
+| `clamp` | 109 B |
+| `breakpointsBootstrapV5` | 108 B |
+| `hasOwn` | 107 B |
+| `noop` | 107 B |
+| `now` | 106 B |
+| `breakpointsTailwind` | 104 B |
+| `isDefined` | 103 B |
+| `timestamp` | 103 B |
+| `breakpointsVuetifyV3` | 102 B |
+| `unrefElement` | 102 B |
+| `notNullish` | 102 B |
+| `toArray` | 102 B |
+| `createUnrefFn` | 101 B |
+| `bypassFilter` | 98 B |
+| `isClient` | 97 B |
+| `breakpointsAntDesign` | 96 B |
+| `breakpointsVuetifyV2` | 96 B |
+| `isDef` | 94 B |
+| `objectEntries` | 94 B |
+| `resolveUnref` | 94 B |
+| `toValue` | 94 B |
+| `breakpointsVuetify` | 93 B |
+| `breakpointsQuasar` | 92 B |
+| `invoke` | 92 B |
+| `isWorker` | 84 B |
+| `identity` | 83 B |
+| `breakpointsPrimeFlex` | 82 B |
+| `breakpointsElement` | 81 B |
+| `cloneFnJSON` | 78 B |
+| `customStorageEventName` | 67 B |
@vueuse/components
-| Function | min+gzipped |
-| --------------------------- | ----------- |
-| `UseColorMode` | 3.35 kB |
-| `vInfiniteScroll` | 3.12 kB |
-| `vScroll` | 2.49 kB |
-| `UseScreenSafeArea` | 2.3 kB |
-| `UseImage` | 2.24 kB |
-| `vElementSize` | 1.85 kB |
-| `OnLongPress` | 1.76 kB |
-| `vElementVisibility` | 1.68 kB |
-| `VOnLongPress` | 1.67 kB |
-| `vOnLongPress` | 1.67 kB |
-| `VOnClickOutside` | 1.67 kB |
-| `vOnClickOutside` | 1.67 kB |
-| `vIntersectionObserver` | 1.56 kB |
-| `UseDraggable` | 1.56 kB |
-| `vOnKeyStroke` | 1.46 kB |
-| `vResizeObserver` | 1.45 kB |
-| `UseDark` | 1.42 kB |
-| `UseVirtualList` | 1.41 kB |
-| `UseOffsetPagination` | 1.38 kB |
-| `vElementHover` | 1.36 kB |
-| `UseElementSize` | 1.32 kB |
-| `UseTimeAgo` | 1.31 kB |
-| `UsePointer` | 1.31 kB |
-| `OnClickOutside` | 1.31 kB |
-| `UseMousePressed` | 1.31 kB |
-| `UseMouseInElement` | 1.3 kB |
-| `UseElementBounding` | 1.29 kB |
-| `UseIdle` | 1.29 kB |
-| `UseClipboard` | 1.29 kB |
-| `UseElementVisibility` | 1.29 kB |
-| `UseGeolocation` | 1.29 kB |
-| `UseFullscreen` | 1.29 kB |
-| `UsePointerLock` | 1.29 kB |
-| `UseDevicesList` | 1.29 kB |
-| `UseEyeDropper` | 1.28 kB |
-| `UseMouse` | 1.28 kB |
-| `UseTimestamp` | 1.28 kB |
-| `UseWindowSize` | 1.27 kB |
-| `UseNow` | 1.27 kB |
-| `UseObjectUrl` | 1.27 kB |
-| `UsePreferredReducedMotion` | 1.27 kB |
-| `UsePreferredColorScheme` | 1.27 kB |
-| `UsePreferredContrast` | 1.26 kB |
-| `UsePageLeave` | 1.26 kB |
-| `UseDevicePixelRatio` | 1.26 kB |
-| `UseDocumentVisibility` | 1.26 kB |
-| `UsePreferredDark` | 1.26 kB |
-| `UseWindowFocus` | 1.26 kB |
-| `UseActiveElement` | 1.26 kB |
-| `UseDeviceMotion` | 1.26 kB |
-| `UsePreferredLanguages` | 1.26 kB |
-| `UseOnline` | 1.26 kB |
-| `UseDeviceOrientation` | 1.26 kB |
-| `UseBattery` | 1.26 kB |
-| `UseBrowserLocation` | 1.25 kB |
-| `UseNetwork` | 1.25 kB |
-| `vScrollLock` | 1.19 kB |
+| Function | min+gzipped |
+| --------------------------------- | ----------- |
+| `UseColorMode` | 3.78 kB |
+| `vInfiniteScroll` | 3.49 kB |
+| `vScroll` | 2.94 kB |
+| `vMouseInElement` | 2.8 kB |
+| `UseScreenSafeArea` | 2.44 kB |
+| `UseImage` | 2.43 kB |
+| `vElementBounding` | 2.05 kB |
+| `VOnClickOutside` | 1.95 kB |
+| `vOnClickOutside` | 1.95 kB |
+| `vElementSize` | 1.93 kB |
+| `vElementHover` | 1.87 kB |
+| `OnLongPress` | 1.84 kB |
+| `vElementVisibility` | 1.79 kB |
+| `VOnLongPress` | 1.76 kB |
+| `vOnLongPress` | 1.76 kB |
+| `UseDraggable` | 1.64 kB |
+| `vIntersectionObserver` | 1.64 kB |
+| `vOnKeyStroke` | 1.54 kB |
+| `vResizeObserver` | 1.54 kB |
+| `UseDark` | 1.5 kB |
+| `UseVirtualList` | 1.49 kB |
+| `UseOffsetPagination` | 1.47 kB |
+| `UseElementSize` | 1.43 kB |
+| `UseTimeAgo` | 1.41 kB |
+| `OnClickOutside` | 1.4 kB |
+| `UseMousePressed` | 1.39 kB |
+| `UsePointer` | 1.39 kB |
+| `UseMouseInElement` | 1.39 kB |
+| `UseClipboard` | 1.38 kB |
+| `UseElementVisibility` | 1.38 kB |
+| `UseElementBounding` | 1.38 kB |
+| `UseIdle` | 1.38 kB |
+| `UseGeolocation` | 1.38 kB |
+| `UseFullscreen` | 1.37 kB |
+| `UsePointerLock` | 1.37 kB |
+| `UseDevicesList` | 1.37 kB |
+| `UseTimestamp` | 1.37 kB |
+| `UseMouse` | 1.37 kB |
+| `UseEyeDropper` | 1.36 kB |
+| `UseWindowSize` | 1.36 kB |
+| `UsePreferredReducedTransparency` | 1.36 kB |
+| `UseNow` | 1.36 kB |
+| `UseObjectUrl` | 1.36 kB |
+| `UseDevicePixelRatio` | 1.35 kB |
+| `UsePreferredReducedMotion` | 1.35 kB |
+| `UsePreferredColorScheme` | 1.35 kB |
+| `UsePreferredContrast` | 1.35 kB |
+| `UsePreferredDark` | 1.35 kB |
+| `UsePreferredLanguages` | 1.35 kB |
+| `UseWindowFocus` | 1.35 kB |
+| `UsePageLeave` | 1.35 kB |
+| `UseDocumentVisibility` | 1.34 kB |
+| `UseOnline` | 1.34 kB |
+| `UseActiveElement` | 1.34 kB |
+| `UseDeviceOrientation` | 1.34 kB |
+| `UseBattery` | 1.34 kB |
+| `UseNetwork` | 1.34 kB |
+| `UseBrowserLocation` | 1.34 kB |
+| `UseDeviceMotion` | 1.33 kB |
+| `vScrollLock` | 1.28 kB |
@vueuse/math
| Function | min+gzipped |
| ------------------------- | ----------- |
-| `usePrecision` | 263 B |
-| `useClamp` | 235 B |
-| `useAverage` | 219 B |
-| `useProjection` | 214 B |
-| `useSum` | 212 B |
-| `useMin` | 211 B |
-| `useMax` | 209 B |
-| `createProjection` | 201 B |
-| `useMath` | 193 B |
-| `createGenericProjection` | 156 B |
-| `and` | 149 B |
-| `logicAnd` | 149 B |
-| `logicOr` | 148 B |
-| `or` | 148 B |
-| `useFloor` | 146 B |
-| `useAbs` | 145 B |
-| `useRound` | 145 B |
-| `useTrunc` | 144 B |
-| `useCeil` | 143 B |
-| `logicNot` | 141 B |
-| `not` | 141 B |
+| `useClamp` | 223 B |
+| `usePrecision` | 212 B |
+| `useSum` | 190 B |
+| `useMax` | 184 B |
+| `useMath` | 178 B |
+| `useMin` | 172 B |
+| `useAverage` | 171 B |
+| `useProjection` | 163 B |
+| `createProjection` | 153 B |
+| `and` | 104 B |
+| `logicAnd` | 104 B |
+| `createGenericProjection` | 97 B |
+| `logicOr` | 95 B |
+| `or` | 95 B |
+| `useTrunc` | 94 B |
+| `useCeil` | 92 B |
+| `useRound` | 92 B |
+| `useAbs` | 90 B |
+| `useFloor` | 90 B |
+| `logicNot` | 83 B |
+| `not` | 83 B |
@vueuse/nuxt
| Function | min+gzipped |
| --------- | ----------- |
-| `default` | 801 B |
+| `default` | 831 B |
@vueuse/router
| Function | min+gzipped |
| ---------------- | ----------- |
-| `useRouteParams` | 496 B |
-| `useRouteQuery` | 487 B |
-| `useRouteHash` | 380 B |
+| `useRouteParams` | 518 B |
+| `useRouteQuery` | 506 B |
+| `useRouteHash` | 359 B |
@vueuse/integrations
| Function | min+gzipped |
| ------------------- | ----------- |
-| `useAxios` | 1.4 kB |
-| `useAsyncValidator` | 1.14 kB |
-| `useDrauu` | 766 B |
-| `createCookies` | 563 B |
-| `useFocusTrap` | 533 B |
-| `useCookies` | 525 B |
+| `useAxios` | 1.39 kB |
+| `useAsyncValidator` | 1.13 kB |
+| `useDrauu` | 780 B |
+| `useSortable` | 572 B |
+| `createCookies` | 570 B |
+| `useCookies` | 534 B |
+| `useNProgress` | 531 B |
| `useIDBKeyval` | 525 B |
-| `useSortable` | 494 B |
-| `useFuse` | 467 B |
-| `useNProgress` | 448 B |
-| `useChangeCase` | 429 B |
-| `useQRCode` | 401 B |
-| `useJwt` | 339 B |
-| `moveArrayElement` | 270 B |
+| `useFocusTrap` | 515 B |
+| `useFuse` | 424 B |
+| `useQRCode` | 403 B |
+| `useChangeCase` | 386 B |
+| `moveArrayElement` | 348 B |
+| `useJwt` | 285 B |
+| `insertNodeAt` | 201 B |
+| `removeNode` | 174 B |
@vueuse/rxjs
@@ -427,7 +440,7 @@ date: 2024-12-23T08:32:26.309Z
| `watchExtractedObservable` | 264 B |
| `useSubject` | 257 B |
| `useObservable` | 225 B |
-| `fromEvent` | 178 B |
+| `fromEvent` | 219 B |
| `useSubscription` | 161 B |
| `from` | 122 B |
| `toObserver` | 73 B |
@@ -436,7 +449,7 @@ date: 2024-12-23T08:32:26.309Z
| Function | min+gzipped |
| -------------- | ----------- |
-| `useFirestore` | 653 B |
+| `useFirestore` | 667 B |
| `useRTDB` | 257 B |
| `useAuth` | 160 B |
@@ -454,121 +467,124 @@ date: 2024-12-23T08:32:26.309Z
| Function | min+gzipped |
| ------------------------ | ----------- |
-| `useDateFormat` | 932 B |
-| `formatDate` | 699 B |
-| `until` | 631 B |
-| `watchTriggerable` | 618 B |
-| `refThrottled` | 556 B |
-| `throttledRef` | 556 B |
-| `useThrottle` | 556 B |
-| `throttledWatch` | 550 B |
-| `watchThrottled` | 550 B |
-| `syncRef` | 527 B |
-| `useThrottleFn` | 493 B |
-| `reactivePick` | 477 B |
-| `debouncedWatch` | 458 B |
-| `watchDebounced` | 458 B |
-| `useInterval` | 453 B |
-| `debouncedRef` | 440 B |
-| `refDebounced` | 440 B |
-| `useDebounce` | 440 B |
-| `ignorableWatch` | 433 B |
-| `watchIgnorable` | 433 B |
+| `useDateFormat` | 972 B |
+| `formatDate` | 742 B |
+| `syncRef` | 637 B |
+| `until` | 609 B |
+| `watchTriggerable` | 570 B |
+| `refThrottled` | 534 B |
+| `throttledRef` | 534 B |
+| `useThrottle` | 534 B |
+| `throttledWatch` | 531 B |
+| `watchThrottled` | 531 B |
+| `useThrottleFn` | 471 B |
+| `reactivePick` | 464 B |
+| `pausableWatch` | 463 B |
+| `watchPausable` | 463 B |
+| `useInterval` | 461 B |
+| `debouncedWatch` | 455 B |
+| `watchDebounced` | 455 B |
+| `debouncedRef` | 451 B |
+| `refDebounced` | 451 B |
+| `useDebounce` | 451 B |
| `controlledRef` | 413 B |
-| `useTimeout` | 409 B |
-| `reactiveOmit` | 403 B |
+| `ignorableWatch` | 410 B |
+| `watchIgnorable` | 410 B |
| `refWithControl` | 402 B |
-| `throttleFilter` | 394 B |
-| `useDebounceFn` | 392 B |
-| `useIntervalFn` | 368 B |
-| `createInjectionState` | 364 B |
-| `useArrayIncludes` | 362 B |
-| `pausableWatch` | 347 B |
-| `watchPausable` | 347 B |
-| `watchAtMost` | 339 B |
-| `reactifyObject` | 324 B |
-| `useTimeoutFn` | 321 B |
-| `toRefs` | 309 B |
-| `watchArray` | 301 B |
-| `debounceFilter` | 299 B |
+| `useTimeout` | 402 B |
+| `reactiveOmit` | 395 B |
+| `useDebounceFn` | 388 B |
+| `createInjectionState` | 386 B |
+| `throttleFilter` | 371 B |
+| `useIntervalFn` | 367 B |
+| `useArrayIncludes` | 344 B |
+| `useTimeoutFn` | 335 B |
+| `watchAtMost` | 323 B |
+| `reactifyObject` | 318 B |
+| `watchArray` | 303 B |
+| `useArrayDifference` | 301 B |
+| `pausableFilter` | 293 B |
+| `debounceFilter` | 292 B |
| `normalizeDate` | 291 B |
| `reactiveComputed` | 288 B |
+| `toRefs` | 285 B |
| `toReactive` | 269 B |
-| `computedWithControl` | 267 B |
-| `controlledComputed` | 267 B |
-| `useArrayDifference` | 256 B |
-| `autoResetRef` | 255 B |
-| `refAutoReset` | 255 B |
-| `useCounter` | 247 B |
-| `createEventHook` | 238 B |
+| `useCounter` | 265 B |
+| `computedWithControl` | 251 B |
+| `controlledComputed` | 251 B |
+| `createEventHook` | 247 B |
+| `injectLocal` | 246 B |
| `isIOS` | 238 B |
-| `useArrayUnique` | 236 B |
+| `autoResetRef` | 236 B |
+| `refAutoReset` | 236 B |
| `watchWithFilter` | 233 B |
| `createSharedComposable` | 232 B |
-| `injectLocal` | 229 B |
-| `provideLocal` | 227 B |
-| `useToggle` | 224 B |
-| `useToNumber` | 223 B |
-| `useArrayFindLast` | 216 B |
+| `provideLocal` | 226 B |
+| `useArrayUnique` | 219 B |
+| `useToNumber` | 213 B |
+| `useToggle` | 208 B |
| `extendRef` | 207 B |
-| `useArrayReduce` | 203 B |
+| `useArrayFindLast` | 204 B |
| `makeDestructurable` | 201 B |
| `increaseWithUnit` | 199 B |
-| `createReactiveFn` | 198 B |
-| `reactify` | 198 B |
+| `syncRefs` | 198 B |
| `resolveRef` | 193 B |
| `computedEager` | 189 B |
| `eagerComputed` | 189 B |
+| `useLastChanged` | 188 B |
| `hyphenate` | 187 B |
-| `syncRefs` | 185 B |
| `camelize` | 184 B |
-| `pausableFilter` | 181 B |
-| `toRef` | 180 B |
+| `useArrayReduce` | 183 B |
+| `toRef` | 181 B |
+| `createReactiveFn` | 179 B |
+| `reactify` | 179 B |
| `whenever` | 173 B |
| `createFilterWrapper` | 172 B |
-| `useLastChanged` | 172 B |
+| `tryOnMounted` | 164 B |
| `tryOnBeforeMount` | 163 B |
-| `tryOnMounted` | 162 B |
-| `useArraySome` | 161 B |
-| `useArrayJoin` | 160 B |
-| `useArrayFind` | 159 B |
| `createSingletonPromise` | 157 B |
-| `useArrayEvery` | 157 B |
-| `useArrayFindIndex` | 157 B |
-| `useArrayMap` | 155 B |
| `createGlobalState` | 152 B |
-| `useArrayFilter` | 151 B |
| `tryOnBeforeUnmount` | 148 B |
| `objectOmit` | 145 B |
-| `useToString` | 145 B |
| `tryOnUnmounted` | 144 B |
| `objectPick` | 141 B |
| `refDefault` | 140 B |
-| `watchOnce` | 140 B |
+| `useArrayJoin` | 139 B |
| `promiseTimeout` | 138 B |
+| `useArrayFindIndex` | 138 B |
+| `useArrayFind` | 137 B |
+| `useArraySome` | 135 B |
| `isObject` | 133 B |
+| `useArrayFilter` | 133 B |
+| `useArrayEvery` | 131 B |
+| `useArrayMap` | 129 B |
| `getLifeCycleTarget` | 128 B |
-| `resolveUnref` | 128 B |
| `set` | 127 B |
| `tryOnScopeDispose` | 125 B |
| `rand` | 124 B |
+| `watchOnce` | 123 B |
| `assert` | 120 B |
+| `useToString` | 118 B |
| `get` | 117 B |
| `watchImmediate` | 117 B |
+| `pxValue` | 114 B |
+| `createRef` | 113 B |
| `watchDeep` | 113 B |
| `containsProp` | 111 B |
| `clamp` | 109 B |
| `hasOwn` | 107 B |
| `noop` | 107 B |
| `now` | 106 B |
-| `toValue` | 106 B |
| `isDefined` | 103 B |
| `timestamp` | 103 B |
| `notNullish` | 102 B |
+| `toArray` | 102 B |
| `bypassFilter` | 98 B |
| `isClient` | 97 B |
| `isDef` | 94 B |
| `objectEntries` | 94 B |
+| `resolveUnref` | 94 B |
+| `toValue` | 94 B |
| `invoke` | 92 B |
| `isWorker` | 84 B |
| `identity` | 83 B |
diff --git a/packages/integrations/useChangeCase/demo.vue b/packages/integrations/useChangeCase/demo.vue
index 1403a35403c..34e89fb4a9d 100644
--- a/packages/integrations/useChangeCase/demo.vue
+++ b/packages/integrations/useChangeCase/demo.vue
@@ -21,42 +21,9 @@ const changeCase = useChangeCase(input, type)
{{ changeCase }}
-
diff --git a/packages/integrations/useIDBKeyval/index.test.ts b/packages/integrations/useIDBKeyval/index.test.ts
index c40651e538b..240e4a17b89 100644
--- a/packages/integrations/useIDBKeyval/index.test.ts
+++ b/packages/integrations/useIDBKeyval/index.test.ts
@@ -1,19 +1,20 @@
+import type { Ref } from 'vue'
import { get, set } from 'idb-keyval'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { nextTick } from 'vue'
import { useIDBKeyval } from './index'
-const cache = {} as any
+const cache = new Map()
vi.mock('idb-keyval', () => ({
- get: (key: string) => Promise.resolve(cache[key]),
+ get: (key: string) => Promise.resolve(cache.get(key)),
set: vi.fn((key: string, value: any) => new Promise((resolve, reject) => {
if (value === 'error') {
reject(new Error('set error'))
return
}
- cache[key] = value
+ cache.set(key, value)
resolve(undefined)
})),
@@ -24,12 +25,12 @@ vi.mock('idb-keyval', () => ({
return
}
- cache[key] = value
+ cache.set(key, value)
resolve(undefined)
}),
del: (key: string) => {
- delete cache[key]
+ cache.delete(key)
},
}))
@@ -37,17 +38,26 @@ const KEY1 = 'vue-use-idb-keyval-1'
const KEY2 = 'vue-use-idb-keyval-2'
const KEY3 = 'vue-use-idb-keyval-3'
const KEY4 = 'vue-use-idb-keyval-4'
+
describe('useIDBKeyval', () => {
- beforeEach(() => {
- vi.clearAllMocks()
+ let data1: Ref<{ count: number } | null>
+ let data2: Ref
+ let data3: Ref
+
+ beforeEach(async () => {
console.error = vi.fn()
- })
- set(KEY3, 'hello')
+ await set(KEY3, 'hello');
- const { data: data1 } = useIDBKeyval(KEY1, { count: 0 })
- const { data: data2 } = useIDBKeyval(KEY2, ['foo', 'bar'])
- const { data: data3 } = useIDBKeyval(KEY3, 'world', { shallow: true })
+ ({ data: data1 } = useIDBKeyval(KEY1, { count: 0 }));
+ ({ data: data2 } = useIDBKeyval(KEY2, ['foo', 'bar']));
+ ({ data: data3 } = useIDBKeyval(KEY3, 'world', { shallow: true }))
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ cache.clear()
+ })
it('get/set', async () => {
expect(data1.value).toEqual({ count: 0 })
@@ -60,8 +70,8 @@ describe('useIDBKeyval', () => {
})
it('update', async () => {
- data1.value.count++
- data2.value.push('woo')
+ data1.value!.count++
+ data2.value!.push('woo')
data3.value = 'world'
expect(await get(KEY1)).toEqual(data1.value)
@@ -109,6 +119,43 @@ describe('useIDBKeyval', () => {
it('writeDefaults false', async () => {
useIDBKeyval(KEY4, 'test', { writeDefaults: false })
- expect(set).toHaveBeenCalledTimes(0)
+ // the initial 3 IDB calls minus this one
+ expect(set).toHaveBeenCalledTimes(3)
+ })
+ it('get/set with serializer', async () => {
+ const serializer = {
+ read(raw: unknown): string {
+ return raw === 1 ? 'foo' : 'bar'
+ },
+ write(value: string): unknown {
+ return value === 'foo' ? 1 : 0
+ },
+ }
+
+ const { data } = useIDBKeyval(KEY4, 'foo', { serializer })
+
+ await nextTick()
+
+ expect(data.value).toEqual('foo')
+ expect(await get(KEY4)).toEqual(1)
+ })
+ it('get/set with serializer and existing value', async () => {
+ const serializer = {
+ read(raw: unknown): string {
+ return raw === 1 ? 'foo' : 'bar'
+ },
+ write(value: string): unknown {
+ return value === 'foo' ? 1 : 0
+ },
+ }
+
+ await set(KEY4, 0)
+
+ const { data } = useIDBKeyval(KEY4, 'foo', { serializer })
+
+ await nextTick()
+
+ expect(data.value).toEqual('bar')
+ expect(await get(KEY4)).toEqual(0)
})
})
diff --git a/packages/integrations/useIDBKeyval/index.ts b/packages/integrations/useIDBKeyval/index.ts
index e8fe5bd23e2..94e196795fb 100644
--- a/packages/integrations/useIDBKeyval/index.ts
+++ b/packages/integrations/useIDBKeyval/index.ts
@@ -4,7 +4,12 @@ import { watchPausable } from '@vueuse/core'
import { del, get, set, update } from 'idb-keyval'
import { ref as deepRef, shallowRef, toRaw, toValue } from 'vue'
-export interface UseIDBOptions extends ConfigurableFlush {
+interface Serializer {
+ read: (raw: unknown) => T
+ write: (value: T) => unknown
+}
+
+export interface UseIDBOptions extends ConfigurableFlush {
/**
* Watch for deep changes
*
@@ -31,6 +36,11 @@ export interface UseIDBOptions extends ConfigurableFlush {
* @default true
*/
writeDefaults?: boolean
+
+ /**
+ * Custom data serialization
+ */
+ serializer?: Serializer
}
export interface UseIDBKeyvalReturn {
@@ -48,7 +58,7 @@ export interface UseIDBKeyvalReturn {
export function useIDBKeyval(
key: IDBValidKey,
initialValue: MaybeRefOrGetter,
- options: UseIDBOptions = {},
+ options: UseIDBOptions = {},
): UseIDBKeyvalReturn {
const {
flush = 'pre',
@@ -58,6 +68,10 @@ export function useIDBKeyval(
console.error(e)
},
writeDefaults = true,
+ serializer = {
+ read: (raw: unknown) => raw as T,
+ write: (value: T) => value,
+ },
} = options
const isFinished = shallowRef(false)
@@ -69,11 +83,13 @@ export function useIDBKeyval(
try {
const rawValue = await get(key)
if (rawValue === undefined) {
- if (rawInit !== undefined && rawInit !== null && writeDefaults)
- await set(key, rawInit)
+ if (rawInit !== undefined && rawInit !== null && writeDefaults) {
+ const initValue = serializer.write(rawInit)
+ await set(key, initValue)
+ }
}
else {
- data.value = rawValue
+ data.value = serializer.read(rawValue)
}
}
catch (e) {
@@ -90,8 +106,9 @@ export function useIDBKeyval(
await del(key)
}
else {
- // IndexedDB does not support saving proxies, convert from proxy before saving
- await update(key, () => toRaw(data.value))
+ const rawValue = toRaw(data.value)
+ const serializedValue = serializer.write(rawValue)
+ await update(key, () => serializedValue)
}
}
catch (e) {
diff --git a/packages/integrations/useSortable/index.browser.test.ts b/packages/integrations/useSortable/index.browser.test.ts
index 7ceb16e4a25..3863169f5ce 100644
--- a/packages/integrations/useSortable/index.browser.test.ts
+++ b/packages/integrations/useSortable/index.browser.test.ts
@@ -1,8 +1,8 @@
import { mount } from '@vue/test-utils'
-import { templateRef, unrefElement } from '@vueuse/core'
+import { unrefElement } from '@vueuse/core'
import Sortable from 'sortablejs'
import { describe, expect, it } from 'vitest'
-import { defineComponent, shallowRef } from 'vue'
+import { defineComponent, shallowRef, useTemplateRef } from 'vue'
import { useSortable } from './index'
describe('useSortable', () => {
@@ -10,7 +10,7 @@ describe('useSortable', () => {
const wrapper = mount(defineComponent({
template: '',
setup() {
- const el = templateRef('el')
+ const el = useTemplateRef('el')
const list = shallowRef([])
const result = useSortable(el, list, {
})
@@ -20,7 +20,7 @@ describe('useSortable', () => {
}))
const vm = wrapper.vm
try {
- const sortable = Sortable.get(vm.el)
+ const sortable = Sortable.get(vm.el!)
expect(sortable).toBeDefined()
}
finally {
@@ -32,7 +32,7 @@ describe('useSortable', () => {
const wrapper = mount(defineComponent({
template: '',
setup() {
- const el = templateRef('el')
+ const el = useTemplateRef('el')
const list = shallowRef([])
const result = useSortable('#el', list, {
})
@@ -44,7 +44,7 @@ describe('useSortable', () => {
})
const vm = wrapper.vm
try {
- const sortable = Sortable.get(vm.el)
+ const sortable = Sortable.get(vm.el!)
expect(sortable).toBeDefined()
}
finally {
@@ -57,7 +57,7 @@ describe('useSortable', () => {
const wrapper = mount(defineComponent({
template: '',
setup() {
- const el = templateRef('el')
+ const el = useTemplateRef('el')
const list = shallowRef([])
const result = useSortable(el, list, {
})
@@ -67,10 +67,10 @@ describe('useSortable', () => {
}))
const vm = wrapper.vm
try {
- const sortable = Sortable.get(vm.el)
+ const sortable = Sortable.get(vm.el!)
expect(sortable).toBeDefined()
vm.stop()
- expect(Sortable.get(vm.el)).toEqual(null)
+ expect(Sortable.get(vm.el!)).toEqual(null)
}
finally {
wrapper.unmount()
@@ -83,7 +83,7 @@ describe('useSortable', () => {
const wrapper = mount(defineComponent({
template: '',
setup() {
- const el = templateRef('el')
+ const el = useTemplateRef('el')
const list = shallowRef([])
const result = useSortable(el, list, {
})
@@ -93,12 +93,12 @@ describe('useSortable', () => {
}))
const vm = wrapper.vm
try {
- const sortable = Sortable.get(vm.el)
+ const sortable = Sortable.get(vm.el!)
expect(sortable).toBeDefined()
vm.stop()
- expect(Sortable.get(vm.el)).toEqual(null)
+ expect(Sortable.get(vm.el!)).toEqual(null)
vm.start()
- expect(Sortable.get(vm.el)).toBeDefined()
+ expect(Sortable.get(vm.el!)).toBeDefined()
}
finally {
wrapper.unmount()
@@ -111,7 +111,7 @@ describe('useSortable', () => {
const wrapper = mount(defineComponent({
template: '',
setup() {
- const el = templateRef('el')
+ const el = useTemplateRef('el')
const list = shallowRef([])
const result = useSortable(el, list, {
})
@@ -121,7 +121,7 @@ describe('useSortable', () => {
}))
const vm = wrapper.vm
try {
- const sortable = Sortable.get(vm.el)
+ const sortable = Sortable.get(vm.el!)
expect(sortable?.option('disabled')).toEqual(false)
vm.option('disabled', true)
expect(sortable?.option('disabled')).toEqual(true)
@@ -135,7 +135,7 @@ describe('useSortable', () => {
const wrapper = mount(defineComponent({
template: '',
setup() {
- const el = templateRef('el')
+ const el = useTemplateRef('el')
const list = shallowRef([])
const result = useSortable(el, list, {
})
@@ -161,7 +161,7 @@ describe('useSortable', () => {
components: { SubComponent },
template: '',
setup() {
- const el = templateRef>('el')
+ const el = useTemplateRef>('el')
const list = shallowRef([])
const result = useSortable(el, list, {
})
diff --git a/packages/shared/useDateFormat/demo.vue b/packages/shared/useDateFormat/demo.vue
index 637c1521286..cea32ecab2b 100644
--- a/packages/shared/useDateFormat/demo.vue
+++ b/packages/shared/useDateFormat/demo.vue
@@ -16,7 +16,7 @@ const formatted = useDateFormat(useNow(), formatter, { locales: lang })
Formatter Editor :
-
+