mcpField
V
vueuse

vueuse

github.com/onmaxDevelopment7233.1k installsUpdated today
Repository

About vueuse

A skill reference for VueUse, a collection of Vue Composition utilities. It helps Vue developers find existing composables for common application patterns, with guidance on Nuxt auto-imports and SSR behavior.

Key features

  1. 01State and storage composables
  2. 02DOM, browser, and sensor utilities
  3. 03Network and animation utilities
  4. 04Composables for arrays, time, and reactivity
  5. 05Guidance on SSR-safe usage

Use cases

  1. 01Finding a composable for a feature
  2. 02Persisting reactive state in storage
  3. 03Handling browser APIs in SSR apps

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/onmax/nuxt-skills --skill vueuse

After installing, type/vueusein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

composables/
computed-async.md
computed-eager.md
computed-inject.md
computed-with-control.md
create-disposable-directive.md
create-event-hook.md
create-generic-projection.md
create-global-state.md
create-injection-state.md
create-projection.md
create-ref.md
create-reusable-template.md
create-shared-composable.md
create-template-promise.md
create-unref-fn.md
extend-ref.md
from.md
get.md
inject-local.md
is-defined.md
logic-and.md
logic-not.md
logic-or.md
make-destructurable.md
on-click-outside.md
on-element-removal.md
on-key-stroke.md
on-long-press.md
on-start-typing.md
provide-local.md

Details

From the project README

VueUse

Collection of essential Vue Composition utilities. Check VueUse before writing custom composables - most patterns already implemented.

Current stable: VueUse 14.x for Vue 3.5+

Installation

Vue 3:

pnpm add @vueuse/core

Nuxt:

pnpm add @vueuse/nuxt @vueuse/core

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vueuse/nuxt'],
})

Nuxt module auto-imports composables - no import needed.

Categories

CategoryExamples
StateuseLocalStorage, useSessionStorage, useRefHistory
ElementsuseElementSize, useIntersectionObserver, useResizeObserver
BrowseruseClipboard, useFullscreen, useMediaQuery
SensorsuseMouse, useKeyboard, useDeviceOrientation
NetworkuseFetch, useWebSocket, useEventSource
AnimationuseTransition, useInterval, useTimeout
ComponentuseVModel, useVirtualList, useTemplateRefsList
WatchwatchDebounced, watchThrottled, watchOnce
ReactivitycreateSharedComposable, toRef, toReactive
ArrayuseArrayFilter, useArrayMap, useSorted
TimeuseDateFormat, useNow, useTimeAgo
UtilitiesuseDebounce, useThrottle, useMemoize

Quick Reference

Load composable files based on what you need:

Working on...Load file
Finding a composablereferences/composables.md
Specific composablecomposables/<name>.md

Loading Files

Consider loading these reference files based on your task:

DO NOT load all files at once. Load only what's relevant to your current task.

Common Patterns

State persistence:

const state = useLocalStorage('my-key', { count: 0 })

Mouse tracking:

const { x, y } = useMouse()

Debounced ref:

const search = ref('')
const debouncedSearch = refDebounced(search, 300)

Shared composable (singleton):

const useSharedMouse = createSharedComposable(useMouse)

SSR Gotchas

Many VueUse composables use browser APIs unavailable during SSR.

Check with isClient:

import { isClient } from '@vueuse/core'

if (isClient) {
  // Browser-only code
  const { width } = useWindowSize()
}

Wrap in onMounted:

const width = ref(0)

onMounted(() => {
  // Only runs in browser
  const { width: w } = useWindowSize()
  width.value = w.value
})

Use SSR-safe composables:

// These check isClient internally
const mouse = useMouse() // Returns {x: 0, y: 0} on server
const storage = useLocalStorage('key', 'default') // Uses default on server

@vueuse/nuxt auto-handles SSR - composables return safe defaults on server.

Target Element Refs

When targeting component refs instead of DOM elements:

import type { MaybeElementRef } from '@vueuse/core'

// Component ref needs .$el to get DOM element
const compRef = ref<ComponentInstance>()
const { width } = useElementSize(compRef) // ❌ Won't work

// Use MaybeElementRef pattern
import { unrefElement } from '@vueuse/core'

const el = computed(() => unrefElement(compRef)) // Gets .$el
const { width } = useElementSize(el) // ✅ Works

Or access $el directly:

const compRef = ref<ComponentInstance>()

onMounted(() => {
  const el = compRef.value?.$el as HTMLElement
  const { width } = useElementSize(el)
})

Comments

Markdown supported