vueuse-components-skilld
starsforks
How to install vueuse-components-skilld?
skilld-dev/vue-ecosystem-skills/vueuse-components-skilld
$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vueuse-components-skilldRenderless components for VueUse. ALWAYS use when writing code importing \"@vueuse/components\". Consult for debugging, best practices, or modifying @vueuse/components, vueuse/components, vueuse components, vueuse.
SKILL.md
| 1 | # vueuse/vueuse `@vueuse/components@14.3.0` |
| 2 | **Tags:** next: 5.0.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes for `@vueuse/components` — prioritize recent major/minor releases. |
| 8 | |
| 9 | - BREAKING: `@vueuse/components` v14+ requires Vue 3.5+, following core library requirements [source](./references/releases/v14.0.0.md) |
| 10 | |
| 11 | - BREAKING: Renderless components refactored for consistency in v14.0.0. Components like `OnClickOutside` and `OnLongPress` now use an `options` prop for configuration and `@trigger` emit for actions [source](./references/releases/v14.0.0.md) |
| 12 | |
| 13 | - BREAKING: ESM-only package — CJS build has been dropped since v13.0.0 [source](./references/releases/v13.0.0.md) |
| 14 | |
| 15 | - DEPRECATED: `VOnClickOutside` is deprecated in favor of the lowercase `vOnClickOutside` directive [source](./references/releases/v14.0.0.md) |
| 16 | |
| 17 | - DEPRECATED: `VOnLongPress` is deprecated in favor of the lowercase `vOnLongPress` directive [source](./references/releases/v14.0.0.md) |
| 18 | |
| 19 | - NEW: `UseDraggable` supports `autoScroll` and `restrictInView` options for constrained dragging in v14.2.0 [source](./references/releases/v14.2.0.md) |
| 20 | |
| 21 | - NEW: `UseDraggable` supports `storageKey` and `storageType` props for persistent element position [source](./references/docs/useDraggable.md) |
| 22 | |
| 23 | - NEW: `vOnKeyStroke` directive added for listening to keyboard events directly on elements |
| 24 | |
| 25 | - NEW: `UseIdle` default slot data now includes `pause` and `resume` methods via `Stoppable` implementation [source](./references/releases/v14.0.0.md) |
| 26 | |
| 27 | - NEW: `vInfiniteScroll` supports reactive `canLoadMore` option in v14.1.0 [source](./references/releases/v14.1.0.md) |
| 28 | |
| 29 | - NEW: `UseElementVisibility` added `initialValue` option in v14.1.0 [source](./references/releases/v14.1.0.md) |
| 30 | |
| 31 | - NEW: `UseMouseInElement` supports tracking inline-level elements in v14.1.0 [source](./references/releases/v14.1.0.md) |
| 32 | |
| 33 | - NEW: `vIntersectionObserver` now supports reactive `rootMargin` option in v14.2.0 [source](./references/releases/v14.2.0.md) |
| 34 | |
| 35 | - NEW: `UseOffsetPagination` emits `page-change`, `page-size-change`, and `page-count-change` events |
| 36 | |
| 37 | **Also changed:** `useTransition` custom interpolators · `refManualReset` new function · `tryOnScopeDispose` failSilently · `useAsyncState` execute result · `useTimeAgoIntl` custom units |
| 38 | |
| 39 | ## Best Practices |
| 40 | |
| 41 | - Use the `storage-key` and `storage-type` props on the `<UseDraggable>` component to automatically persist element position in `localStorage` or `sessionStorage` across sessions [source](./references/docs/useDraggable.md) |
| 42 | |
| 43 | - Utilize the `ignore` option in `OnClickOutside` (component or directive) to pass an array of refs or CSS selectors for elements that should not trigger the handler, essential for complex UIs like nested modals [source](./references/docs/onClickOutside.md) |
| 44 | |
| 45 | - Always provide `#loading` and `#error` slots in `<UseImage>` to prevent layout shifts and handle broken images gracefully, rather than managing loading states manually in the script [source](./references/docs/useImage.md) |
| 46 | |
| 47 | - Prefer `createReusableTemplate` over extracting small, repeated UI fragments into separate files to maintain access to local scope variables and avoid tedious prop/emit definitions [source](./references/docs/createReusableTemplate.md) |
| 48 | |
| 49 | - Provide a generic type to `createReusableTemplate<T>()` to enable full TypeScript support and IDE autocompletion for data passed between `DefineTemplate` and `ReuseTemplate` [source](./references/docs/createReusableTemplate.md) |
| 50 | |
| 51 | - Use `createTemplatePromise` to call complex UI elements like modals or dialogs as promises, keeping the UI definition in the template while maintaining programmatic control and clean async/await flows [source](./references/docs/createTemplatePromise.md) |
| 52 | |
| 53 | - Configure `@vueuse/components` directives like `v-on-click-outside` or `v-on-long-press` using the `[handler, options]` array syntax for clean, inline logic without needing a separate setup variable for options [source](./references/docs/onClickOutside.md) |
| 54 | |
| 55 | ```vue |
| 56 | <div v-if="modal" v-on-click-outside="[closeModal, { ignore: [ignoreElRef] }]"> |
| 57 | Hello World |
| 58 | </div> |
| 59 | ``` |
| 60 | |
| 61 | - Use the `<UseOffsetPagination>` component to handle complex pagination state; it emits clean events (`page-change`, `page-size-change`) that are more idiomatic and easier to wire up in templates than manually watching refs [source](./references/docs/useOffsetPagination.md) |
| 62 | |
| 63 | - Set `detectIframe: true` in `onClickOutside` options when building global navigation or modals to ensure they close when the user clicks insid |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
