Back to Vue.js
vueuse
Vue.jsNuxt.jscomposablesreactive programmingutilitiesfrontend developmentbrowser APIsstate management
Install this skill
npx skills add onmax/nuxt-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
VueUse is a primary library of utility functions for Vue 3 Composition API, providing pre-written logic for common browser, state, and reactivity challenges. Instead of writing custom logic for DOM observation, local storage synchronization, or event debouncing, developers can import tested functions that handle these tasks with built-in reactivity and cleanup. It supports both standard Vue 3 setups and Nuxt projects, with the latter benefiting from automatic imports. The library abstracts complex browser APIs into simple, readable hooks that follow Vue’s reactive patterns. By standardizing these frequent implementation details, the library helps maintain consistent code structures across projects, particularly for handling side effects that would otherwise require manual lifecycle management or event listeners.
When to Use This Skill
- •Persisting user-defined theme preferences or form drafts between page reloads
- •Implementing infinite scroll or lazy loading via intersection observers
- •Handling complex input interactions like drag-and-drop or debounced search inputs
- •Synchronizing UI updates with window resizing or device orientation changes
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “How do I sync state to localStorage in Vue?
- “Show me how to use debouncing in Vue 3
- “What is the best way to track window size changes?
- “How do I use an intersection observer as a composable?
- “Help me implement a shared state singleton
Pro Tips
- 💡Always check the comprehensive VueUse documentation first; a composable likely exists for your specific use case, saving significant development time.
- 💡Combine multiple VueUse composables for complex scenarios, such as `useFetch` with `useIntervalFn` for efficient data polling.
- 💡Utilize the Nuxt module for automatic composable imports, simplifying your component code and reducing boilerplate.
What this skill does
- •Synchronizes reactive state with localStorage and sessionStorage
- •Tracks browser environment interactions like mouse position, window size, and media queries
- •Provides debounced and throttled versions of standard Vue watch and ref primitives
- •Manages complex DOM observations including IntersectionObserver and ResizeObserver
- •Offers network-ready hooks for WebSocket and Fetch requests
When not to use it
- ✕When a project requires only one simple functionality and wants to avoid adding a dependency
- ✕When custom logic needs strict control over every frame of animation or performance cycle
Example workflow
- Install @vueuse/core via your package manager
- Identify the specific browser or state requirement in your component
- Browse the library documentation or reference file to find the matching hook
- Import the hook and invoke it within the setup function or script setup
- Bind the returned reactive variables directly to your component template
Prerequisites
- –Vue 3.5+
- –Basic understanding of the Composition API
Pitfalls & limitations
- !Many functions access browser APIs and will throw errors if called directly in SSR during the build phase
- !Component ref elements must be resolved correctly using unrefElement to avoid null reference errors
- !Over-importing large utility sets can impact bundle size if not tree-shaken correctly
FAQ
Should I use VueUse inside of a Nuxt project?
Yes, using the @vueuse/nuxt module provides auto-imports for all composables, eliminating the need for manual import statements.
How do I handle SSR with browser-based hooks?
Wrap the composable call in an onMounted hook or check the isClient constant to ensure the code executes only in the browser.
Can I use VueUse with component refs?
Yes, but you must pass the ref to unrefElement to ensure the composable receives the actual DOM node rather than the component instance.
How it compares
VueUse replaces manual boilerplate code for standard Web APIs with high-quality, pre-tested, and reactive primitives, whereas manual implementation often requires redundant lifecycle management and error-prone side-effect cleanup.
📄 Full skill instructions — original source: onmax/nuxt-skills
# 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:**
**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](references/composables.md) |
| Specific composable |
## Loading Files
**Start with [references/composables.md](references/composables.md)** to find the right composable.
Then load the specific composable file for detailed usage:
**DO NOT load all files at once** - wastes context on irrelevant patterns.
## Common Patterns
**State persistence:**
**Mouse tracking:**
**Debounced ref:**
**Shared composable (singleton):**
## SSR Gotchas
Many VueUse composables use browser APIs unavailable during SSR.
**Check with
**Wrap in onMounted:**
**Use SSR-safe composables:**
**
## Target Element Refs
When targeting component refs instead of DOM elements:
**Or access
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](references/composables.md) |
| Specific composable |
composables/<name>.md |## Loading Files
**Start with [references/composables.md](references/composables.md)** to find the right composable.
Then load the specific composable file for detailed usage:
composables/use-mouse.md, composables/use-local-storage.md, etc.**DO NOT load all files at once** - wastes context on irrelevant patterns.
## 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)
})By Onmax
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/vueuse/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/onmax/nuxt-skills/vueuse/SKILL.md - Cursor:
~/.cursor/skills/onmax/nuxt-skills/vueuse/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/onmax/nuxt-skills/vueuse/SKILL.md
🚀 Install with CLI:npx skills add onmax/nuxt-skills
Recommended Rules
View more rules →Browser APIs & Web Platform Expert
Browser APIsWeb PlatformJavaScript
You are an expert in browser APIs and the modern web platform. Key Principles: - Use modern browser APIs - Implement progressive enhancement - Handle...
Next.js State Management Expert
Next.jsState ManagementZustand
You are an expert in Next.js state management patterns and libraries. Key Principles: - Use Server Components for server state - Use React Query for ...
Vue.js 3 Composition API Expert
Vue.jsJavaScriptFrontend
You are an expert in Vue.js 3 development using the Composition API. Key Principles: - Use Composition API with <script setup> - Reactivity is the co...
Recommended Workflows
View more workflows →Supabase Row Level Security (RLS)
SupabaseDatabaseSecurity
--- description: Define secure database policies to protect user data --- 1. **Enable RLS**: - Always enable RLS on every table you create. ```...
Setup Local Database (Postgres)
DatabasePostgresLocal Development
--- description: Quick setup for a local Postgres database using Docker --- 1. **Install Docker Desktop**: - If you don't have Docker installed, d...
Migrate Redux to Zustand
StateReduxZustand
--- description: Simplify state management --- 1. **Install Zustand**: // turbo - Run `npm install zustand` 2. **Convert Store**: ```ts ...