Vueuse Functions

VueUse Functions is a community skill for using the VueUse composable utility library, covering browser API composables, sensor functions, state management utilities, animation helpers, and reactive wrappers for common web development tasks in Vue applications.

What Is This?

Overview

VueUse Functions provides guidance on using the VueUse collection of Vue Composition API utility functions. It covers browser API composables that wrap localStorage, clipboard, fullscreen, and other Web APIs with reactive Vue interfaces, sensor functions that provide reactive access to device sensors including mouse position, scroll state, network status, and viewport dimensions, state management utilities that offer reactive storage, history tracking, debounced refs, and shared state across components, animation helpers that create smooth transitions with useTransition and useInterval for time-based reactive values, and component utilities that simplify common patterns like v-model management, element visibility detection, and intersection observer integration. The skill helps Vue developers add rich functionality with minimal custom code.

Who Should Use This

This skill serves Vue developers building interactive web applications, teams standardizing utility patterns across components, and developers reducing boilerplate for common browser API integrations.

Why Use It?

Problems It Solves

Wrapping browser APIs with reactive Vue interfaces requires repetitive boilerplate for event listeners and cleanup. Managing localStorage with reactivity needs manual serialization and synchronization logic. Tracking mouse position, scroll, and resize events requires careful event handler setup and teardown. Implementing debounce, throttle, and history tracking on reactive values involves complex timing logic.

Core Highlights

Browser wrapper provides reactive localStorage and clipboard access. Sensor tracker offers reactive mouse, scroll, and viewport state. State utility manages debounced refs and history tracking. Animation helper creates smooth time-based reactive transitions.

How to Use It?

Basic Usage

<script setup lang="ts">
import {
  useMouse,
  useLocalStorage,
  useDark,
  useToggle
} from '@vueuse/core';

const { x, y } = useMouse();
const name = useLocalStorage(
  'user-name', '');
const isDark = useDark();
const toggleDark =
  useToggle(isDark);
</script>

<template>
  <div>
    <p>Mouse: {{ x }},
      {{ y }}</p>
    <input v-model="name"
      placeholder="Name" />
    <button
      @click="toggleDark()">
      {{ isDark
        ? 'Light'
        : 'Dark' }}
    </button>
  </div>
</template>

Real-World Examples

<script setup lang="ts">
import {
  useIntersectionObserver,
  useDebounce,
  useClipboard
} from '@vueuse/core';
import { ref } from 'vue';

// Lazy load on scroll
const target = ref(null);
const visible = ref(false);
useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    visible.value =
      isIntersecting;
  });

// Debounced search
const search = ref('');
const debounced =
  useDebounce(search, 300);

// Clipboard
const { copy, copied } =
  useClipboard();
</script>

<template>
  <input v-model="search" />
  <p>Searching: {{ debounced
    }}</p>
  <div ref="target">
    <div v-if="visible">
      Content loaded
    </div>
  </div>
  <button @click="copy(
    'text')">
    {{ copied
      ? 'Copied'
      : 'Copy' }}
  </button>
</template>

Advanced Tips

Combine multiple VueUse composables in custom composable functions to build higher-level reactive features specific to your application. Use useStorage with custom serializers for complex objects that need specific encoding. Apply useThrottleFn for scroll event handlers that need rate limiting to maintain smooth performance.

When to Use It?

Use Cases

Add persistent dark mode with useDark that syncs preference to localStorage automatically. Build a lazy-loading image gallery using useIntersectionObserver for scroll detection. Create a debounced search input that waits for typing pauses before querying.

Related Topics

Vue.js, Composition API, composables, browser APIs, reactivity, utility functions, and web development.

Important Notes

Requirements

Vue 3 with the @vueuse/core package installed for accessing the composable function collection. Composition API usage with script setup for integrating VueUse functions into component logic. Browser environment for composables that access Web APIs like localStorage, clipboard, and sensors.

Usage Recommendations

Do: check the VueUse documentation for existing composables before writing custom reactive wrappers. Use the SSR-safe composables when building server-rendered applications. Combine VueUse utilities with your own composables for application-specific patterns.

Don't: import the entire VueUse package when only a few functions are needed since tree shaking handles individual imports. Use reactive browser API composables without checking for server-side rendering compatibility. Nest multiple composables with overlapping cleanup logic that may conflict during component unmount.

Limitations

Some composables depend on browser APIs not available during server-side rendering and need conditional initialization. Reactive wrappers add a thin abstraction layer that may not expose every option of the underlying browser API. Performance-sensitive applications should benchmark reactive sensor composables since frequent updates create reactive dependency overhead.