vueuse-components-skilld
Installation
SKILL.md
@vueuse/components 15.0.0
Renderless component and directive wrappers around @vueuse/core composables. 46 components, 14 directives, 2 deprecated directive aliases (dist/index.js:1237).
Facts (all citations are paths inside the prepared @vueuse/components package):
- Version 15.0.0 (package.json:4); depends on
@vueuse/core15.0.0 and@vueuse/shared15.0.0 (package.json:43-44) - Peer dependency:
vue^3.5.0(package.json:40) - Node.js
>=22(package.json:37); Node 20 support was dropped in v15 - ESM-only (
"type": "module", package.json:3); no CJS build sideEffects: false, tree-shakeable (package.json:22); IIFE bundle exposed for CDN viaunpkg/jsdelivr(package.json:30-31)- Install:
npm i @vueuse/components @vueuse/core(README.md:10, https://vueuse.org/guide/components)
How the components work
Two families, decided by what they render (verified in dist/index.js):
- Pure renderless: no DOM of their own, render only the default slot, scoped slot receives the reactive composable return. Example
UseMouse(dist/index.js:805-809). - Element wrapper: render one element (
props.as || "div") whose ref feeds the composable, slot content becomes children. The element is the composable's target. ExampleUseElementBounding(dist/index.js:340-345).