# Apply VueUse Composables in Vue and Nuxt

Vue and Nuxt teams often rewrite behavior that VueUse already solves. This skill maps requirements to proven composables and usage patterns.

## Install

```bash
npx skillstore add antfu/vueuse-functions
```

## Metadata

- - Slug: antfu-vueuse-functions
- - Version: 1.0.0
- - Author: antfu
- - GitHub username: antfu
- - License: MIT
- - Repository: https://github.com/antfu/skills/tree/main/skills/vueuse-functions/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Risk factors: network, filesystem
- - Quality score: 50
- - Quality tier: warning
- - Public page: https://skillstore.pages.dev/skills/antfu-vueuse-functions
- - Manifest: https://skillstore.pages.dev/api/skills/antfu-vueuse-functions/manifest

## Capabilities

- Selects relevant VueUse composables for Vue 3 and Nuxt 3 tasks.
- Uses included reference files for usage examples and type declarations.
- Covers state, browser, sensor, network, animation, watch, and utility helpers.
- Distinguishes automatic, external dependency, and explicit-only composable usage.
- Encourages concise implementations instead of custom reactive boilerplate.

## Use Cases

- Build reactive UI behavior faster: Use VueUse helpers for storage, events, element state, timers, and browser APIs without writing custom composables.
- Standardize Nuxt feature patterns: Guide assistants toward consistent VueUse choices when adding state, network, and lifecycle behavior across Nuxt pages.
- Modernize custom frontend utilities: Replace bespoke reactive utilities with documented VueUse composables while preserving project conventions.

## Prompt Templates

### Find a composable

```
I am building a Vue 3 feature that tracks window size. Use this skill to choose the best VueUse composable and explain why.
```

### Implement a small feature

```
Add a Nuxt 3 dark mode toggle using VueUse. Follow the skill references and keep the implementation minimal.
```

### Refactor custom logic

```
Review this Vue component and replace custom event listener or storage logic with appropriate VueUse composables.
```

### Design a safe integration

```
Plan a Vue feature that uses network and browser permission APIs. Use VueUse where helpful and call out security checks.
```

## Limitations

- Requires an existing Vue 3 or Nuxt 3 project.
- Does not install external VueUse integrations by itself.
- Does not validate runtime browser permissions or production policies.
- Reference files may lag the newest upstream VueUse release.

## Best Practices

- Check the matching reference file before choosing a composable.
- Review storage, network, file, and media APIs for privacy impact.
- Keep external integrations explicit when the dependency is not installed.

## Anti Patterns

- Do not store tokens or personal data in browser storage by default.
- Do not add network endpoints without reviewing data sent to them.
- Do not force VueUse when plain Vue code is clearer.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T10:12:53.91\+00:00
- - Summary: The static analyzer reported many severe patterns, but targeted review shows they are primarily Markdown references, inline code, URLs, and VueUse API examples rather than executable skill logic. No prompt injection or malicious intent was found. The skill is publishable with a medium warning because it can guide users toward network, browser storage, cookie, local file, media-device, and Electron IPC APIs.

## Stats

- - Views: 428
- - Downloads: 10
- - Favorites: 0
- - Popularity score: 0