๐Ÿคน A Nuxt module putting your components in motion

Usage no npm install needed!

<script type="module">
  import nuxtUseMotion from '';


๐Ÿคน nuxt-use-motion

This module is a Nuxt implementation of the Vue Composables @vueuse/motion.

For a better understanding of this module, you should check out the original composables page.

๐ŸŒ Documentation

๐Ÿ‘€ Demos


Once you installed it, add nuxt-use-motion dependency to your project

pnpm add --dev nuxt-use-motion
# or
npm i -D nuxt-use-motion

Add nuxt-use-motion to the buildModules section of nuxt.config.js

// nuxt.config.js
  buildModules: ['nuxt-use-motion']

Configure your animations ๐Ÿคน

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


In addition to the native @vueuse/motion features, the module allows you to define animations presets from your nuxt.config.js.

Once defined, as shown above, those animations will be available using directives, available in every component of your app.

  <div v-motion-pop-bottom>Pop from bottom! ๐ŸŽบ</div>

To see more about how to control animations declared with directives, check out Directive Usage.

To see more about what properties you can animate, check out Motion Properties.

To see more about how to create your own animations styles, check out Transition Properties.

To see more about what are variants and how you can use them, check out Variants.

To see more about how to control your declared variants, check out Motion Instance.


  1. Clone this repository
  2. Install dependencies using pnpm install
  3. Start development server using pnpm dev


MIT License