how to use @vueuse/motion in typescript

To use @vueuse/motion with TypeScript follow these steps:

  1. Install the package using npm or yarn:
index.ts
npm install @vueuse/motion
27 chars
2 lines
index.ts
yarn add @vueuse/motion
24 chars
2 lines
  1. Import the required libraries:
index.ts
import {  defineComponent, reactive, ref } from 'vue';  
import { motion, useMotionProperties } from '@vueuse/motion'; 
120 chars
3 lines
  1. Define the motion properties:
index.ts
const motionProperties = useMotionProperties({
    x: 0,
    y: 0,
    scale: 1,
    rotate: 0,
});
100 chars
7 lines
  1. Define your component using the defineComponent method:
index.ts
export default defineComponent({
  name: 'MyComponent',
  setup() {
    const motionProperties = useMotionProperties({
      x: 0,
      y: 0,
      scale: 1,
      rotate: 0,
    });
    
    return {
      motionProperties,
    }
  },
})
240 chars
16 lines
  1. Use the motion properties in your template:
index.ts
<template>
 <div>
   <motion.div :style="motionProperties">
     My animated content
   </motion.div>
 </div>
</template>
122 chars
8 lines

Finally, make sure to install the TypeScript types for @vueuse/motion with:

index.ts
npm install -D @types/@vueuse/motion
37 chars
2 lines

Or

index.ts
yarn add -D @types/@vueuse/motion
34 chars
2 lines

gistlibby LogSnag