VueUse provieds a wide array of composable utilities for Vue applications. Among these, the Elements set focuses on tracking and reacting to browser DOM element states. Below are several practical helpers demonstrated with Vue 3.

Tracking the Currently Focused Element

The useActiveElement composable monitors which element currently has focus. It is helpful for contextual logic based on user interaction with inputs, buttons, or other focusable nodes.

<template>
  <div>
    <input type="text" data-track-id="nameField">
    <button data-track-id="submitBtn">Submit</button>
  </div>
</template>

<script setup>
import { watch } from 'vue'
import { useActiveElement } from '@vueuse/core'

const focused = useActiveElement()

watch(focused, (el) => {
  if (el) {
    console.log('Custom attribute:', el.dataset.trackId)
  }
})
</script>

onte you can’t use v-if here; only v-show triggers tracking.

Detecting Page Visibility Changes

useDocumentVisibility reacts to12 visibility through tab switches or browser minimization.

<template>
  <p>Visibility status: {{ visibilityState }}</p>
</template>

<script setup>
import { useDocumentVisibility } from '@vueuse/core'

const visibilityState = useDocumentVisibility()
</script>

imblicit reactivity lets you watch visibilityState directly.

Monitoring Window Focus

Unlike page visibility based on viewport12, useWindowFocus detects whether theiev browser window actually has input focus. If the user clicks outside the browser, this returns false.

<template>
  <p>Window focused: {{ isWindowFocused }}</p>
</template>

<script setup>
import { useWindowFocus } from '@vueuse/core'

const isWindowFocused = useWindowFocus()
</script>

Observing Mouse Position Relative to an Element

useMouseInElement calculates mouse coordinates relative to a target element and determines whether t pointer is inside its bounding box.

<template>
  <section ref="boxRef" class="track-box">
    <strong>Hover over me</strong>
  </section>
  <p>Mouse outside: {{ outsideRegion }}</p>
</template>

<script setup>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'

const boxRef = ref(null)
const { isOutside: outsideRegion } = useMouseInElement(boxRef)
</script>

<style scoped>
.track-box {
  background: #cbd5e1;
  width: 250px;
  padding: 1rem;
}
</style>

Besides isOutside, this composable also yields elementX, elementY, and more.

Checking If an Element Is Visible

The useElementVisibility composable monitors whether a DOM node is visible in the viewport, considering both display style changes and scrolling position.

<template>
  <div ref="noticeRef" v-show="showBox">
    <p>Notice block</p>
  </div>
  <button @click="showBox = !showBox">Toggle</button>
  <div style="height: 1200px;"></div>
  <footer class="status-bar">
    Element visible: {{ isVisible }}
  </footer>
</template>

<script setup>
import { ref } from 'vue'
import { useElementVisibility } from '@vueuse/core'

const noticeRef = ref(null)
const showBox = ref(true)
const isVisible = useElementVisibility(noticeRef)
</script>

<style scoped>
.status-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  background: white;
  padding: 0.25rem 1rem;
}
</style>

Note that visibility: hidden or opacity: 0 won't be detected by this composable.

Observing Element Dimension Changes

useElementSize provides reactive width and height values that update whenever the monitored element's size changes.

<template>
  <div>
    <p>Height: {{ boxHeight }}px / Width: {{ boxWidth }}px</p>
    <textarea ref="areaRef"></textarea>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'

const areaRef = ref(null)
const { width: boxWidth, height: boxHeight } = useElementSize(areaRef)
</script>

This composable shines when adjusting canvas content or recalculating layouts in response to container resizes.