Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
Detected risks:
The useManualRefHistory skill provides manual change tracking for Vue.js reactive references, allowing developers to record state snapshots only when explicitly committed. Unlike automatic history tracking, this composable gives precise control over when history points are captured by requiring a manual commit() call after state changes. This approach is ideal for scenarios where you want to track only meaningful state transitions rather than every mutation.
The skill offers comprehensive history management with undo and redo functionality, flexible cloning strategies for mutable objects, and configurable capacity limits. It supports custom serialization through dump and parse functions, enabling use cases like persisting history to local storage. The history is stored as an array of records containing snapshots and timestamps, with the newest entries appearing first.
This composable is particularly valuable for developers building Vue.js applications that require user-facing undo/redo features, such as form editors, drawing applications, configuration tools, or any interface where users need to revert changes. It's also useful for debugging complex state mutations, implementing draft/autosave systems, or creating audit trails for data modifications.
Use useManualRefHistory when you want explicit control over when history snapshots are recorded. This is ideal when state changes frequently but you only want to track meaningful transitions, or when you need to batch multiple changes into a single history point.
For mutable objects, you must provide a clone function to create deep copies of snapshots. You can use the clone: true shortcut for basic cloning via JSON serialization, or pass custom clone functions like structuredClone, lodash's cloneDeep, or klona for more complex scenarios.
When the capacity option is set and the limit is reached, the oldest history records are automatically removed as new ones are added. By default, capacity is unlimited and all history is retained until explicitly cleared using the clear() method.
Yes, you can provide custom dump and parse functions to control serialization. This is useful for stringifying snapshots for local storage, or avoiding extra cloning when history values don't need to be objects.
This is part of the VueUse library and works with Vue 3.x applications. It requires reactive references created with ref() or shallowRef() from Vue's composition API.
Quick Setup:
.claude/skills/Repository
vueuse/skills