vueuse · ilyaliao · Jul 24, 2025 · Jul 27, 2025 · Jul 27, 2025 · Jul 27, 2025
diff --git a/packages/core/onClickOutside/component.ts b/packages/core/onClickOutside/component.ts
@@ -1,17 +1,20 @@
-import type { RenderableComponent } from '../types'
-import type { OnClickOutsideOptions } from './index'
+import type { OnClickOutsideOptions, RenderableComponent } from '@vueuse/core'
 import { onClickOutside } from '@vueuse/core'
 import { defineComponent, h, shallowRef } from 'vue'
 
 export interface OnClickOutsideProps extends RenderableComponent {
   options?: Omit<OnClickOutsideOptions, 'controls'>
 }
+// eslint-disable-next-line ts/consistent-type-definitions
+export type OnClickOutsideEmits = {
+  trigger: (event: Event) => void
+}
 
-export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProps>({
-  name: 'OnClickOutside',
-  props: ['as', 'options'] as unknown as undefined,
-  emits: ['trigger'],
-  setup(props, { slots, emit }) {
+export const OnClickOutside = /* #__PURE__ */ defineComponent<
+  OnClickOutsideProps,
+  OnClickOutsideEmits
+>(
+  (props, { slots, emit }) => {
     const target = shallowRef<HTMLDivElement>()
     onClickOutside(target, (e) => {
       emit('trigger', e)
@@ -22,4 +25,9 @@ export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProp
         return h(props.as || 'div', { ref: target }, slots.default())
     }
   },
-})
+  {
+    name: 'OnClickOutside',
+    props: ['as', 'options'],
+    emits: ['trigger'],
+  },
+)
diff --git a/packages/core/onClickOutside/directive.ts b/packages/core/onClickOutside/directive.ts
@@ -1,7 +1,7 @@
+import type { OnClickOutsideHandler, OnClickOutsideOptions } from '@vueuse/core'
 import type { Fn } from '@vueuse/shared'
 import type { ObjectDirective } from 'vue'
-import type { OnClickOutsideHandler, OnClickOutsideOptions } from './index'
-import { onClickOutside } from './index'
+import { onClickOutside } from '@vueuse/core'
 
 type StopHandle = Fn | { stop: Fn, cancel: Fn, trigger: (event: Event) => void }
 

diff --git a/packages/core/onKeyStroke/directive.ts b/packages/core/onKeyStroke/directive.ts
@@ -1,6 +1,6 @@
+import type { OnKeyStrokeOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { OnKeyStrokeOptions } from './index'
-import { onKeyStroke } from './index'
+import { onKeyStroke } from '@vueuse/core'
 
 type BindingValueFunction = (event: KeyboardEvent) => void
 

diff --git a/packages/core/onLongPress/component.ts b/packages/core/onLongPress/component.ts
@@ -1,28 +1,44 @@
-import type { RenderableComponent } from '../types'
-import type { OnLongPressOptions } from './index'
+import type { OnLongPressOptions, RenderableComponent, UseOnLongPressReturn } from '@vueuse/core'
+import type { SlotsType } from 'vue'
+import { onLongPress } from '@vueuse/core'
 import { defineComponent, h, shallowRef } from 'vue'
-import { onLongPress } from './index'
 
 export interface OnLongPressProps extends RenderableComponent {
   options?: OnLongPressOptions
 }
+// eslint-disable-next-line ts/consistent-type-definitions
+export type OnLongPressEmits = {
+  trigger: (event: PointerEvent) => void
+}
+
+interface OnLongPressSlots {
+  default: (data: UseOnLongPressReturn) => any
+}
 
-export const OnLongPress = /* #__PURE__ */ defineComponent<OnLongPressProps>({
-  name: 'OnLongPress',
-  props: ['as', 'options'] as unknown as undefined,
-  emits: ['trigger'],
-  setup(props, { slots, emit }) {
+export const OnLongPress = /* #__PURE__ */ defineComponent<
+  OnLongPressProps,
+  OnLongPressEmits,
+  string,
+  SlotsType<OnLongPressSlots>
+>(
+  (props, { slots, emit }) => {
     const target = shallowRef<HTMLElement>()
-    onLongPress(
+    const data = onLongPress(
       target,
       (e) => {
         emit('trigger', e)
       },
       props.options,
     )
+
     return () => {
       if (slots.default)
-        return h(props.as || 'div', { ref: target }, slots.default())
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'OnLongPress',
+    props: ['as', 'options'],
+    emits: ['trigger'],
+  },
+)
diff --git a/packages/core/onLongPress/directive.ts b/packages/core/onLongPress/directive.ts
@@ -1,7 +1,6 @@
+import type { OnLongPressOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { OnLongPressOptions } from './index'
-
-import { onLongPress } from './index'
+import { onLongPress } from '@vueuse/core'
 
 type BindingValueFunction = (evt: PointerEvent) => void
 

diff --git a/packages/core/onLongPress/index.ts b/packages/core/onLongPress/index.ts
@@ -147,3 +147,5 @@ export function onLongPress(
 
   return stop
 }
+
+export type UseOnLongPressReturn = ReturnType<typeof onLongPress>
diff --git a/packages/core/useActiveElement/component.ts b/packages/core/useActiveElement/component.ts
@@ -1,16 +1,36 @@
+import type { UseActiveElementOptions, UseActiveElementReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useActiveElement } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseActiveElement = /* #__PURE__ */ defineComponent({
-  name: 'UseActiveElement',
-  setup(props, { slots }) {
+export interface UseActiveElementProps extends UseActiveElementOptions {}
+interface UseActiveElementSlots {
+  default: (data: Reactive<{ element: UseActiveElementReturn }>) => any
+}
+
+export const UseActiveElement = /* #__PURE__ */ defineComponent<
+  UseActiveElementProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseActiveElementSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      element: useActiveElement(),
+      element: useActiveElement(props),
     })
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseActiveElement',
+    props: [
+      'deep',
+      'triggerOnRemoval',
+      'window',
+      'document',
+    ],
+  },
+)
diff --git a/packages/core/useActiveElement/index.md b/packages/core/useActiveElement/index.md
@@ -26,7 +26,7 @@ watch(activeElement, (el) => {
 ```vue
 <template>
   <UseActiveElement v-slot="{ element }">
-    Active element is {{ element.dataset.id }}
+    Active element is {{ element?.dataset.id }}
   </UseActiveElement>
 </template>
 ```
diff --git a/packages/core/useActiveElement/index.ts b/packages/core/useActiveElement/index.ts
@@ -83,3 +83,5 @@ export function useActiveElement<T extends HTMLElement>(
 
   return activeElement
 }
+
+export type UseActiveElementReturn = ReturnType<typeof useActiveElement>
diff --git a/packages/core/useBattery/component.ts b/packages/core/useBattery/component.ts
@@ -1,14 +1,29 @@
+import type { ConfigurableNavigator, UseBatteryReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useBattery } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseBattery = /* #__PURE__ */ defineComponent({
-  name: 'UseBattery',
-  setup(props, { slots }) {
+export interface UseBatteryProps extends ConfigurableNavigator {}
+interface UseBatterySlots {
+  default: (data: Reactive<UseBatteryReturn>) => any
+}
+
+export const UseBattery = /* #__PURE__ */ defineComponent<
+  UseBatteryProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseBatterySlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useBattery(props))
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseBattery',
+    props: ['navigator'],
+  },
+)
diff --git a/packages/core/useBrowserLocation/component.ts b/packages/core/useBrowserLocation/component.ts
@@ -1,14 +1,29 @@
+import type { ConfigurableWindow, UseBrowserLocationReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useBrowserLocation } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseBrowserLocation = /* #__PURE__ */ defineComponent({
-  name: 'UseBrowserLocation',
-  setup(props, { slots }) {
-    const data = reactive(useBrowserLocation())
+interface UseBrowserLocationProps extends ConfigurableWindow {}
+interface UseBrowserLocationSlots {
+  default: (data: Reactive<UseBrowserLocationReturn>) => any
+}
+
+export const UseBrowserLocation = /* #__PURE__ */ defineComponent<
+  UseBrowserLocationProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseBrowserLocationSlots>
+>(
+  (props, { slots }) => {
+    const data = reactive(useBrowserLocation(props))
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseBrowserLocation',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/useBrowserLocation/index.md b/packages/core/useBrowserLocation/index.md
@@ -19,7 +19,7 @@ const location = useBrowserLocation()
 ## Component Usage
 
 ```vue
-<UseBrowserLocation v-slot="{ location }">
+<UseBrowserLocation v-slot="location">
   Browser Location: {{ location }}
 </UseBrowserLocation>
 ```
diff --git a/packages/core/useClipboard/component.ts b/packages/core/useClipboard/component.ts
@@ -1,22 +1,35 @@
-import type { UseClipboardOptions } from '@vueuse/core'
+import type { UseClipboardOptions, UseClipboardReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {}
+export interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {}
+interface UseClipboardSlots {
+  default: (data: Reactive<UseClipboardReturn<true>>) => any
+}
 
-export const UseClipboard = /* #__PURE__ */ defineComponent<UseClipboardProps>({
-  name: 'UseClipboard',
-  props: [
-    'source',
-    'read',
-    'navigator',
-    'copiedDuring',
-    'legacy',
-  ] as unknown as undefined,
-
-  setup(props, { slots }) {
+export const UseClipboard = /* #__PURE__ */ defineComponent<
+  UseClipboardProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseClipboardSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useClipboard(props))
 
-    return () => slots.default?.(data)
+    return () => {
+      if (slots.default)
+        return slots.default(data)
+    }
+  },
+  {
+    name: 'UseClipboard',
+    props: [
+      'source',
+      'read',
+      'navigator',
+      'copiedDuring',
+      'legacy',
+    ],
   },
-})
+)
diff --git a/packages/core/useColorMode/component.ts b/packages/core/useColorMode/component.ts
@@ -1,11 +1,24 @@
-import type { UseColorModeOptions } from './index'
+import type { BasicColorMode, UseColorModeOptions, UseColorModeReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
+import { useColorMode } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
-import { useColorMode } from './index'
 
-export const UseColorMode = /* #__PURE__ */ defineComponent<UseColorModeOptions>({
-  name: 'UseColorMode',
-  props: ['selector', 'attribute', 'modes', 'onChanged', 'storageKey', 'storage', 'emitAuto'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseColorModeProps extends UseColorModeOptions {}
+interface UseColorModeSlots {
+  default: (data: Reactive<{
+    mode: UseColorModeReturn<BasicColorMode>
+    system: UseColorModeReturn['system']
+    store: UseColorModeReturn['store']
+  }>) => any
+}
+
+export const UseColorMode = /* #__PURE__ */ defineComponent<
+  UseColorModeProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseColorModeSlots>
+>(
+  (props, { slots }) => {
     const mode = useColorMode(props)
     const data = reactive({
       mode,
@@ -18,4 +31,30 @@ export const UseColorMode = /* #__PURE__ */ defineComponent<UseColorModeOptions>
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseColorMode',
+    props: [
+      'attribute',
+      'deep',
+      'disableTransition',
+      'emitAuto',
+      'eventFilter',
+      'flush',
+      'initOnMounted',
+      'initialValue',
+      'listenToStorageChanges',
+      'mergeDefaults',
+      'modes',
+      'onChanged',
+      'onError',
+      'selector',
+      'serializer',
+      'shallow',
+      'storage',
+      'storageKey',
+      'storageRef',
+      'window',
+      'writeDefaults',
+    ],
+  },
+)
diff --git a/packages/core/useColorMode/index.md b/packages/core/useColorMode/index.md
@@ -66,9 +66,9 @@ const myColorMode = computed(() => store.value === 'auto' ? system.value : store
 
 ```vue
 <template>
-  <UseColorMode v-slot="{ mode }">
-    <button @click="mode = mode === 'dark' ? 'light' : 'dark'">
-      Mode {{ mode }}
+  <UseColorMode v-slot="color">
+    <button @click="color.mode = color.mode === 'dark' ? 'light' : 'dark'">
+      Mode {{ color.mode }}
     </button>
   </UseColorMode>
 </template>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -147,3 +147,5 @@ export function onLongPress(

		return stop
		}

		export type UseOnLongPressReturn = ReturnType<typeof onLongPress>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -83,3 +83,5 @@ export function useActiveElement<T extends HTMLElement>(

		return activeElement
		}

		export type UseActiveElementReturn = ReturnType<typeof useActiveElement>