🤹 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.
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
- Clone this repository
- Install dependencies using
pnpm install
- Start development server using
pnpm dev