vueuse_skill

Overview

This skill helps you leverage VueUse, a collection of battle-tested Vue Composition utilities for state, browser APIs, sensors, network, animations, and more. I recommend checking VueUse before building custom composables because many common patterns are already implemented. It supports Vue 3.5+ and offers Nuxt integration with auto-imported composables.

How this skill works

The skill surfaces common composables (useMouse, useLocalStorage, useFetch, useElementSize, etc.) and shows how to wire them into Vue and Nuxt projects. It explains SSR safety, element ref patterns, and shared-singleton composables, plus installation and integration tips. Examples demonstrate typical patterns like persisted state, debounced refs, and client-only usage.

When to use it

• You need persistent or reactive state with minimal boilerplate (useLocalStorage, useSessionStorage).
• You want to read browser or sensor APIs reactively (useMouse, useDeviceOrientation, useClipboard).
• You need robust SSR-safe behavior in Nuxt or Vue apps.
• You want utilities for animation, timing, or throttled/debounced watchers.
• You are implementing common patterns and prefer composable reuse over custom solutions.

Best practices

• Check VueUse first to avoid reinventing common composables.
• Prefer SSR-safe composables or guard browser-only code with isClient or onMounted.
• Use createSharedComposable to share singletons across components when needed.
• For component refs, convert to element refs with unrefElement or access .$el inside onMounted.
• Keep imports minimal in Nuxt by using @vueuse/nuxt so composables are auto-imported.

Example use cases

• Persist user preferences: const prefs = useLocalStorage('prefs', {...}) to survive reloads.
• Reactive sensor data: const { x, y } = useMouse() to build interactive UIs.
• Debounced search: const debounced = refDebounced(query, 300) to limit API calls.
• Server-safe rendering: wrap window-size logic in isClient or use SSR-safe VueUse composables.
• Shared state across pages: const useShared = createSharedComposable(useSomeComposable) for singletons.