{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install motion-plus-vue"],"cli":null},"imports":["import { AnimateNumber } from 'motion-plus-vue'","import { MotionPlugin } from 'motion-v'","import { vMotion } from 'motion-v'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}