{"id":11362,"library":"motion-plus-vue","title":"Motion Plus Vue Components","description":"Motion Plus Vue (current stable version 1.8.1) is a Vue 3 component library that extends the capabilities of the core `motion-v` animation engine. It primarily focuses on providing specialized, high-performance animation components, such as `AnimateNumber`, for modern Vue applications. While `motion-v` (version 2.x, the official 'Motion for Vue' library) offers general-purpose animation primitives like the `<motion>` component and `v-motion` directive, `motion-plus-vue` provides ready-to-use, often complex, UI animation patterns building upon `motion-v`. Its release cadence is not explicitly stated, but the version number indicates active maintenance. A key differentiator is its focus on specific, advanced animation components that are part of the broader 'Motion Plus' ecosystem, leveraging the underlying `motion-v` for hardware-accelerated and smooth user interfaces.","status":"active","version":"1.8.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","ui","vue","typescript"],"install":[{"cmd":"npm install motion-plus-vue","lang":"bash","label":"npm"},{"cmd":"yarn add motion-plus-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add motion-plus-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core animation engine for Vue, provides underlying animation primitives. Required as a peer dependency.","package":"motion-v","optional":false},{"reason":"Required Vue 3 framework as a peer dependency.","package":"vue","optional":false}],"imports":[{"note":"AnimateNumber is a named export for a Vue component, typically used directly in a Vue Single File Component (SFC).","wrong":"import AnimateNumber from 'motion-plus-vue'","symbol":"AnimateNumber","correct":"import { AnimateNumber } from 'motion-plus-vue'"},{"note":"The global MotionPlugin for registering directives like `v-motion` comes from the core `motion-v` package, not `motion-plus-vue`. Install `motion-v` separately and import from it for global setup.","wrong":"import { MotionPlugin } from 'motion-plus-vue'","symbol":"MotionPlugin","correct":"import { MotionPlugin } from 'motion-v'"},{"note":"The `v-motion` directive for declarative animations is provided by the core `motion-v` package.","wrong":"import { vMotion } from 'motion-plus-vue'","symbol":"v-motion","correct":"import { vMotion } from 'motion-v'"}],"quickstart":{"code":"<!-- App.vue -->\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n// AnimateNumber is typically imported directly from motion-plus-vue\nimport { AnimateNumber } from 'motion-plus-vue';\n\nconst count = ref(0);\n\nconst increment = () => {\n  count.value++;\n};\n\nconst decrement = () => {\n  if (count.value > 0) {\n    count.value--;\n  }\n};\n</script>\n\n<template>\n  <div class=\"container\">\n    <h1>Current Value: <AnimateNumber>{{ count }}</AnimateNumber></h1>\n    <div class=\"controls\">\n      <button @click=\"increment\">Increment</button>\n      <button @click=\"decrement\">Decrement</button>\n    </div>\n    <p>\n      This example demonstrates the <code>&lt;AnimateNumber&gt;</code> component from <code>motion-plus-vue</code>.\n      It animates the numeric value smoothly when the underlying `count` ref changes.\n      The component internally leverages the <code>motion-v</code> animation engine for its effects.\n    </p>\n  </div>\n</template>\n\n<style scoped>\n.container {\n  font-family: sans-serif;\n  text-align: center;\n  padding: 20px;\n  border: 1px solid #eee;\n  border-radius: 8px;\n  max-width: 400px;\n  margin: 50px auto;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\nh1 {\n  margin-bottom: 20px;\n  color: #333;\n}\n.controls button {\n  background-color: #42b983;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  margin: 0 10px;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 16px;\n  transition: background-color 0.3s ease;\n}\n.controls button:hover {\n  background-color: #368d6f;\n}\n.controls button:active {\n  background-color: #2b745a;\n}\np {\n  margin-top: 30px;\n  font-size: 0.9em;\n  color: #666;\n  line-height: 1.5;\n}\n</style>","lang":"typescript","description":"Shows a basic usage of the `<AnimateNumber>` component to display and animate a changing numeric value within a Vue 3 application."},"warnings":[{"fix":"Ensure your project uses Vue 3 (>=3.0.0). Upgrade your Vue project or find an alternative library compatible with Vue 2.","message":"This package is strictly built for Vue 3. Using it with Vue 2.x will result in runtime errors due to fundamental API changes.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Install or upgrade 'motion-v' to a compatible version: `npm install motion-v@^2.0.0` or `yarn add motion-v@^2.0.0`.","message":"Requires 'motion-v' version 2.0.0 or higher as a peer dependency. Older versions of 'motion-v' will not provide the necessary APIs, leading to runtime failures.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Verify licensing requirements for `AnimateNumber` and any other 'Motion Plus' features you intend to use. You might need to purchase a Motion+ membership and install `motion-plus` with a private token.","message":"The `AnimateNumber` component, prominently featured by `motion-plus-vue`, is noted in `motion.dev` documentation as an 'exclusive to Motion+ members' feature. This may imply a requirement for a `motion-plus` package and a private token for installation or usage.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Implement SSR-safe practices. For Nuxt, wrap components in `<client-only>`. For other SSR frameworks, use dynamic imports (`import('...')`) to load animation components only on the client.","message":"Animation libraries can sometimes cause issues with Server-Side Rendering (SSR) if not handled correctly. Ensure client-side-only animations are properly guarded (e.g., using `client-only` component in Nuxt or dynamic imports).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Utilize performance optimization techniques: use CSS transforms where possible, debounce/throttle updates, and leverage Motion's performance features like 'willChange' properties.","message":"Performance can be impacted if complex animations are applied to a large number of elements or frequently updated. Monitor frame rates and optimize animations.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import { AnimateNumber } from 'motion-plus-vue'` in your script setup or component options, and that `motion-plus-vue` is correctly installed.","cause":"The AnimateNumber component was not correctly imported or registered in your Vue application.","error":"Failed to resolve component: AnimateNumber"},{"fix":"Run `npm install motion-v@^2.0.0` or `yarn add motion-v@^2.0.0` to install the correct peer dependency.","cause":"The required peer dependency 'motion-v' at version 2.x is missing or an incompatible version is installed.","error":"Peer dependency 'motion-v@^2.0.0' not installed or not met"},{"fix":"Ensure you are importing and using `MotionPlugin` correctly from `motion-v` if you intend to register global directives. Components from `motion-plus-vue` are typically imported and used directly in templates.","cause":"Attempting to use `app.use()` with a non-plugin or an incorrectly imported plugin. The core `MotionPlugin` comes from `motion-v`, not `motion-plus-vue` directly.","error":"TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Ensure 'motion-plus-vue' is installed (`npm install motion-plus-vue`) and your `tsconfig.json` correctly includes `\"allowSyntheticDefaultImports\": true` and `\"esModuleInterop\": true` if you are using default imports, though named imports are preferred for this library.","cause":"TypeScript compiler cannot locate the package or its type definitions, or the package is not installed.","error":"TS2307: Cannot find module 'motion-plus-vue' or its corresponding type declarations."}],"ecosystem":"npm"}