ReddRadar
Agent skill
vueuse
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.
Install this agent skill to your Project
npx add-skill https://github.com/onmax/claude-config/tree/main/skills/vueuse
SKILL.md
VueUse
Collection of essential Vue Composition utilities. Check VueUse before writing custom composables - most patterns already implemented.
Current stable: VueUse 14.x for Vue 3.5+
Installation
Vue 3:
pnpm add @vueuse/core
Nuxt:
pnpm add @vueuse/nuxt @vueuse/core
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vueuse/nuxt'],
})
Nuxt module auto-imports composables - no import needed.
Categories
| Category | Examples |
|---|---|
| State | useLocalStorage, useSessionStorage, useRefHistory |
| Elements | useElementSize, useIntersectionObserver, useResizeObserver |
| Browser | useClipboard, useFullscreen, useMediaQuery |
| Sensors | useMouse, useKeyboard, useDeviceOrientation |
| Network | useFetch, useWebSocket, useEventSource |
| Animation | useTransition, useInterval, useTimeout |
| Component | useVModel, useVirtualList, useTemplateRefsList |
| Watch | watchDebounced, watchThrottled, watchOnce |
| Reactivity | createSharedComposable, toRef, toReactive |
| Array | useArrayFilter, useArrayMap, useSorted |
| Time | useDateFormat, useNow, useTimeAgo |
| Utilities | useDebounce, useThrottle, useMemoize |
Quick Reference
Load composable files based on what you need:
| Working on... | Load file |
|---|---|
| Finding a composable | references/composables.md |
| Specific composable | composables/<name>.md |
Loading Files
Consider loading these reference files based on your task:
- references/composables.md - if searching for VueUse composables by category or functionality
DO NOT load all files at once. Load only what's relevant to your current task.
Common Patterns
State persistence:
const state = useLocalStorage('my-key', { count: 0 })
Mouse tracking:
const { x, y } = useMouse()
Debounced ref:
const search = ref('')
const debouncedSearch = refDebounced(search, 300)
Shared composable (singleton):
const useSharedMouse = createSharedComposable(useMouse)
SSR Gotchas
Many VueUse composables use browser APIs unavailable during SSR.
Check with isClient:
import { isClient } from '@vueuse/core'
if (isClient) {
// Browser-only code
const { width } = useWindowSize()
}
Wrap in onMounted:
const width = ref(0)
onMounted(() => {
// Only runs in browser
const { width: w } = useWindowSize()
width.value = w.value
})
Use SSR-safe composables:
// These check isClient internally
const mouse = useMouse() // Returns {x: 0, y: 0} on server
const storage = useLocalStorage('key', 'default') // Uses default on server
@vueuse/nuxt auto-handles SSR - composables return safe defaults on server.
Target Element Refs
When targeting component refs instead of DOM elements:
import type { MaybeElementRef } from '@vueuse/core'
// Component ref needs .$el to get DOM element
const compRef = ref<ComponentInstance>()
const { width } = useElementSize(compRef) // ❌ Won't work
// Use MaybeElementRef pattern
import { unrefElement } from '@vueuse/core'
const el = computed(() => unrefElement(compRef)) // Gets .$el
const { width } = useElementSize(el) // ✅ Works
Or access $el directly:
const compRef = ref<ComponentInstance>()
onMounted(() => {
const el = compRef.value?.$el as HTMLElement
const { width } = useElementSize(el)
})
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
onmax/claude-config
pnpm
Use when managing Node.js dependencies with pnpm - provides workspace setup, catalogs, CLI commands, overrides, and CI configuration
onmax/claude-config
writer
Iterative writing loop. Gemini 3 Pro writes, Claude Agent SDK reviews autonomously. Use for blog posts, docs, technical content needing quality iteration.
onmax/claude-config
nuxt-seo
Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.
onmax/claude-config
ts-library
Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.
onmax/claude-config
motion
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
onmax/claude-config
vue
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
Didn't find tool you were looking for?