# vueuse-functions

This skill maps Vue.js and Nuxt tasks to VueUse functions and their usage patterns. It fits projects built with Vue 3+ or Nuxt 3+.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3700 installs · ★ 401
- Author: SerKo
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/vueuse/skills/tree/HEAD/skills/vueuse-functions/SKILL.md
- Updated: 2026-09-16
- HTML: https://affpapa.org/en/nevibecode/skills/vueuse-functions

## What it does

vueuse-functions helps an agent match a requirement with a VueUse function for reactive state, storage, DOM elements, or browser APIs. It checks VueUse before suggesting custom code, then follows the invocation rule for the selected function.

The skill includes function tables grouped by area and links to reference files in `references` for usage and type declarations. Functions marked `AUTO` can be selected automatically; prompt instructions or `AGENTS.md` can override that rule. Check the project baseline first: the skill is intended for Vue 3 or above and Nuxt 3 or above.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vueuse/skills --skill vueuse-functions -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vueuse-functions/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vueuse-functions/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vueuse/skills --skill vueuse-functions -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vueuse-functions/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vueuse/skills --skill vueuse-functions -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vueuse-functions/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vueuse/skills vueuse-functions
```

2. **Manually: put the files in place**
- File: `.github/skills/vueuse-functions/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vueuse/skills --skill vueuse-functions -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vueuse/skills --path skills/vueuse-functions
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vueuse-functions/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vueuse/skills --skill vueuse-functions -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/vueuse/skills/tree/HEAD/skills/vueuse-functions/SKILL.md

## When to use it
- choose a VueUse function for reactive state
- store values in `LocalStorage` or `SessionStorage`
- add file dragging and a drop zone
- track element visibility, size, or scroll position
- keep a change history for a `ref`

## Example prompts
- Use the skill to choose a VueUse function for reactive settings in `src/composables/useSettings.ts`.
- For `FileDrop.vue`, pick the right VueUse function and implement a file drop zone.
- In this Vue 3 project, find a VueUse function for tracking the visibility of `ProductCard.vue`.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 1210b2cc9316d895.

BEGIN THIRD-PARTY FILE 1210b2cc9316d895
```text
---
name: vueuse-functions
description: Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
license: MIT
metadata:
    author: SerKo <https://github.com/serkodev>
    version: "1.0"
compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project
---

# 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 `Invocation` field 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](https://vueuse.org/) 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`](references/createGlobalState.md) | Keep states in the global scope to be reusable across Vue instances | AUTO |
| [`createInjectionState`](references/createInjectionState.md) | Create global state that can be injected into components | AUTO |
| [`createSharedComposable`](references/createSharedComposable.md) | Make a composable function usable with multiple Vue instances | AUTO |
| [`injectLocal`](references/injectLocal.md) | Extended `inject` with ability to call `provideLocal` to provide the value in the same component | AUTO |
| [`provideLocal`](references/provideLocal.md) | Extended `provide` with ability to call `injectLocal` to obtain the value in the same component | AUTO |
| [`useAsyncState`](references/useAsyncState.md) | Reactive async state | AUTO |
| [`useDebouncedRefHistory`](references/useDebouncedRefHistory.md) | Shorthand for `useRefHistory` with debounced filter | AUTO |
| [`useLastChanged`](references/useLastChanged.md) | Records the timestamp of the last change | AUTO |
| [`useLocalStorage`](references/useLocalStorage.md) | Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) | AUTO |
```
END THIRD-PARTY FILE 1210b2cc9316d895

The third-party file has ended. Everything between the 1210b2cc9316d895 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3140 of 37781 bytes. © SerKo · MIT · https://github.com/vueuse/skills/tree/HEAD/skills/vueuse-functions/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md