GSAP in Vue, Nuxt and Svelte
greensock/gsap-skills
Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
OfficialMITAuto-check passed
Install Vueuse Functions
$ npx skills add JetBrains/skills --skill vueuse-functions -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install JetBrains/skills vueuse-functions --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/vueuse-functions .claude/skills/vueuse-functions && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "vueuse-functions" agent skill from https://github.com/JetBrains/skills/tree/main/vueuse-functions into .claude/skills/vueuse-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vueuse-functions", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/JetBrains/skills/tree/main/vueuse-functionsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add JetBrains/skills --skill vueuse-functions -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install JetBrains/skills vueuse-functions --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/vueuse-functions .agents/skills/vueuse-functions && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vueuse-functions" agent skill from https://github.com/JetBrains/skills/tree/main/vueuse-functions into .agents/skills/vueuse-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vueuse-functions", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add JetBrains/skills --skill vueuse-functions -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install JetBrains/skills vueuse-functions --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/vueuse-functions .cursor/skills/vueuse-functions && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vueuse-functions" agent skill from https://github.com/JetBrains/skills/tree/main/vueuse-functions into .cursor/skills/vueuse-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vueuse-functions", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/JetBrains/skills.git --path vueuse-functions--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add JetBrains/skills --skill vueuse-functions -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install JetBrains/skills vueuse-functions --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/vueuse-functions .gemini/skills/vueuse-functions && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vueuse-functions" agent skill from https://github.com/JetBrains/skills/tree/main/vueuse-functions into .gemini/skills/vueuse-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vueuse-functions", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install JetBrains/skills vueuse-functionsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add JetBrains/skills --skill vueuse-functions -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/vueuse-functions .github/skills/vueuse-functions && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vueuse-functions" agent skill from https://github.com/JetBrains/skills/tree/main/vueuse-functions into .github/skills/vueuse-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vueuse-functions", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add JetBrains/skills --skill vueuse-functions -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install JetBrains/skills vueuse-functions --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/vueuse-functions .opencode/skills/vueuse-functions && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vueuse-functions" agent skill from https://github.com/JetBrains/skills/tree/main/vueuse-functions into .opencode/skills/vueuse-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vueuse-functions", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
vueuse-functions- GitHub stars
- 366
- Used in
- 6 other repos
- Token cost
- ~9.3k tokens
- SKILL.md length
- 2,381 words
- Files
- 268 (incl. references)
- Skills in repo
- 76
- Repo updated
- First seen
- Licence
- MIT
At a glance
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
- SKILL.md covers When to Apply and Functions
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Vueuse Functions is an agent skill from JetBrains/skills, published by the product's own GitHub organization. Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
Its SKILL.md is about 9.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 268 other files, including reference files (for example `LICENSE.md`, `SYNC.md` and `references/computedAsync.md`). Compatibility notes: Requires Vue 3 (or above) or Nuxt 3 (or above) project
It works with Vue.js and Nuxt. The repository describes itself as: Curated agent skills collection verified by JetBrains. The licence is MIT.
Example prompts
- “/vueuse-functions”
Requirements
- Compatibility (from SKILL.md): Requires Vue 3 (or above) or Nuxt 3 (or above) project
What it can do on your machine
Read from SKILL.md and the folder at commit e0f258b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
developer.mozilla.orggithub.comrxjs.develectronjs.orgmotion.vueuse.orgfirebase.google.comnpmjs.comvue-schema-org.netlify.appvueuse.orgvuejs.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Compatibility
Requires Vue 3 (or above) or Nuxt 3 (or above) project
From compatibility in the SKILL.md frontmatter.
Context cost
Vueuse Functions loads about 9.3k tokens when it runs, and up to ~161k if it reads all its reference files. Until then it costs about 29 tokens; SKILL.md has 2,381 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from JetBrains/skills at commit e0f258b, republished under its MIT licence (© JetBrains). 2,381 words, ~9,322 tokens.
Download SKILL.mdSave it as
.claude/skills/vueuse-functions/SKILL.md (or your agent's skills folder). This skill also uses 267 other files; get the full folder from GitHub.- name
- vueuse-functions
- description
- Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
- compatibility
- Requires Vue 3 (or above) or Nuxt 3 (or above) project
- license
- MIT
- metadata.short-description
- Use VueUse composables effectively
- metadata.author
- SerKo <https://github.com/serkodev>
- metadata.version
- 1.0
- metadata.source
- https://github.com/antfu/skills/tree/main/skills/vueuse-functions
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.mdmay override a function’s defaultInvocationrule.
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 using 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 in 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 |
useElementSize | Reactive size of an HTML element | AUTO |
useElementVisibility | Tracks the visibility of an element within the viewport | AUTO |
useIntersectionObserver | Detects that 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 |
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 |
useWebNotification | Reactive Notification | AUTO |
useWebWorker | Simple Web Workers registration and communication | AUTO |
useWebWorkerFn | Run expensive functions without blocking the UI | AUTO |
Sensors
| Function | Description | Invocation |
|---|---|---|
onClickOutside | Listen for clicks outside of an element | AUTO |
onElementRemoval | Fires when the element or any element containing it is removed from the DOM | AUTO |
onKeyStroke | Listen for keyboard keystrokes | AUTO |
onLongPress | Listen for a long press on an element | AUTO |
onStartTyping | Fires when users start typing on non-editable elements | AUTO |
useBattery | Reactive Battery Status API | AUTO |
useDeviceMotion | Reactive DeviceMotionEvent | AUTO |
useDeviceOrientation | Reactive DeviceOrientationEvent | AUTO |
useDevicePixelRatio | Reactively track window.devicePixelRatio | AUTO |
useDevicesList | Reactive enumerateDevices listing available input/output devices | AUTO |
useDisplayMedia | Reactive mediaDevices.getDisplayMedia streaming | AUTO |
useElementByPoint | Reactive element by point | AUTO |
useElementHover | Reactive element's hover state | AUTO |
useFocus | Reactive utility to track or set the focus state of a DOM element | AUTO |
useFocusWithin | Reactive utility to track if an element or one of its decendants has focus | AUTO |
useFps | Reactive FPS (frames per second) | AUTO |
useGeolocation | Reactive Geolocation API | AUTO |
useIdle | Tracks whether the user is being inactive | AUTO |
useInfiniteScroll | Infinite scrolling of the element | AUTO |
useKeyModifier | Reactive Modifier State | AUTO |
useMagicKeys | Reactive keys pressed state | AUTO |
useMouse | Reactive mouse position | AUTO |
useMousePressed | Reactive mouse pressing state | AUTO |
useNavigatorLanguage | Reactive navigator.language | AUTO |
useNetwork | Reactive Network status | AUTO |
useOnline | Reactive online state | AUTO |
usePageLeave | Reactive state to show whether the mouse leaves the page | AUTO |
useParallax | Create parallax effect easily | AUTO |
usePointer | Reactive pointer state | AUTO |
usePointerLock | Reactive pointer lock | AUTO |
usePointerSwipe | Reactive swipe detection based on PointerEvents | AUTO |
useScroll | Reactive scroll position and state | AUTO |
useScrollLock | Lock scrolling of the element | AUTO |
useSpeechRecognition | Reactive SpeechRecognition | AUTO |
useSpeechSynthesis | Reactive SpeechSynthesis | AUTO |
useSwipe | Reactive swipe detection based on TouchEvents | AUTO |
useTextSelection | Reactively track user text selection based on Window.getSelection | AUTO |
useUserMedia | Reactive mediaDevices.getUserMedia streaming | AUTO |
Network
| Function | Description | Invocation |
|---|---|---|
useEventSource | An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server | AUTO |
useFetch | Reactive Fetch API provides the ability to abort requests | AUTO |
useWebSocket | Reactive WebSocket client | AUTO |
Animation
| Function | Description | Invocation |
|---|---|---|
useAnimate | Reactive Web Animations API | AUTO |
useInterval | Reactive counter that increases on every interval | AUTO |
useIntervalFn | Wrapper for setInterval with controls | AUTO |
useNow | Reactive current Date instance | AUTO |
useRafFn | Call function on every requestAnimationFrame | AUTO |
useTimeout | Reactive value that becomes true after a given time | AUTO |
useTimeoutFn | Wrapper for setTimeout with controls | AUTO |
useTimestamp | Reactive current timestamp | AUTO |
useTransition | Transition between values | AUTO |
Component
| Function | Description | Invocation |
|---|---|---|
computedInject | Combine computed and inject | AUTO |
createReusableTemplate | Define and reuse template inside the component scope | AUTO |
createTemplatePromise | Template as Promise | AUTO |
templateRef | Shorthand for binding ref to template element | AUTO |
tryOnBeforeMount | Safe onBeforeMount | AUTO |
tryOnBeforeUnmount | Safe onBeforeUnmount | AUTO |
tryOnMounted | Safe onMounted | AUTO |
tryOnScopeDispose | Safe onScopeDispose | AUTO |
tryOnUnmounted | Safe onUnmounted | AUTO |
unrefElement | Retrieves the underlying DOM element from a Vue ref or component instance | AUTO |
useCurrentElement | Get the DOM element of current component as a ref | AUTO |
useMounted | Mounted state in ref | AUTO |
useTemplateRefsList | Shorthand for binding refs to template elements and components inside v-for | AUTO |
useVirtualList | Create virtual lists with ease | AUTO |
useVModel | Shorthand for v-model binding | AUTO |
useVModels | Shorthand for props v-model binding | AUTO |
Watch
| Function | Description | Invocation |
|---|---|---|
until | Promised one-time watch for changes | AUTO |
watchArray | Watch for an array with additions and removals | AUTO |
watchAtMost | watch with the number of times triggered | AUTO |
watchDebounced | Debounced watch | AUTO |
watchDeep | Shorthand for watching value with {deep: true} | AUTO |
watchIgnorable | Ignorable watch | AUTO |
watchImmediate | Shorthand for watching value with {immediate: true} | AUTO |
watchOnce | Shorthand for watching value with { once: true } | AUTO |
watchPausable | Pausable watch | AUTO |
watchThrottled | Throttled watch | AUTO |
watchTriggerable | Watch that can be triggered manually | AUTO |
watchWithFilter | watch with additional EventFilter control | AUTO |
whenever | Shorthand for watching value to be truthy | AUTO |
Show full SKILL.md (977 more words)Show less
Reactivity
| Function | Description | Invocation |
|---|---|---|
computedAsync | Computed for async functions | AUTO |
computedEager | Eager computed without lazy evaluation | AUTO |
computedWithControl | Explicitly define the dependencies of computed | AUTO |
createRef | Returns a deepRef or shallowRef depending on the deep param | AUTO |
extendRef | Add extra attributes to Ref | AUTO |
reactify | Converts plain functions into reactive functions | AUTO |
reactifyObject | Apply reactify to an object | AUTO |
reactiveComputed | Computed reactive object | AUTO |
reactiveOmit | Reactively omit fields from a reactive object | AUTO |
reactivePick | Reactively pick fields from a reactive object | AUTO |
refAutoReset | A ref which will be reset to the default value after some time | AUTO |
refDebounced | Debounce execution of a ref value | AUTO |
refDefault | Apply default value to a ref | AUTO |
refManualReset | Create a ref with manual reset functionality | AUTO |
refThrottled | Throttle changing of a ref value | AUTO |
refWithControl | Fine-grained controls over ref and its reactivity | AUTO |
syncRef | Two-way refs synchronization | AUTO |
syncRefs | Keep target refs in sync with a source ref | AUTO |
toReactive | Converts ref to reactive | AUTO |
toRef | Normalize value/ref/getter to ref or computed | EXPLICIT_ONLY |
toRefs | Extended toRefs that also accepts refs of an object | AUTO |
Array
| Function | Description | Invocation |
|---|---|---|
useArrayDifference | Reactive get array difference of two arrays | AUTO |
useArrayEvery | Reactive Array.every | AUTO |
useArrayFilter | Reactive Array.filter | AUTO |
useArrayFind | Reactive Array.find | AUTO |
useArrayFindIndex | Reactive Array.findIndex | AUTO |
useArrayFindLast | Reactive Array.findLast | AUTO |
useArrayIncludes | Reactive Array.includes | AUTO |
useArrayJoin | Reactive Array.join | AUTO |
useArrayMap | Reactive Array.map | AUTO |
useArrayReduce | Reactive Array.reduce | AUTO |
useArraySome | Reactive Array.some | AUTO |
useArrayUnique | Reactive unique array | AUTO |
useSorted | Reactive sort array | AUTO |
Time
| Function | Description | Invocation |
|---|---|---|
useCountdown | Reactive countdown timer in seconds | AUTO |
useDateFormat | Get the formatted date according to the string of tokens passed in | AUTO |
useTimeAgo | Reactive time ago | AUTO |
useTimeAgoIntl | Reactive time ago with i18n supported | AUTO |
Utilities
| Function | Description | Invocation |
|---|---|---|
createEventHook | Utility for creating event hooks | AUTO |
createUnrefFn | Make a plain function accepting ref and raw values as arguments | AUTO |
get | Shorthand for accessing ref.value | EXPLICIT_ONLY |
isDefined | Non-nullish checking type guard for Ref | AUTO |
makeDestructurable | Make isomorphic destructurable for object and array at the same time | AUTO |
set | Shorthand for ref.value = x | EXPLICIT_ONLY |
useAsyncQueue | Executes each asynchronous task sequentially and passes the current task result to the next task | AUTO |
useBase64 | Reactive base64 transforming | AUTO |
useCached | Cache a ref with a custom comparator | AUTO |
useCloned | Reactive clone of a ref | AUTO |
useConfirmDialog | Creates event hooks to support modals and confirmation dialog chains | AUTO |
useCounter | Basic counter with utility functions | AUTO |
useCycleList | Cycle through a list of items | AUTO |
useDebounceFn | Debounce execution of a function | AUTO |
useEventBus | A basic event bus | AUTO |
useMemoize | Cache results of functions depending on arguments and keep it reactive | AUTO |
useOffsetPagination | Reactive offset pagination | AUTO |
usePrevious | Holds the previous value of a ref | AUTO |
useStepper | Provides helpers for building a multi-step wizard interface | AUTO |
useSupported | SSR compatibility isSupported | AUTO |
useThrottleFn | Throttle execution of a function | AUTO |
useTimeoutPoll | Use timeout to poll something | AUTO |
useToggle | A boolean switcher with utility functions | AUTO |
useToNumber | Reactively convert a string ref to number | AUTO |
useToString | Reactively convert a ref to string | AUTO |
@Electron
| Function | Description | Invocation |
|---|---|---|
useIpcRenderer | Provides ipcRenderer and all of its APIs with Vue reactivity | EXTERNAL |
useIpcRendererInvoke | Reactive ipcRenderer.invoke API result | EXTERNAL |
useIpcRendererOn | Use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted | EXTERNAL |
useZoomFactor | Reactive WebFrame zoom factor | EXTERNAL |
useZoomLevel | Reactive WebFrame zoom level | EXTERNAL |
@Firebase
| Function | Description | Invocation |
|---|---|---|
useAuth | Reactive Firebase Auth binding | EXTERNAL |
useFirestore | Reactive Firestore binding | EXTERNAL |
useRTDB | Reactive Firebase Realtime Database binding | EXTERNAL |
@Head
| Function | Description | Invocation |
|---|---|---|
createHead | Create the head manager instance. | EXTERNAL |
useHead | Update head meta tags reactively. | EXTERNAL |
@Integrations
| Function | Description | Invocation |
|---|---|---|
useAsyncValidator | Wrapper for async-validator | EXTERNAL |
useAxios | Wrapper for axios | EXTERNAL |
useChangeCase | Reactive wrapper for change-case | EXTERNAL |
useCookies | Wrapper for universal-cookie | EXTERNAL |
useDrauu | Reactive instance for drauu | EXTERNAL |
useFocusTrap | Reactive wrapper for focus-trap | EXTERNAL |
useFuse | Easily implement fuzzy search using a composable with Fuse.js | EXTERNAL |
useIDBKeyval | Wrapper for idb-keyval | EXTERNAL |
useJwt | Wrapper for jwt-decode | EXTERNAL |
useNProgress | Reactive wrapper for nprogress | EXTERNAL |
useQRCode | Wrapper for qrcode | EXTERNAL |
useSortable | Wrapper for sortable | EXTERNAL |
@Math
| Function | Description | Invocation |
|---|---|---|
createGenericProjection | Generic version of createProjection | EXTERNAL |
createProjection | Reactive numeric projection from one domain to another | EXTERNAL |
logicAnd | AND condition for refs | EXTERNAL |
logicNot | NOT condition for ref | EXTERNAL |
logicOr | OR conditions for refs | EXTERNAL |
useAbs | Reactive Math.abs | EXTERNAL |
useAverage | Get the average of an array reactively | EXTERNAL |
useCeil | Reactive Math.ceil | EXTERNAL |
useClamp | Reactively clamp a value between two other values | EXTERNAL |
useFloor | Reactive Math.floor | EXTERNAL |
useMath | Reactive Math methods | EXTERNAL |
useMax | Reactive Math.max | EXTERNAL |
useMin | Reactive Math.min | EXTERNAL |
usePrecision | Reactively set the precision of a number | EXTERNAL |
useProjection | Reactive numeric projection from one domain to another | EXTERNAL |
useRound | Reactive Math.round | EXTERNAL |
useSum | Get the sum of an array reactively | EXTERNAL |
useTrunc | Reactive Math.trunc | EXTERNAL |
@Motion
| Function | Description | Invocation |
|---|---|---|
useElementStyle | Sync a reactive object to a target element CSS styling | EXTERNAL |
useElementTransform | Sync a reactive object to a target element CSS transform. | EXTERNAL |
useMotion | Putting your components in motion. | EXTERNAL |
useMotionProperties | Access Motion Properties for a target element. | EXTERNAL |
useMotionVariants | Handle the Variants state and selection. | EXTERNAL |
useSpring | Spring animations. | EXTERNAL |
@Router
| Function | Description | Invocation |
|---|---|---|
useRouteHash | Shorthand for a reactive route.hash | EXTERNAL |
useRouteParams | Shorthand for a reactive route.params | EXTERNAL |
useRouteQuery | Shorthand for a reactive route.query | EXTERNAL |
@RxJS
| Function | Description | Invocation |
|---|---|---|
from | Wrappers around RxJS's from() and fromEvent() to allow them to accept refs | EXTERNAL |
toObserver | Sugar function to convert a ref into an RxJS Observer | EXTERNAL |
useExtractedObservable | Use an RxJS Observable as extracted from one or more composables | EXTERNAL |
useObservable | Use an RxJS Observable | EXTERNAL |
useSubject | Bind an RxJS Subject to a ref and propagate value changes both ways | EXTERNAL |
useSubscription | Use an RxJS Subscription without worrying about unsubscribing from it or creating memory leaks | EXTERNAL |
watchExtractedObservable | Watch the values of an RxJS Observable as extracted from one or more composables | EXTERNAL |
@SchemaOrg
| Function | Description | Invocation |
|---|---|---|
createSchemaOrg | Create the schema.org manager instance. | EXTERNAL |
useSchemaOrg | Update schema.org reactively. | EXTERNAL |
@Sound
| Function | Description | Invocation |
|---|---|---|
useSound | Play sound effects reactively. | EXTERNAL |
© JetBrains, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 267 other files (references) in vueuse-functions of JetBrains/skills.
- SKILL.md
- LICENSE.md
- SYNC.md
- references/computedAsync.md
- references/computedEager.md
- references/computedInject.md
- references/computedWithControl.md
- references/createEventHook.md
- references/createGenericProjection.md
- references/createGlobalState.md
- references/createInjectionState.md
- references/createProjection.md
- references/createRef.md
- references/createReusableTemplate.md
- references/createSharedComposable.md
- references/createTemplatePromise.md
- references/createUnrefFn.md
- references/extendRef.md
- references/from.md
- references/get.md
- … and 248 more
Open the folder on GitHubat commit e0f258b
Used in 7 other repositories
We found 8 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 6 other GitHub owners. This page covers the copy in JetBrains/skills, which our catalogue first saw on October 7, 2026.
- moeru-ai/airi.agents/skills/vueuse-functions
- vueuse/skillsskills/vueuse-functions
- uni-helper/skillsskills/vueuse-functions
- konnga/skill-buddy.agents/skills/vueuse-functions.claude/skills/vueuse-functions
- vueuse/vueuseskills/vueuse-functions
- aiskillstore/marketplaceskills/antfu/vueuse-functions
- NeverSight/learn-skills.devdata/skills-md/0froq/skills/vueuse-functions
Compare with similar skills
Vueuse Functions next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vueuse Functions this skillJetBrains/skills | 366 | 6 repos | ~9.3k | Automated safety check: Pass | MIT | |
| GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills | 16k | 4 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Create Docsvictorgarciaesgi/nuxt-typed-router | 413 | 2 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Formkitformkit/formkit | 4.8k | — | ~1.7k | Automated safety check: Pass | MIT | |
| UithingBayBreezy/ui-thing | 729 | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Nuxt UImegaarmos/vue-spring-bottom-sheet | 141 | 1 repos | ~2.5k | Automated safety check: Pass | MIT |
Similar skills
Create Docs
victorgarciaesgi/nuxt-typed-router
Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.
Formkit
formkit/formkit
A skill your agent uses when working with FormKit forms, validation, schema, or custom inputs in React, Vue, or Nuxt projects.
Uithing
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
Nuxt UI
megaarmos/vue-spring-bottom-sheet
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming.
QR Codes with qrcode.vue
scopewu/qrcode.vue
Renders, styles and downloads QR codes in Vue 3 apps with the qrcode.vue component, covering canvas versus SVG output, embedded logos, gradients and rounded modules.
More from JetBrains/skills
All 76 skills in this repo- Official
Playwright
JetBrains/skills
A skill your agent uses when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via playwright-cli…
- Official
Skill Creator
JetBrains/skills
Guide for creating effective skills. An agent skill from JetBrains/skills.
- Official
Transcribe
JetBrains/skills
Transcribe audio files to text with optional diarization and known-speaker hints.
- Official
Imagegen
JetBrains/skills
A skill your agent uses when the user asks to generate or edit images via the OpenAI Image API (for example: generate image, edit/inpaint/mask, background removal or replacement, transparent…
- Official
Speech
JetBrains/skills
A skill your agent uses when the user asks for text-to-speech narration or voiceover, accessibility reads, audio prompts, or batch speech generation via the OpenAI Audio API; run the bundled CLI…
- Official
Screenshot
JetBrains/skills
A skill your agent uses when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are…
Related
Questions about Vueuse Functions
What does Vueuse Functions do?
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. Vueuse Functions is an agent skill from JetBrains/skills, published by the product's own GitHub organization.js / Nuxt features.
How do I install Vueuse Functions in Claude Code?
Run `npx skills add JetBrains/skills --skill vueuse-functions -a claude-code`. Or copy the skill folder (vueuse-functions in JetBrains/skills) into .claude/skills/vueuse-functions in your project. Claude Code loads it when a task matches its description.
How do I install Vueuse Functions in Codex?
Run `npx skills add JetBrains/skills --skill vueuse-functions -a codex`. Or copy the skill folder (vueuse-functions in JetBrains/skills) into .agents/skills/vueuse-functions in your project. Codex loads it when a task matches its description.
Can I use Vueuse Functions in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add JetBrains/skills --skill vueuse-functions -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vueuse-functions, .gemini/skills/vueuse-functions, .github/skills/vueuse-functions and .opencode/skills/vueuse-functions in your project.
What does Vueuse Functions need to run?
SKILL.md names no scripts, command-line tools or credentials: Vueuse Functions is instructions for the agent only. Compatibility (from SKILL.md): Requires Vue 3 (or above) or Nuxt 3 (or above) project.
Does Vueuse Functions access the network?
SKILL.md names 10 domains. As links in the text: developer.mozilla.org, github.com, rxjs.dev, electronjs.org, motion.vueuse.org, firebase.google.com, npmjs.com, vue-schema-org.netlify.app, vueuse.org and vuejs.org. This is read from the text; nothing was executed.
Is Vueuse Functions safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Vueuse Functions use?
Vueuse Functions is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Vueuse Functions use?
About 9.3k tokens (SKILL.md is roughly 37k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 152k tokens, read only when the agent opens those files.
What are the alternatives to Vueuse Functions?
Skills that share tags, products or a category with Vueuse Functions: GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars), Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Formkit (formkit/formkit, 4.8k stars) and Uithing (BayBreezy/ui-thing, 729 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vueuse Functions?
JetBrains (a GitHub organization, an official publisher) maintains it in JetBrains/skills, which has 366 GitHub stars. The repository holds 76 skills in this directory. The repository was last updated on June 29, 2026.
Source: JetBrains/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.