npmpackage.info

Gathering detailed insights and metrics for @vueuse/motion

Other packages similar to @vueuse/motion

@vueuse/gesture

2.0.0

🕹 Vue Composables making your app interactive

vueuse-motion-nightly

3.0.3-29028006.c0efec2

🤹 Vue Composables putting your components in motion

hero-motion

0.5.3

A shared layout animations for vue like framer motion.

@douxcode/vue-spring-bottom-sheet

2.3.0

Modern and Performant Bottom Sheet for Vue.js

Gathering detailed insights and metrics for @vueuse/motion

@vueuse/motion - 3.0.3 | npmpackage.info

@vueuse/motion

🤹 Vue Composables putting your components in motion

3.0.3

2,624

MIT

TypeScript

22.72 kB

3.6

Installations

npm install @vueuse/motion

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.18.3

NPM Version

10.8.2 Score

80.5

Supply Chain

Quality

85.3

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

5

Total

98

Closed

20

Merged

73

Issues

Open

43

Total

159

Closed

116

Releases

v3.0.3

Updated on Mar 10, 2025

v3.0.2

Updated on Mar 10, 2025

v3.0.1

Updated on Mar 10, 2025

v3.0.0

Updated on Mar 10, 2025

v2.2.6

Updated on Oct 11, 2024

v2.2.5

Updated on Sep 06, 2024

View All 22 releases

Languages

TypeScript

Vue

Shell

CSS

HTML

JavaScript

TypeScript (90.25%)

Vue (7.33%)

Shell (0.85%)

CSS (0.77%)

HTML (0.48%)

JavaScript (0.34%)

Developer

vueuse

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2,624 Stars

971 Commits

93 Forks

14 Watchers

9 Branches

53 Contributors

Updated on May 29, 2025

Bundle Size

67.54 kB

Minified

22.72 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 53 Contributors

Package Meta Information

Latest Version

3.0.3

Package Id

@vueuse/motion@3.0.3

Unpacked Size

88.48 kB

Size

21.82 kB

File Count

NPM Version

10.8.2

Node Version

20.18.3

Published on

Mar 10, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Dependencies

@vueuse/core @vueuse/shared defu framesync popmotion style-value-types @nuxt/kit

Peer Dependencies

vue

Dev Dependencies

Optional Dependencies

@nuxt/kit

🤹 @vueuse/motion

Vue Composables putting your components in motion

🏎 Smooth animations based on Popmotion
🎮 Declarative API inspired by Framer Motion
🚀 Plug & play with 20+ presets
🌐 SSR Ready
🚚 First-class support for Nuxt 3
✨ Written in TypeScript
🏋️‍♀️ Lightweight with <20kb bundle size

🌍 Documentation

👀 Demos

Quick Start

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.

Nightly release channel

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

Credits

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.

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 1

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly-release.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/nightly-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly-release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/nightly-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/release.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/release.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yaml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/release.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yaml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/release.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/targets.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/targets.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/targets.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/vueuse/motion/targets.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:29
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:68
Warn: npmCommand not pinned by hash: .github/workflows/nightly-release.yml:32
Warn: npmCommand not pinned by hash: .github/workflows/release.yaml:28
Warn: npmCommand not pinned by hash: .github/workflows/targets.yml:29
Info: 2 out of 14 GitHub-owned GitHubAction dependencies pinned
Info: 1 out of 3 third-party GitHubAction dependencies pinned
Info: 0 out of 5 npmCommand dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.6

/10

Last Scanned on 2025-05-19

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

Other packages similar to @vueuse/motion

Other packages similar to @vueuse/motion

@vueuse/motion

Installations

Developer Guide

Yes

ESM

20.18.3

10.8.2

Score

Pull Requests

5

98

20

73

Issues

43

159

116

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

67.54 kB

22.72 kB

Maintainers

Package Meta Information

Total Downloads

NaN

Dependencies

Peer Dependencies

Dev Dependencies

Optional Dependencies

🤹 @vueuse/motion

Quick Start

Nightly release channel

Credits

10

10

10

10

1

1

0

0

0

0

0

0

0

3.6

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads