Gathering detailed insights and metrics for @vueuse/motion
Gathering detailed insights and metrics for @vueuse/motion
Gathering detailed insights and metrics for @vueuse/motion
Gathering detailed insights and metrics for @vueuse/motion
@vueuse/gesture
🕹 Vue Composables making your app interactive
vueuse-motion-nightly
🤹 Vue Composables putting your components in motion
hero-motion
A shared layout animations for vue like framer motion.
@douxcode/vue-spring-bottom-sheet
Modern and Performant Bottom Sheet for Vue.js
🤹 Vue Composables putting your components in motion
npm install @vueuse/motion
Typescript
Module System
Node Version
NPM Version
80.6
Supply Chain
88.9
Quality
85.3
Maintenance
100
Vulnerability
98.9
License
TypeScript (90.25%)
Vue (7.33%)
Shell (0.85%)
CSS (0.77%)
HTML (0.48%)
JavaScript (0.34%)
Total Downloads
2,775,118
Last Day
2,183
Last Week
40,417
Last Month
173,444
Last Year
1,514,877
MIT License
2,634 Stars
971 Commits
94 Forks
14 Watchers
9 Branches
53 Contributors
Updated on Jul 06, 2025
Minified
Minified + Gzipped
Latest Version
3.0.3
Package Id
@vueuse/motion@3.0.3
Unpacked Size
88.48 kB
Size
21.82 kB
File Count
16
NPM Version
10.8.2
Node Version
20.18.3
Published on
Mar 10, 2025
Cumulative downloads
Total Downloads
Last Day
-11.2%
2,183
Compared to previous day
Last Week
-7.2%
40,417
Compared to previous week
Last Month
4.4%
173,444
Compared to previous month
Last Year
125.9%
1,514,877
Compared to previous year
1
22
1
Vue Composables putting your components in motion
Let's get started by installing the package and adding the plugin.
From your terminal:
1npm install @vueuse/motion
In your Vue app entry file:
1import { createApp } from 'vue' 2import { MotionPlugin } from '@vueuse/motion' 3import App from './App.vue' 4 5const app = createApp(App) 6 7app.use(MotionPlugin) 8 9app.mount('#app')
You can now animate any of your component, HTML or SVG elements using v-motion
.
1<template> 2 <div 3 v-motion 4 :initial="{ 5 opacity: 0, 6 y: 100, 7 }" 8 :enter="{ 9 opacity: 1, 10 y: 0, 11 }" 12 /> 13</template>
To see more about how to use directives, check out Directive Usage.
To see more about what properties you can animate, check out Motion Properties.
To see more about how to create your own animation styles, check out Transition Properties.
To see more about what are variants and how you can use them, check out Variants.
To see more about how to control your declared variants, check out Motion Instance.
You can try out the latest changes before a stable release by installing the nightly release channel.
1npm install @vueuse/motion@npm:vueuse-motion-nightly
This package is heavily inspired by Framer Motion by @mattgperry.
If you are interested in using WAAPI, check out Motion.dev!
I would also like to thank antfu, patak-dev and kazupon for their kind help!
If you like this package, consider following me on GitHub and on Twitter.
👋
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 2/17 approved changesets -- score normalized to 1
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
20 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More