Nuxt Usage

If you are using Nuxt, this package has a specific implementation that makes the declaration of custom directives even easier.

It is shipped with @vueuse/motion and is importable via @vueuse/motion/nuxt.

It should work with nuxt3 and @nuxt/bridge.

Installation

Add @vueuse/motion/nuxt to the modules section of nuxt.config.js:

{
  // nuxt.config.js
  modules: ['@vueuse/motion/nuxt']
}

Then, configure your animations 🤹:

{
  // nuxt.config.js
  motion: {
    directives: {
      'pop-bottom': {
        initial: {
          scale: 0,
          opacity: 0,
          y: 100
        },
        visible: {
          scale: 1,
          opacity: 1,
          y: 0
        },
      }
    }
  }
}

SSR Support

@vueuse/motion supports SSR via both directives and <Motion /> component.

SSR support for animations mainly consists in resolving initial variant from your component bindings.

Once resolve, this initial value gets merged with your component style attribute.

<template>
  <div
    v-motion="{
      initial: {
        y: 100,
        opacity: 0
      },
      enter: {
        y: 0,
        opacity: 1
      }
    }"
  >
    Hello
  </div>

  <!-- OR -->

  <div
    v-motion
    :initial="initial"
    :enter="enter"
  >
    Hello
  </div>
</template>

<script setup>
const initial = ref({
  y: 100,
  opacity: 0,
})

const enter = ref({
  y: 0,
  opacity: 1,
})
</script>

This div will have be rendered server-side as:

<div style="opacity:0;transform:translate3d(0px,100px,0px);">Hello</div>

You can obviously imagine plenty of implementations with this, always knowing that your animations will be properly server-side rendered.