Installation
Install @vueuse/motion
using your package manager of choice.
yarn add @vueuse/motion
Please note that if you are using Vue 2 or Nuxt, you need to install the Composition API.
The required packages can be found here for Vue 2, and here for Nuxt.
Plugin Installation
If you are planning on using the directives (v-motion
) from this package, you might want to add the plugin to your Vue instance.
Global Installation
You can add the support for v-motion
globally, by installing the plugin.
import { MotionPlugin } from '@vueuse/motion'
const app = createApp(App)
app.use(MotionPlugin)
app.mount('#app')
Component Installation
If you want to import the directive code only from components that uses it, import the directive and install it at component level.
import { directive as motion } from '@vueuse/motion'
export default {
directives: {
motion: motion(),
},
}
Nuxt Module
If you are using Nuxt, this package has a specific implementation that makes the declaration of custom directives even easier.
It is called nuxt-use-motion.
You must have @nuxtjs/composition-api setup in your project in order to make this work.
Once you installed it, just add nuxt-use-motion
to your project:
yarn add nuxt-use-motion
Add nuxt-use-motion
to the modules
section of nuxt.config.js
:
{
// nuxt.config.js
modules: ['nuxt-use-motion']
}
Then, configure your animations 🤹:
{
// nuxt.config.js
motions: {
directives: {
'pop-bottom': {
initial: {
scale: 0,
opacity: 0,
y: 100
},
visible: {
scale: 1,
opacity: 1,
y: 0
},
}
}
}
}