Merge branch 'main' of github.com:Tahul/vue-use-motion

README.md

@@ -61,15 +61,15 @@ You can now **animate** any of your **component**, **HTML** or **SVG** elements
 </template>
 ```
 
-To see more about how to use **directives**, check out [**Directive Usage**](https://motion.vueuse.js.org/directive-usage).
+To see more about how to use **directives**, check out [**Directive Usage**](https://motion.vueuse.org/directive-usage).
 
-To see more about what **properties** you can **animate**, check out [**Motion Properties**](https://motion.vueuse.js.org/motion-properties).
+To see more about what **properties** you can **animate**, check out [**Motion Properties**](https://motion.vueuse.org/motion-properties).
 
-To see more about how to **create** your own **animations** styles, check out [**Transition Properties**](https://motion.vueuse.js.org/transition-properties).
+To see more about how to **create** your own **animations** styles, check out [**Transition Properties**](https://motion.vueuse.org/transition-properties).
 
-To see more about what are **variants** and how you can **use** them, check out [**Variants**](https://motion.vueuse.js.org/variants).
+To see more about what are **variants** and how you can **use** them, check out [**Variants**](https://motion.vueuse.org/variants).
 
-To see more about how to **control** your declared **variants**, check out [**Motion Instance**](https://motion.vueuse.js.org/motion-instance).
+To see more about how to **control** your declared **variants**, check out [**Motion Instance**](https://motion.vueuse.org/motion-instance).
 
 ## Credits
 

docs/api/use-motion-controls.md

@@ -54,7 +54,7 @@ const { apply, stopTransitions } = useMotionControls(motionProperties, {
   },
   custom: {
     y: 0,
-    opacty: 1,
+    opacity: 1,
   },
 })
 

docs/transition-properties.md

@@ -83,6 +83,26 @@ The opposite of stiffness. The lower it is relative to sitffness, the bouncier t
 
 The mass of the object, heavier objects will take longer to speed up and slow down.
 
+```vue
+<div
+  v-motion
+  :initial="{
+    y: 100,
+    opacity: 0,
+  }"
+  :enter="{
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: 'spring',
+      stiffness: 250,
+      damping: 25,
+      mass: 0.5,
+    },
+  }"
+/>
+```
+
 ### Keyframes
 
 Keyframes ared used mainly for color related animations as springs are not designed for that.
@@ -115,6 +135,26 @@ Supported easing names:
 - **backIn**, **backOut**, **backInOut**
 - **anticipate**
 
+
+```vue
+<div
+  v-motion
+  :initial="{
+    y: 100,
+    opacity: 0,
+  }"
+  :enter="{
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 300,
+      type: 'keyframes',
+      ease: 'easeIn',
+    },
+  }"
+/>
+```
+
 ## Per-key transition definition
 
 Transition properties supports per-key transition definition.

package.json

@@ -22,7 +22,10 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
     "./nuxt": {
       "import": "./dist/nuxt.mjs",
       "require": "./dist/nuxt.cjs"

src/nuxt/module.ts

@@ -10,7 +10,7 @@ export default defineNuxtModule<ModuleOptions>({
     name: '@vueuse/motion',
     configKey: CONFIG_KEY,
     compatibility: {
-      nuxt: '>=3.0.0',
+      nuxt: '^3.0.0-rc.3',
       bridge: true,
     },
   },