docs(Elements): format the doc's Usage section

vueuse · OrbisK · Jul 24, 2025 · Jul 22, 2025 · Jul 23, 2025 · Jul 23, 2025
commit b36945c43cc0d66b8d90472b4784ba4477092298
diff --git a/packages/core/useActiveElement/index.md b/packages/core/useActiveElement/index.md
@@ -8,14 +8,17 @@ Reactive `document.activeElement`
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useActiveElement } from '@vueuse/core'
+import { watch } from 'vue'
 
 const activeElement = useActiveElement()
 
 watch(activeElement, (el) => {
   console.log('focus changed to', el)
 })
+</script>
 ```
 
 ## Component Usage

diff --git a/packages/core/useDocumentVisibility/index.md b/packages/core/useDocumentVisibility/index.md
@@ -8,10 +8,12 @@ Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-U
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useDocumentVisibility } from '@vueuse/core'
 
 const visibility = useDocumentVisibility()
+</script>
 ```
 
 ## Component Usage

diff --git a/packages/core/useDropZone/index.md b/packages/core/useDropZone/index.md
@@ -17,6 +17,7 @@ Due to Safari browser limitations, file type validation is only possible during
 ```vue
 <script setup lang="ts">
 import { useDropZone } from '@vueuse/core'
+import { ref } from 'vue'
 
 const dropZoneRef = ref<HTMLDivElement>()
 

diff --git a/packages/core/useMutationObserver/index.md b/packages/core/useMutationObserver/index.md
@@ -23,4 +23,10 @@ useMutationObserver(el, (mutations) => {
   attributes: true,
 })
 </script>
+
+<template>
+  <div ref="el">
+    Hello VueUse
+  </div>
+</template>
 ```
diff --git a/packages/core/useParentElement/index.md b/packages/core/useParentElement/index.md
@@ -10,28 +10,37 @@ Get parent element of the given element
 
 When no argument is passed, it will return the parent element of the current component.
 
-```js
+```vue
+<script setup lang="ts">
 import { useParentElement } from '@vueuse/core'
 
 const parentEl = useParentElement()
 
 onMounted(() => {
   console.log(parentEl.value)
 })
+</script>
 ```
 
 It can also accept a `ref` as the first argument.
 
-```ts
+```vue
+<script setup lang="ts">
 import { useParentElement } from '@vueuse/core'
 import { shallowRef } from 'vue'
 
-// Don't forget to bind the ref to the element
 const tooltip = shallowRef<HTMLElement | undefined>()
 
 const tooltipWrapper = useParentElement(tooltip)
 
 onMounted(() => {
   console.log(tooltipWrapper.value)
 })
+</script>
+
+<template>
+  <div>
+    <p ref="tooltip" />
+  </div>
+</template>
 ```
diff --git a/packages/core/useResizeObserver/index.md b/packages/core/useResizeObserver/index.md
@@ -9,7 +9,7 @@ Reports changes to the dimensions of an Element's content or the border-box
 ## Usage
 
 ```vue
-<script setup>
+<script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
 import { ref, useTemplateRef } from 'vue'
 

diff --git a/packages/core/useWindowFocus/index.md b/packages/core/useWindowFocus/index.md
@@ -8,10 +8,16 @@ Reactively track window focus with `window.onfocus` and `window.onblur` events.
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useWindowFocus } from '@vueuse/core'
 
 const focused = useWindowFocus()
+</script>
+
+<template>
+  <div>{{ focused }}</div>
+</template>
 ```
 
 ## Component Usage

diff --git a/packages/core/useWindowScroll/index.md b/packages/core/useWindowScroll/index.md
@@ -8,10 +8,22 @@ Reactive window scroll
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useWindowScroll } from '@vueuse/core'
 
 const { x, y } = useWindowScroll()
-console.log(x.value) // read current x scroll value
-y.value = 100 // scroll y to 100
+</script>
+
+<template>
+  <div>
+    read current x, y scroll: {{ x }}, {{ y }}
+  </div>
+  <button @click="x = 100">
+    scroll X to 100
+  </button>
+  <button @click="y = 100">
+    scroll Y to 100
+  </button>
+</template>
 ```
diff --git a/packages/core/useWindowSize/index.md b/packages/core/useWindowSize/index.md
@@ -8,10 +8,19 @@ Reactive window size
 
 ## Usage
 
-```js
+```vue
+<script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
 
 const { width, height } = useWindowSize()
+</script>
+
+<template>
+  <div>
+    Width: {{ width }}
+    Height: {{ height }}
+  </div>
+</template>
 ```
 
 ## Component Usage