feat(useCurrentElement): new function

packages/contributors.json

@@ -44,8 +44,10 @@
   "darrylnoakes",
   "dblazhkun",
   "echoeureka",
+  "Flamenco",
   "husayt",
   "Jay214",
+  "jbaubree",
   "JessicaSachs",
   "JserWang",
   "wvffle",
@@ -86,6 +88,7 @@
   "ardasoyturk",
   "qwe12e",
   "heyitsarpit",
+  "zhl1232",
   "aryraditya",
   "azrikahar",
   "baboon-king",
@@ -109,7 +112,6 @@
   "iendeavor",
   "web2033",
   "sp1ker",
-  "Flamenco",
   "loilo",
   "Glandos",
   "glen-84",
@@ -130,6 +132,7 @@
   "peterekjs",
   "jlowgren",
   "joakimriedel",
+  "joezimjs",
   "chnejohnson",
   "jordypereira",
   "josephfh",

packages/core/_template/demo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { defineComponent } from 'vue'
 import { useCounter } from '@vueuse/core'
 
-return useCounter()
+const { count, inc, dec } = useCounter()
 </script>
 
 <template>
@@ -14,17 +13,5 @@ return useCounter()
     <button @click="dec()">
       Decrement
     </button>
-    <button @click="inc(5)">
-      Increment (+5)
-    </button>
-    <button @click="dec(5)">
-      Decrement (-5)
-    </button>
-    <button @click="set(100)">
-      Set (100)
-    </button>
-    <button @click="reset()">
-      Reset
-    </button>
   </div>
 </template>

packages/core/index.ts

@@ -21,6 +21,7 @@ export * from './useClipboard'
 export * from './useColorMode'
 export * from './useConfirmDialog'
 export * from './useCssVar'
+export * from './useCurrentElement'
 export * from './useCycleList'
 export * from './useDark'
 export * from './useDebouncedRefHistory'

packages/core/useCurrentElement/demo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useCurrentElement } from '@vueuse/core'
+import { watchEffect } from 'vue'
+
+const el = useCurrentElement()
+
+watchEffect(() => {
+  console.log('Current element:', el.value)
+})
+</script>
+
+<template>
+  <div>Open your console.log to see the element</div>
+</template>

packages/core/useCurrentElement/index.md

@@ -0,0 +1,27 @@
+---
+category: Component
+---
+
+# useCurrentElement
+
+Get the DOM element of current component as a ref.
+
+## Usage
+
+```ts
+import { useCurrentElement } from '@vueuse/core'
+
+const el = useCurrentElement() // ComputedRef<Element>
+```
+
+## Caveats
+
+This functions uses [`$el` under the hood](https://vuejs.org/api/component-instance.html#el).
+
+Value of the ref will be `undefined` until the component is mounted.
+
+- For components with a single root element, it will point to that element.
+- For components with text root, it will point to the text node.
+- For components with multiple root nodes, it will be the placeholder DOM node that Vue uses to keep track of the component's position in the DOM.
+
+It's recommend to only use this function for components with **a single root element**.

packages/core/useCurrentElement/index.ts

@@ -0,0 +1,19 @@
+// eslint-disable-next-line no-restricted-imports
+import { computed, getCurrentInstance, onMounted, onUpdated, ref } from 'vue-demi'
+
+export function useCurrentElement<T extends Element = Element>() {
+  const vm = getCurrentInstance()!
+  const count = ref(0)
+  onUpdated(() => {
+    count.value += 1
+  })
+  onMounted(() => {
+    count.value += 1
+  })
+  return computed<T>(() => {
+    // force update
+    // eslint-disable-next-line no-unused-expressions
+    count.value
+    return vm.proxy!.$el
+  })
+}