mcpField
V
vueuse

vueuse

github.com/onmax开发7233.1k 次安装今天更新
代码仓库

关于 vueuse

VueUse 技能参考，介绍 Vue Composition 工具集合，帮助 Vue 开发者查找常见应用模式的现成 composable，并说明 Nuxt 自动导入和 SSR 注意事项。

主要功能

  1. 01状态与存储 composable
  2. 02DOM、浏览器和传感器工具
  3. 03网络与动画工具
  4. 04数组、时间和响应式工具
  5. 05SSR 安全用法说明

适用场景

  1. 01为功能查找合适的 composable
  2. 02将响应式状态持久化到存储
  3. 03在 SSR 应用中处理浏览器 API

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/vueuse确认已加载。

包含的文件

除 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

详细介绍

VueUse

Vue 组合式函数实用工具集。在编写自定义组合式函数之前，请先查看 VueUse——大多数常见模式都已实现。

**当前稳定版本：**适用于 Vue 3.5+ 的 VueUse 14.x

安装

Vue 3：

pnpm add @vueuse/core

Nuxt：

pnpm add @vueuse/nuxt @vueuse/core

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

Nuxt 模块会自动导入组合式函数，无需导入。

类别

类别示例
状态useLocalStorage, useSessionStorage, useRefHistory
元素useElementSize, useIntersectionObserver, useResizeObserver
浏览器useClipboard, useFullscreen, useMediaQuery
传感器useMouse, useKeyboard, useDeviceOrientation
网络useFetch, useWebSocket, useEventSource
动画useTransition, useInterval, useTimeout
组件useVModel, useVirtualList, useTemplateRefsList
侦听watchDebounced, watchThrottled, watchOnce
响应性createSharedComposable, toRef, toReactive
数组useArrayFilter, useArrayMap, useSorted
时间useDateFormat, useNow, useTimeAgo
实用工具useDebounce, useThrottle, useMemoize

快速参考

根据需要加载组合式函数文件：

正在处理……加载文件
查找组合式函数references/composables.md
特定组合式函数composables/<name>.md

加载文件

请根据任务考虑加载以下参考文件：

**请勿一次性加载所有文件。**仅加载与当前任务相关的文件。

常见模式

状态持久化：

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

鼠标跟踪：

const { x, y } = useMouse()

防抖 ref：

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

共享组合式函数（单例）：

const useSharedMouse = createSharedComposable(useMouse)

SSR 注意事项

许多 VueUse 组合式函数使用了 SSR 期间不可用的浏览器 API。

使用 isClient 检查：

import { isClient } from '@vueuse/core'

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

在 onMounted 中包装：

const width = ref(0)

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

使用兼容 SSR 的组合式函数：

// 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 会自动处理 SSR - 组合式函数在服务器上会返回安全的默认值。

目标元素引用

将组件引用作为目标而非 DOM 元素时：

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

或者直接访问 $el：

const compRef = ref<ComponentInstance>()

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

评论

支持 Markdown