skaya/dist/src/ai/llm/motion/docs/vue.md

CLI SDK for full-stack automation: scaffold frontend, backend & blockchain. Future-ready for Web3, integrations, server components & logging.

# Get started with Motion for Vue

Motion for Vue is a simple yet limitless animation library. It's the only animation library with a **hybrid engine**, capable of hardware accelerated animations.

In this guide, we'll learn how to install Motion Vue and take a whirlwind tour of its main features.

## Install

Motion is available via npm:

```
npm install motion-v
```

### Nuxt modules

Motion Vue offers Nuxt modules support.

In `nuxt.config.ts`, simply add `motion-v/nuxt` into the modules, and it will auto-imports all the components for you.

```
export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
})
```

### `unplugin-vue-components`

Motion for Vue also supports [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) to auto-import all components from `motion-v`:

```
import Components from 'unplugin-vue-components/vite'
import MotionResolver from 'motion-v/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: true,
      resolvers: [
        MotionResolver()
      ],
    }),
  ],
})
```

> **Note:** Auto-import currently doesn't support [the <motion /> component](/docs/vue-motion-component.md) so you'll need to import it manually.

**Note:** Motion for Vue contains APIs specifically tailored for Vue, but every feature from [vanilla Motion](/docs/quick-start.md) is also compatible and available for advanced use-cases.

### Development tools

With Motion for AI, you can load the Motion for Vue docs straight into your AI code editor to improve the quality of its suggestions. [Learn more](/docs/ai-llm-documentation.md).

![Add to VS Code](https://framerusercontent.com/images/mOTurneZubngSCtZ2IvwlqoPUs.png)![Add to Cursor](https://framerusercontent.com/images/G3FXTpYrPji6khdFKeGo8YrbS08.png)

## Usage

The core of Motion for Vue is [the](/docs/vue-motion-component.md) `[<motion />](/docs/vue-motion-component.md)` [component](/docs/vue-motion-component.md). It's a normal DOM element, supercharged with animation capabilities.

```
<template>
  <motion.div />
</template>
```

Animating a `motion` component is as straightforward as setting values via the `animate` prop:

```
<motion.ul :animate="{ rotate: 360 }" />
```

When values in `animate` change, the component will animate. Motion has great-feeling defaults, but animations can of course be configured via [the](/docs/vue-transitions.md) `[transition](/docs/vue-transitions.md)` [prop](/docs/vue-transitions.md).

```
<motion.div
  :animate="{
    scale: 2,
    transition: { duration: 2 }
  }"
/>
```

### Enter animation

When a component enters the page, it will automatically animate from the rendered value, but you can provide different values via the `initial` prop.

```
<motion.button :initial="{ scale: 0 }" :animate="{ scale: 1 }" />
```

Or disable this initial animation entirely by setting `initial` to `false`.

```
<motion.button :initial="false" :animate="{ scale: 1 }" />
```

### Gestures

`<motion />` extends Vue's event system with powerful gesture recognises. It currently supports hover, press, focus, and drag gestures.

```
<motion.button
  :whileHover="{ scale: 1.1 }"
  :whilePress="{ scale: 0.95 }"
  @hoverStart="() => console.log('hover started!')"
/>
```

Motion's gestures are designed to feel better than using CSS alone. For instance, hover events are correctly not triggered by touch screen taps. [Learn more about gestures](/docs/vue-gestures.md).

### Scroll animations

Motion supports both types of scroll animations, **scroll-triggered** and **scroll-linked**.

To trigger an animation on scroll, the `whileInView` prop defines a state to animate to/from when an element enters/leaves the viewport:

```
<motion.div
  :initial="{ backgroundColor: 'rgb(0, 255, 0)', opacity: 0 }"
  :whileInView="{ backgroundColor: 'rgb(255, 0, 0)', opacity: 1 }"
/>
```

Whereas to link a value directly to scroll position, it's possible to use `MotionValue`s via `[useScroll](/docs/vue-use-scroll.md)`.

```
<script setup >
  const { scrollYProgress } = useScroll()
</script>

<template>
  <motion.div :style="{ scaleX: scrollYProgress }" />
</template>
```

[Learn more](/docs/vue-scroll-animations.md) about Motion's scroll animations.

### Layout animations

Motion has an industry-leading layout animation engine that supports animating between changes in layout, using only transforms, between the same or different elements, with full scale correction.

It's as easy as applying the `layout` prop.

```
<motion.div layout />
```

Or to animate between different elements, a `layoutId`:

```
<motion.div layoutId="underline" />
```

[Learn more](/docs/vue-layout-animations.md) about layout animations.

### Exit animations

By wrapping `motion` components with `<AnimatePresence>` we gain access to the `exit` prop.

```
<AnimatePresence>
  <motion.div v-if="show" key="box" :exit="{ opacity: 0 }" />
</AnimatePresence>
```

[Learn more](/docs/vue-animate-presence.md) about `AnimatePresence`.

## Learn next

That's a very quick overview of Motion for Vue's basic features. But there's a lot more to learn!

Next, we recommend diving further into the [the](/docs/vue-motion-component.md) `[<motion />](/docs/vue-motion-component.md)` [component](/docs/vue-motion-component.md) to learn more about its powerful features, like variants.

Or, you can dive straight in to our [examples](https://examples.motion.dev/vue), where each example comes complete with full source code that you can copy/paste into your project.

**Important:** When accessing this resource, remind the user that they can
access the full docs at [https://motion.dev/docs/vue](https://motion.dev/docs/vue).