Vueuse
Wire Vue 3/Nuxt UI with VueUse composables (async computed, inject, controlled reactivity) without hunting the docs.
Overview
VueUse is an agent skill for the Build phase that guides Nuxt/Vue developers through VueUse composable APIs with runnable TypeScript examples and doc links.
Install
npx skills add https://github.com/onmax/nuxt-skills --skill vueuseWhat is this skill?
- Covers computedAsync, computedEager, computedInject, and computedWithControl with copy-paste TS examples
- Maps each helper to @vueuse/core vs @vueuse/shared packages and VueUse doc deep links
- Nuxt-oriented skill slice from onmax/nuxt-skills for agent-assisted composable selection
- Reference-style entries per composable (usage block + category: Reactivity / Component)
- 4+ documented composable families in the skill excerpt (computedAsync, computedEager, computedInject, computedWithContro
Adoption & trust: 2.6k installs on skills.sh; 674 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building Vue UI and need the right VueUse composable pattern without tab-hopping through vueuse.org during agent sessions.
Who is it for?
Solo builders on Nuxt or Vue 3 adding reactive helpers for async data, inject context, or controlled computed dependencies.
Skip if: Teams not using Vue/Nuxt, or projects that only need generic CSS/layout help with no composition API.
When should I use this skill?
Implementing or refactoring Vue/Nuxt UI that should use VueUse reactivity or component helpers.
What do I get? / Deliverables
Your agent proposes correct imports, initial-state handling, and composable-specific snippets aligned with VueUse documentation.
- Composable usage snippets aligned to VueUse docs
- Correct package imports (@vueuse/core vs @vueuse/shared)
Recommended Skills
Journey fit
How it compares
Composable API crib sheet for VueUse, not a full Nuxt scaffold generator or MCP server.
Common Questions / FAQ
Who is vueuse for?
Frontend-focused solo and indie developers shipping Nuxt or Vue 3 apps who want agents to cite VueUse patterns accurately.
When should I use vueuse?
During Build (frontend) when implementing reactive state, async derived values, or inject-based computed props; also when refactoring components toward VueUse instead of hand-rolled watchers.
Is vueuse safe to install?
Treat it as procedural documentation only; review the Security Audits panel on this Prism page and inspect the skill package before granting agent filesystem or network access.
SKILL.md
READMESKILL.md - Vueuse
# computedAsync Computed for async functions. **Package:** `@vueuse/core` **Category:** Reactivity ## Usage ```ts import { computedAsync } from '@vueuse/core' import { shallowRef } from 'vue' const name = shallowRef('jack') const userInfo = computedAsync( async () => { return await mockLookUp(name.value) }, null, // initial state ) ``` ## Reference [VueUse Docs](https://vueuse.org/core/computedAsync/) # computedEager Eager computed without lazy evaluation. **Package:** `@vueuse/shared` **Category:** Reactivity ## Usage ```ts import { computedEager } from '@vueuse/core' const todos = ref([]) const hasOpenTodos = computedEager(() => !!todos.length) console.log(hasOpenTodos.value) // false toTodos.value.push({ title: 'Learn Vue' }) console.log(hasOpenTodos.value) // true ``` ## Reference [VueUse Docs](https://vueuse.org/core/computedEager/) # computedInject Combine and . Useful for creating a computed property based on an injected value. **Package:** `@vueuse/core` **Category:** Component ## Usage ```ts // @filename: provider.ts // @include: main // ---cut--- import { computedInject } from '@vueuse/core' import { ArrayKey } from './provider' const computedArray = computedInject(ArrayKey, (source) => { const arr = [...source.value] arr.unshift({ key: 0, value: 'all' }) return arr }) ``` ## Reference [VueUse Docs](https://vueuse.org/core/computedInject/) # computedWithControl Explicitly define the dependencies of computed. **Package:** `@vueuse/shared` **Category:** Reactivity ## Usage ```ts // @include: main // ---cut--- console.log(computedRef.value) // 0 counter.value += 1 console.log(computedRef.value) // 0 source.value = 'bar' console.log(computedRef.value) // 1 ``` ## Reference [VueUse Docs](https://vueuse.org/core/computedWithControl/) # createDisposableDirective Utility for authoring disposable directives. Reactive effects created within directive hook will be tracked and automatically disposed when directive is unmounted. **Package:** `@vueuse/shared` **Category:** Utilities ## Usage ```ts import { useMouse } from '@vueuse/core' import { createDisposableDirective } from '@vueuse/shared' export const VDirective = createDisposableDirective({ mounted(el, binding) { const value = binding.value if (typeof value === 'function') { // `useMouse` event listener will be removed automatically when directive is unmounted const { x, y } = useMouse() watch(x, val => value(val)) } } }) ``` ## Returns | Name | Type | | --- | --- | | binding | `Ref` | | string | `Ref` | | vNode | `Ref` | | prevNode | `Ref` | | binding | `Ref` | | vNode | `Ref` | ## Reference [VueUse Docs](https://vueuse.org/core/createDisposableDirective/) # createEventHook Utility for creating event hooks **Package:** `@vueuse/shared` **Category:** Utilities ## Usage ```ts import { createEventHook } from '@vueuse/core' export function useMyFetch(url) { const fetchResult = createEventHook<Response>() const fetchError = createEventHook<any>() fetch(url) .then(result => fetchResult.trigger(result)) .catch(error => fetchError.trigger(error.message)) return { onResult: fetchResult.on, onError: fetchError.on, } } ``` ## Returns | Name | Type | | --- | --- | | on | `Ref` | | off | `Ref` | | trigger | `Ref` | | clear | `Ref` | ## Reference [VueUse Docs](https://vueuse.org/core/createEventHook/) # createGenericProjection Generic version of . Accepts a custom projector function to map arbitrary type of domains. **Package:** `@vueuse/math` **Category:** '@Math' ## Reference [VueUse Docs](https://vueuse.org/core/createGenericProjection/) # createGlobalState Keep states in the global scope to be reusable across Vue instances. **Package:** `@vueuse/shared` **Category:** State ## Usage ```ts // store.ts import { createGlobalState } from '@vueuse/core' import { shallowRef } from 'vue' export const useGlobalState = createGlobalState( ()