Tahul / nuxt-use-motion

🤹 A Nuxt module putting your components in motion

🤹 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

Setup

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
        },
      }
    }
  }
}

Usage

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.

<template>
  <div v-motion-pop-bottom>Pop from bottom! 🎺</div>
</template>

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.

Development

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

License

MIT License