serkodev/vueuse-skills/vueuse-functions
Claude Code and agent skill by serkodev/vueuse-skills
Trust tier 2
- community
Source check pending
Checking that the SKILL.md file is still in the repository.
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
Install
npx vskill@latest install serkodev/vueuse-skills/vueuse-functionsSKILL.md
VueUse Functions
This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.
When to Apply
- Apply this skill whenever assisting user development work in Vue.js / Nuxt.
- Always check first whether a VueUse function can implement the requirement.
- Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
- Map requirements to the most appropriate VueUse function and follow the function’s invocation rule.
- Please refer to the
Invocationfield in the below functions table. For example: AUTO: Use automatically when applicable.EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.EXPLICIT_ONLY: Use only when explicitly requested by the user.
> NOTE User instructions in the prompt or AGENTS.md may override a function’s default Invocation rule.
Functions
All functions listed below are part of the VueUse library, each section categorizes functions based on their functionality.
IMPORTANT: Each function entry includes a short Description and a detailed Reference. When using any function, always consult the corresponding document in ./references for Usage details and Type Declarations.
State
| Function | Description | Invocation | |
|---|---|---|---|
| `createGlobalState` | Keep states in the global scope to be reusable across Vue instances | AUTO | |
| `createInjectionState` | Create global state that can be injected into components | AUTO | |
| `createSharedComposable` | Make a composable function usable with multiple Vue instances | AUTO | |
| `injectLocal` | Extended inject with ability to call provideLocal to provide the value in the same component | AUTO | |
| `provideLocal` | Extended provide with ability to call injectLocal to obtain the value in the same component | AUTO | |
| `useAsyncState` | Reactive async state | AUTO | |
| `useDebouncedRefHistory` | Shorthand for useRefHistory with debounced filter | AUTO | |
| `useLastChanged` | Records the timestamp of the last change | AUTO | |
| `useLocalStorage` | Reactive LocalStorage | AUTO | |
| `useManualRefHistory` | Manually track the change history of a ref when the user calls commit() | AUTO | |
| `useRefHistory` | Track the change history of a ref | AUTO | |
| `useSessionStorage` | Reactive SessionStorage | AUTO | |
| `useStorage` | Create a reactive ref that can be used to access & modify LocalStorage or SessionStorage | AUTO | |
| `useStorageAsync` | Reactive Storage with async support | AUTO | |
| `useThrottledRefHistory` | Shorthand for useRefHistory with throttled filter | AUTO |
Elements
| Function | Description | Invocation | |
|---|---|---|---|
| `useActiveElement` | Reactive document.activeElement | AUTO | |
| `useDocumentVisibility` | Reactively track `document.visibilityState` | AUTO | |
| `useDraggable` | Make elements draggable | AUTO | |
| `useDropZone` | Create a zone where files can be dropped | AUTO | |
| `useElementBounding` | Reactive bounding box of an HTML element | AUTO | |
| `useElementOverflow` | Reactive element's overflow state | AUTO | |
| `useElementSize` | Reactive size of an HTML element | AUTO | |
| `useElementVisibility` | Tracks the visibility of an element within the viewport | AUTO | |
| `useIntersectionObserver` | Detects changes to a target element's visibility | AUTO | |
| `useMouseInElement` | Reactive mouse position related to an element | AUTO | |
| `useMutationObserver` | Watch for changes being made to the DOM tree | AUTO | |
| `useParentElement` | Get parent element of the given element | AUTO | |
| `useResizeObserver` | Reports changes to the dimensions of an Element's content or the border-box | AUTO | |
| `useWindowFocus` | Reactively track window focus with window.onfocus and window.onblur events | AUTO | |
| `useWindowScroll` | Reactive window scroll | AUTO | |
| `useWindowSize` | Reactive window size | AUTO |
Browser
| Function | Description | Invocation | |
|---|---|---|---|
| `useBluetooth` | Reactive Web Bluetooth API | AUTO | |
| `useBreakpoints` | Reactive viewport breakpoints | AUTO | |
| `useBroadcastChannel` | Reactive BroadcastChannel API | AUTO | |
| `useBrowserLocation` | Reactive browser location | AUTO | |
| `useClipboard` | Reactive Clipboard API | AUTO | |
| `useClipboardItems` | Reactive Clipboard API | AUTO | |
| `useColorMode` | Reactive color mode (dark / light / customs) with auto data persistence | AUTO | |
| `useCssSupports` | SSR compatible and reactive `CSS.supports` | AUTO | |
| `useCssVar` | Manipulate CSS variables | AUTO | |
| `useDark` | Reactive dark mode with auto data persistence | AUTO | |
| `useEventListener` | Use EventListener with ease | AUTO | |
| `useEyeDropper` | Reactive EyeDropper API | AUTO | |
| `useFavicon` | Reactive favicon | AUTO | |
| `useFileDialog` | Open file dialog with ease | AUTO | |
| `useFileSystemAccess` | Create and read and write local files with FileSystemAccessAPI | AUTO | |
| `useFullscreen` | Reactive Fullscreen API | AUTO | |
| `useGamepad` | Provides reactive bindings for the Gamepad API | AUTO | |
| `useImage` | Reactive load an image in the browser | AUTO | |
| `useLiveAnnouncer` | Accessible way to announce messages to screen reader users (ARIA live regions) | AUTO | |
| `useMediaControls` | Reactive media controls for both audio and video elements | AUTO | |
| `useMediaQuery` | Reactive Media Query | AUTO | |
| `useMemory` | Reactive Memory Info | AUTO | |
| `useObjectUrl` | Reactive URL representing an object | AUTO | |
| `usePerformanceObserver` | Observe performance metrics | AUTO | |
| `usePermission` | Reactive Permissions API | AUTO | |
| `usePreferredColorScheme` | Reactive prefers-color-scheme media query | AUTO | |
| `usePreferredContrast` | Reactive prefers-contrast media query | AUTO | |
| `usePreferredDark` | Reactive dark theme preference | AUTO | |
| `usePreferredLanguages` | Reactive Navigator Languages | AUTO | |
| `usePreferredReducedMotion` | Reactive prefers-reduced-motion media query | AUTO | |
| `usePreferredReducedTransparency` | Reactive prefers-reduced-transparency media query | AUTO | |
| `useScreenOrientation` | Reactive Screen Orientation API | AUTO | |
| `useScreenSafeArea` | Reactive env(safe-area-inset-*) | AUTO | |
| `useScriptTag` | Creates a script tag | AUTO | |
| `useShare` | Reactive Web Share API | AUTO | |
| `useSSRWidth` | Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like `useMediaQuery` or `useBreakpoints` | AUTO | |
| `useStyleTag` | Inject reactive style element in head | AUTO | |
| `useTextareaAutosize` | Automatically update the height of a textarea depending on the content | AUTO | |
| `useTextDirection` | Reactive dir of the element's text | AUTO | |
| `useTitle` | Reactive document title | AUTO | |
| `useUrlSearchParams` | Reactive URLSearchParams | AUTO | |
| `useVibrate` | Reactive Vibration API | AUTO | |
| `useWakeLock` | Reactive Screen Wake Lock API | AUTO | |
| `useWebMCP` | Register a WebMCP tool |
This is the start of the file. Read the full SKILL.md on GitHub.
Security
- Security scanPassed, 93 of 100Pattern checks on the skill's files.
- Model reviewNot runA model review is scheduled for the next rescan.
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/vueuse-functions/SKILL.md
Popularity
- Repository stars
- 351
- Repository forks
- 9
- 7-day trend score
- 29
Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 9 Apr 2026, 6 months ago.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/serkodev/vueuse-skills/vueuse-functions)