Install @vueuse/motion using your package manager of choice.

pnpm 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)



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:

pnpm 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

Vite SSG

You are concerned if you are using frameworks based on Vite SSG, such as Vitesse or VitePress.

If you are using directives within these frameworks, an error might occur during build, saying directives does not support transform.

To solve that problem, you have to install this package inside your app.

pnpm add -D patch-vue-directive-ssr

This patch has been written by Antfu.