vue-pose

library0.5.1jsnpmunverified

Vue-pose is a declarative animation library specifically designed for Vue 2 applications, built upon the Popmotion animation engine. It offers a component-based approach to UI animation, allowing developers to define sophisticated motion sequences and state transitions directly within their Vue templates using components like `<Pose>` and `<PoseGroup>`. The library's current stable version, 0.5.1, was released over five years ago, indicating that it is no longer actively maintained or supported. Consequently, `vue-pose` is incompatible with Vue 3 and modern development practices, effectively rendering it an abandoned project within the contemporary Vue ecosystem. Its primary appeal was its ability to bring a powerful, state-driven animation paradigm to Vue 2, simplifying complex animation orchestrations compared to more imperative alternatives. Developers should exercise caution and consider modern, actively maintained libraries for new projects.

web-framework

npm install vue-pose

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-POSE

vue-pose

web-frameworkjavascriptv0.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Pose

✓ import { Pose } from 'vue-pose';

✗ const Pose = require('vue-pose');

Imports the main Pose component. CommonJS `require` syntax is generally incorrect for modern Vue component libraries and build setups.

PoseGroup

✓ import { PoseGroup } from 'vue-pose';

Imports the PoseGroup component, used for animating groups of elements (e.g., lists) with enter/exit transitions.

posed

✓ import posed from 'vue-pose/lib/posed';

Imports the `posed` Higher-Order Component (HOC) factory, used to create custom posable components. The path might vary depending on the bundler configuration.

Demonstrates a basic Vue component using `<Pose>` to animate a box between 'hidden' and 'visible' states based on a button click, defining poses and transitions directly on the component.

import Vue from 'vue'; import { Pose } from 'vue-pose'; interface AppData { boxState: 'hidden' | 'visible'; } export default Vue.extend({ name: 'AnimationExample', components: { Pose, }, data(): AppData { return { boxState: 'hidden', }; }, methods: { toggleState(): void { this.boxState = this.boxState === 'hidden' ? 'visible' : 'hidden'; }, }, template: ` <div> <button @click="toggleState">Toggle Animation</button> <Pose class="animated-box" :pose="boxState" :transition="{ duration: 500 }" :poses="{ hidden: { opacity: 0, scale: 0.5, y: 50 }, visible: { opacity: 1, scale: 1, y: 0 } }" > I am a posable box! </Pose> </div> `, style: ` .animated-box { width: 150px; height: 150px; background-color: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; font-family: sans-serif; margin-top: 20px; border-radius: 8px; } ` });

Debug

Known issues

breaking`vue-pose` is built exclusively for Vue 2 and is fundamentally incompatible with Vue 3 due to breaking changes in Vue's reactivity system and component lifecycle. Attempting to use it in a Vue 3 project will result in runtime errors and failed component rendering.

fix

`vue-pose` cannot be made compatible with Vue 3. For Vue 3 projects, consider modern animation libraries like Framer Motion (with a Vue wrapper), VueUse/motion, or GSAP.

affects: >=0.5.1

deprecatedThe library's last release was over five years ago (v0.5.1), indicating it is no longer actively maintained. This means no new features, bug fixes, or security patches, making it unsuitable for modern production applications.

fix

Migrate to actively maintained Vue 2 animation solutions (if still on Vue 2) or, preferably, upgrade to Vue 3 and use a modern, Vue 3-compatible animation library.

affects: >=0.5.1

gotchaUsing `v-if` with `<Pose>` components for exit animations often fails because `v-if` immediately removes the element from the DOM, preventing the exit transition from completing. This is a common pitfall in Vue's transition system.

fix

For animating items entering or leaving the DOM, it's recommended to use `<PoseGroup>` which is designed to manage children's mounted/unmounted state to allow exit animations. Alternatively, use `v-show` and manually control the 'exit' state via props before setting `v-show` to false.

affects: >=0.5.1

gotchaFor animations involving many elements or complex transformations, `vue-pose` might incur performance overhead, especially on less powerful devices. Without explicit browser hints, animations can cause reflows and repaints, leading to jank.

fix

Manually apply `will-change` CSS properties to the animated elements to hint browsers about upcoming transformations. For example, `will-change: opacity, transform;` to optimize rendering.

affects: >=0.5.1

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: Pose

The `Pose` component is not correctly registered with Vue or `vue-pose` is not properly imported/installed. This often happens if the component is used without adding it to the `components` option in your Vue component.

fix

Ensure `vue-pose` is installed (`npm install vue-pose`) and the `Pose` component is imported and registered in your Vue component's `components` option: `import { Pose } from 'vue-pose'; export default { components: { Pose } };`

TypeError: Cannot read properties of undefined (reading 'call')` or similar errors related to `this` context.

This error typically indicates a fundamental incompatibility between `vue-pose`'s internal mechanisms, which rely on Vue 2's API, and Vue 3's changed reactivity system and instance contexts.

fix

`vue-pose` is not compatible with Vue 3. There is no fix to make `vue-pose` work directly with Vue 3. Consider migrating to modern Vue 3-compatible animation libraries like Framer Motion, VueUse/motion, or GSAP.

Animation on element with key '...' failed. No pose named '...' was found.

The `pose` prop supplied to the `<Pose>` component refers to a state name (e.g., 'visible', 'hidden') that has not been defined in the `poses` prop of the component.

fix

Ensure that the string value passed to the `:pose` prop (e.g., `'active'`) exactly matches one of the keys defined in the `:poses` object prop of your `<Pose>` component, for example: `:poses="{ active: { opacity: 1 }, inactive: { opacity: 0 } }"`.

Upgrade

Version history

0.5.1latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency for all `vue-pose` components to function.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Popmotion/popmotion ↗

packagehttps://www.npmjs.com/package/vue-pose ↗