重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
vueuse-integrations-skilld by harlan-zw/vue-ecosystem-skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill vueuse-integrations-skilld@vueuse/integrations实用工具库的集成封装
版本: 14.2.1 依赖: @vueuse/core@14.2.1, @vueuse/shared@14.2.1 标签: next: 5.0.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1, latest: 14.2.1
参考: GitHub Issues — 错误、变通方案、边界情况 • GitHub Discussions — 问答、模式、示例 • Releases — 更新日志、破坏性变更、新 API
本节记录特定版本的 API 变更 — 请优先关注近期的主要/次要版本发布。
破坏性变更: 需要 Vue 3.5+ — v14.x 现在要求 Vue 3.5.0 作为对等依赖项,以支持像 useTemplateRef 这样的原生功能
破坏性变更: 仅支持 ESM — v13.0.0 中移除了 CommonJS (CJS) 构建,现在是一个仅支持 ESM 的包 来源
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
破坏性变更: focus-trap 依赖 — useFocusTrap 在 v14.2.0 中将对等依赖范围更新为 ^7 || ^8 来源
破坏性变更: universal-cookie 依赖 — useCookies 现在支持并优先使用 universal-cookie ^7 || ^8
破坏性变更: change-case v5 — useChangeCase 现在与 change-case v5 兼容,包括内部命名变更
已弃用: 别名导出 — v14.0.0 弃用了别名导出,转而使用原始函数名称以保持一致性 来源
新增: watchElement 选项 — useSortable 在 v14.2.0 中添加了 watchElement,以便在目标元素更改时自动重新初始化 来源
新增: updateContainerElements — useFocusTrap 在 v13.6.0 中暴露了 updateContainerElements,用于动态容器更新 来源
新增: serializer 选项 — useIDBKeyval 在 v13.6.0 中添加了 options.serializer,用于自定义数据序列化 来源
新增: 组件引用支持 — useSortable 自 v13.1.0 起可以接受 Vue 组件实例/引用作为目标元素 来源
新增: 可等待的 useAxios — useAxios 的返回值现在是可等待的,允许在异步上下文中使用 await useAxios(...) 来源
新增: 灵活的 execute — useAxios 的 execute() 现在可以单独接收 url 或 config,用于手动触发 来源
新增: initialData 选项 — useAxios 添加了 initialData,用于在请求完成前提供默认值 来源
新增: 辅助函数 — moveArrayElement、insertNodeAt 和 removeNode 现在从 useSortable 中导出 来源
其他变更: useAsyncValidator 内部类型 · useJwt 选项优化 · useNProgress 响应式状态一致性 · useSortable 类型对齐修复 来源
从子模块导入函数,以最大化 tree-shaking 效率并减少最终打包体积 来源
// 推荐 import { useAxios } from '@vueuse/integrations/useAxios'
// 避免 import { useAxios } from '@vueuse/integrations'
对于一次性请求,直接等待 useAxios(),因为其返回值是可等待的,这简化了 Promise 处理 来源
const { data, error } = await useAxios('/api/posts')
在 useAxios 选项中启用 resetOnExecute: true,以便在触发新请求时自动清除陈旧数据 来源
const { execute } = useAxios('/api/data', { method: 'GET' }, { resetOnExecute: true })
在 Nuxt 3 环境中显式导入 useCookies,以避免与 Nuxt 内置的 useCookie 组合式函数发生名称冲突 来源
import { useCookies } from '@vueuse/integrations/useCookies'
将 useCookies 与 autoUpdateDependencies: true 一起使用,以自动跟踪和更新通过 .get() 访问的任何 cookie 名称的依赖项 来源
const { get } = useCookies(['initial'], { autoUpdateDependencies: true })
在 useSortable 中启用 watchElement: true 选项,以便在目标元素更改时(例如使用 v-if)自动重新初始化实例 来源
useSortable(el, list, { watchElement: true })
在 useSortable 中调用 moveArrayElement 后,将更新后的逻辑包装在 nextTick() 中,以确保 DOM 更新已完全完成 来源
useSortable(el, list, { onUpdate: (e) => { moveArrayElement(list, e.oldIndex, e.newIndex) nextTick(() => { /* 执行移动后的逻辑 */ }) } })
在处理条件渲染(v-if)的元素时,在调用 useFocusTrap 的 activate() 之前使用 nextTick(),以确保元素已存在于 DOM 中 来源
async function openModal() { show.value = true await nextTick() activate() }
对于在挂载时自动激活和在卸载时自动清理的场景,优先使用 UseFocusTrap 组件而非手动组合式函数 来源
等待 useIDBKeyval 返回的 .set() 方法,以确保 IndexedDB 事务在继续之前已完全提交 来源
const count = useIDBKeyval('my-count', 0) await count.set(10)
每周安装量
64
仓库
GitHub 星标数
147
首次出现
2026年2月19日
安全审计
安装于
github-copilot48
opencode44
gemini-cli43
claude-code43
codex43
kimi-cli42
@vueuse/integrationsIntegration wrappers for utility libraries
Version: 14.2.1 Deps: @vueuse/core@14.2.1, @vueuse/shared@14.2.1 Tags: next: 5.0.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1, latest: 14.2.1
References: GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs
This section documents version-specific API changes — prioritize recent major/minor releases.
BREAKING: Requires Vue 3.5+ — v14.x now requires Vue 3.5.0 as a peer dependency for native features like useTemplateRef
BREAKING: ESM-only — dropped CommonJS (CJS) build in v13.0.0, now an ESM-only package source
BREAKING: focus-trap dependency — useFocusTrap updated peer dependency range to ^7 || ^8 in v14.2.0 source
BREAKING: universal-cookie dependency — useCookies now supports and prefers universal-cookie ^7 || ^8
BREAKING: change-case v5 — useChangeCase is now compatible with change-case v5, including internal naming changes
DEPRECATED: Alias exports — v14.0.0 deprecated alias exports in favor of original function names for consistency source
NEW: watchElement option — useSortable added watchElement in v14.2.0 to auto-reinitialize when target element changes source
NEW: updateContainerElements — useFocusTrap exposed updateContainerElements in v13.6.0 for dynamic container updates source
NEW: serializer option — useIDBKeyval added options.serializer in v13.6.0 for custom data serialization source
NEW: Component Ref support — useSortable can now accept a Vue component instance/ref as the target element since v13.1.0 source
NEW: Thenable useAxios — useAxios returns are now thenable, allowing await useAxios(...) in async contexts source
NEW: Flexible execute — useAxios execute() can now take url or config separately for manual triggers source
NEW: initialData option — useAxios added initialData to provide a default value before the request finishes source
NEW: Helper functions — moveArrayElement, insertNodeAt, and removeNode are now exported from useSortable source
Also changed: useAsyncValidator internal types · useJwt options refinement · useNProgress reactive state consistency · useSortable type misalignment fix source
Import functions from submodules to maximize tree-shaking efficiency and reduce the final bundle size source
// Preferred import { useAxios } from '@vueuse/integrations/useAxios'
// Avoid import { useAxios } from '@vueuse/integrations'
Await useAxios() directly for one-off requests as the return value is thenable, simplifying promise handling source
const { data, error } = await useAxios('/api/posts')
Enable resetOnExecute: true in useAxios options to clear stale data automatically when a new request is triggered source
const { execute } = useAxios('/api/data', { method: 'GET' }, { resetOnExecute: true })
Explicitly import useCookies in Nuxt 3 environments to avoid name collisions with Nuxt's built-in useCookie composable
Weekly Installs
64
Repository
GitHub Stars
147
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot48
opencode44
gemini-cli43
claude-code43
codex43
kimi-cli42
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装
使用 Vercel Geist 设计系统创建 Remotion 视频 - 深色主题动画制作指南
275 周安装
Seedance 2.0 视频提示词生成器 | AI视频生成 | 字节跳动即梦平台多模态创作工具
282 周安装
Diataxis框架指南:四种技术文档类型教程/操作指南/参考/说明编写方法
277 周安装
Disk Cleaner 智能磁盘清理工具 - 跨平台兼容、安全高效、渐进式扫描
280 周安装
视频摘要生成器 - 一键下载1800+平台视频并生成字幕、转录稿和摘要
276 周安装
Prisma ORM 中文指南:类型安全数据库工具包,TypeScript 开发必备
282 周安装
import { useCookies } from '@vueuse/integrations/useCookies'
Use autoUpdateDependencies: true with useCookies to automatically track and update dependencies for any cookie names accessed via .get() source
const { get } = useCookies(['initial'], { autoUpdateDependencies: true })
Enable the watchElement: true option in useSortable to automatically reinitialize the instance when the target element changes (e.g., with v-if) source
useSortable(el, list, { watchElement: true })
Wrap post-update logic in nextTick() after calling moveArrayElement in useSortable to ensure the DOM update has fully finished source
useSortable(el, list, { onUpdate: (e) => { moveArrayElement(list, e.oldIndex, e.newIndex) nextTick(() => { /* perform post-move logic */ }) } })
Use nextTick() before calling activate() in useFocusTrap when dealing with conditionally rendered (v-if) elements to ensure they exist in the DOM source
async function openModal() { show.value = true await nextTick() activate() }
Prefer the UseFocusTrap component over the manual composable for automatic activation on mount and cleanup on unmount source
Await the .set() method returned by useIDBKeyval to ensure that the IndexedDB transaction is fully committed before proceeding source
const count = useIDBKeyval('my-count', 0) await count.set(10)