vueuse-functions

Maps Vue.js and Nuxt requirements to appropriate VueUse composables with usage references.

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/narr07/permadi --skill vueuse-functions-narr07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vueuse-functions
Source: https://github.com/narr07/permadi/tree/main/.agents/skills/vueuse-functions
Command: npx skills add https://github.com/narr07/permadi --skill vueuse-functions-narr07

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vueuse/core, and includes references (resource) components.

What problem does it solve? Developers working in Vue.js or Nuxt often rewrite common reactive logic—storage sync, event listeners, observers, debouncing—by hand, producing verbose and inconsistent code. This Skill guides the AI to check VueUse first, select the correct composable for each requirement, and apply its documented usage pattern instead of bespoke implementations. ## Core Features & Use Cases - Requirement-to-Composable Mapping: Categorized tables covering State, Elements, Browser, Sensors, Network, Animation, Component, Watch, Reactivity, Array, Time, and Utilities functions, each with a short description and invocation rule. - Invocation Governance: AUTO, EXTERNAL, and EXPLICIT_ONLY rules control when a composable may be applied, with user instructions able to override defaults. - Detailed References: Per-function Markdown documents in references/ provide usage examples, caveats, and TypeScript type declarations. - Use Case: When asked to add dark mode to a Nuxt app, the Skill directs the AI to use useDark or useColorMode with auto persistence rather than writing custom class-toggling logic. ## Quick Start Ask the AI to implement a Vue or Nuxt feature, such as reactive local storage or infinite scroll, and have it apply the matching VueUse composable from this Skill.

Frequently Asked Questions about vueuse-functions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use VueUse composables in a Nuxt 3 project?▼

Install @vueuse/core or @vueuse/nuxt, then import the composable you need, such as useLocalStorage or useDark. This Skill maps each requirement to the right function and points to its reference document for usage and type declarations.

What VueUse function should I use for reactive local storage?▼

Use useLocalStorage for a reactive ref synced to localStorage, or useStorage when you need to choose between localStorage and sessionStorage. For async storage backends, useStorageAsync provides the same reactive API with async support.

Does VueUse work with Vue 3 and Nuxt SSR?▼

Yes, this Skill requires Vue 3 or Nuxt 3 and above. Some composables like createSharedComposable automatically fall back to non-shared instances in SSR to avoid cross-request state pollution, and utilities like useSupported check browser API availability.

When should I avoid external VueUse integrations like Firebase or Electron?▼

Functions marked EXTERNAL, such as useFirestore or useIpcRenderer, should only be used when the required dependency is already installed. The Skill instructs the AI to reconsider or ask before adding new external packages.

Why use VueUse instead of writing custom composables?▼

VueUse composables provide tested, typed implementations of common reactive patterns like debouncing, observers, and event listeners. Preferring them over bespoke code keeps implementations concise, maintainable, and consistent across a project.