vueuse-motion-skilld
starsforks
How to install vueuse-motion-skilld?
skilld-dev/vue-ecosystem-skills/vueuse-motion-skilld
$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vueuse-motion-skilldVue Composables putting your components in motion. ALWAYS use when writing code importing \"@vueuse/motion\". Consult for debugging, best practices, or modifying @vueuse/motion, vueuse/motion, vueuse motion, motion.
SKILL.md
| 1 | # vueuse/motion `@vueuse/motion@3.0.3` |
| 2 | **Tags:** beta: 2.0.0-beta.29, latest: 3.0.3 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - BREAKING: ESM-only — `@vueuse/motion` v3.0.0 dropped CommonJS (CJS) support, the package is now ESM-only [source](./references/releases/v3.0.0.md) |
| 10 | |
| 11 | - NEW: VueUse v13 support — updated dependencies to support the latest VueUse features in v3.0.0 [source](./references/releases/v3.0.0.md) |
| 12 | |
| 13 | - NEW: `<Motion>` component — declarative component for animations, offering better SSR and MDC support since v2.2.0 [source](./references/releases/v2.2.0.md) |
| 14 | |
| 15 | - NEW: `<MotionGroup>` component — renderless component introduced in v2.2.0 to apply motion configurations to all child elements [source](./references/releases/v2.2.0.md) |
| 16 | |
| 17 | - NEW: `duration` and `delay` shorthand props — support for setting transition timing directly on elements/components since v2.2.0 [source](./references/releases/v2.2.0.md) |
| 18 | |
| 19 | - BREAKING: Drop Vue 2 support — v2.0.0 and above exclusively support Vue 3 [source](./references/releases/v2.0.0.md) |
| 20 | |
| 21 | - NEW: Full SSR support — significantly improved server-side rendering compatibility for both components and directives in v2.0.0 [source](./references/issues/issue-81.md) |
| 22 | |
| 23 | - NEW: kebab-case directive support — `v-motion-initial` and other directive variants now support kebab-case since v2.1.0 [source](./references/releases/v2.1.0.md) |
| 24 | |
| 25 | - NEW: `useMotionFeatures` export — this composable is now exported for manual feature registration since v2.2.6 [source](./references/releases/v2.2.6.md) |
| 26 | |
| 27 | - NEW: `useMotion` dynamic keys — support for dynamic variant keys when calling `.apply()` and other methods since v2.1.0 [source](./references/releases/v2.1.0.md) |
| 28 | |
| 29 | - NEW: `reactive-style` and `reactive-transform` — specialized composables for direct style and transform manipulation since v2.0.0 [source](./references/releases/v2.0.0.md) |
| 30 | |
| 31 | - NEW: `MotionPlugin` types — enhanced TypeScript definitions for the main Vue plugin in v2.2.5 [source](./references/releases/v2.2.5.md) |
| 32 | |
| 33 | - BREAKING: `onComplete` triggers — fixed in v2.2.0 to trigger after each property animation completes instead of only once [source](./references/releases/v2.2.0.md) |
| 34 | |
| 35 | - NEW: `unref` directive bindings — directives now unref initial bindings, supporting refs within objects since v2.0.0 [source](./references/releases/v2.0.0.md) |
| 36 | |
| 37 | **Also changed:** `visibilityOnce` variant new v2.0.0 · `useSpring` documentation update v2.2.0 · `preset` mutation fix v2.2.0 · `useMotions` dynamic keys v2.1.0 · `useMotionVariants` internal updates v2.0.0 |
| 38 | |
| 39 | ## Best Practices |
| 40 | |
| 41 | - Avoid deconstructing `useMotions()` at the top level of `setup` because properties are registered after the script execution; access them via the returned object within methods or hooks to ensure reactivity [source](./references/issues/issue-109.md) |
| 42 | |
| 43 | ```ts |
| 44 | // Preferred |
| 45 | const motions = useMotions() |
| 46 | const play = () => motions.myElement?.variant.value = 'play' |
| 47 | |
| 48 | // Avoid |
| 49 | const { myElement } = useMotions() |
| 50 | ``` |
| 51 | |
| 52 | - Use camelCase for visibility variants in Nuxt 3 templates (e.g., `visibleOnce`) rather than kebab-case (`visible-once`) to ensure proper directive resolution and avoid warnings [source](./references/issues/issue-108.md) |
| 53 | |
| 54 | - Prefer the `<Motion>` component over the `v-motion` directive for projects requiring robust SSR, as it handles initial state style injection more reliably for SEO and UX [source](./references/docs/content/2.features/7.components.md) |
| 55 | |
| 56 | - Define custom directives in the `MotionPlugin` configuration to create reusable animation presets that can be applied consistently via `v-motion-[name]` across the application [source](./references/docs/content/2.features/1.directive-usage.md) |
| 57 | |
| 58 | - Use `<MotionGroup>` to apply a single animation configuration or preset to multiple child elements, significantly reducing template boilerplate and improving maintainability [source](./references/docs/content/2.features/7.components.md) |
| 59 | |
| 60 | - Map the `leave` helper from the motion instance to the Vue `<transition>` element's `@leave` event to perform manual and synchronized exit animations on elements [source](./references/docs/content/2.features/5.variants.md) |
| 61 | |
| 62 | ```ts |
| 63 | const { leave } = useMotion(target, { leave: { opacity: 0 } }) |
| 64 | |
| 65 | // In template |
| 66 | // <transition @leave="(el, done) => leave(done)"> |
| 67 | ``` |
| 68 | |
| 69 | - Always specify an `initial` variant containing all properties that will be animated to prevent unexpected layout shifts and ensure smooth transitions from a known base state [source](./references/docs/content/2.features/5. |
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
