Chapter 105: v-motion Directive – Motion for Vue

Core Idea

v-motion directive for Motion for Vue : add enter/exit, gestures, layout, and variants to any HTML/SVG element without wrapping in a motion component. Use with AnimatePresence, presets, and SSR.

Key Concepts

• Install: const app = createApp(App)
• Global registration (Vue): const app = createApp(App)
• Global registration (Nuxt): v-motion supports two syntax styles.
• Local registration: v-motion supports two syntax styles.
• Syntax: v-motion supports two syntax styles.
• Basic animation: v-motion supports two syntax styles.
• Binding value: Pass all options as a single object:
• Props: Use v-motion as a marker and pass motion options as individual props:
• Mixed: When both are used

Code Examples

import { createApp } from 'vue'
import { MotionPlugin } from 'motion-v'

const app = createApp(App)
app.use(MotionPlugin)

• What it demonstrates: Core usage pattern for v-motion Directive – Motion for Vue.

Key Takeaways

1. v-motion Directive – Motion for Vue supports Install.
2. v-motion Directive – Motion for Vue supports Global registration (Vue).
3. v-motion Directive – Motion for Vue supports Global registration (Nuxt).

Connects To

• Vue animations with Motion for Vue: related Motion doc page.
• Vue <motion /> component: related Motion doc page.
• Vue gesture animations: related Motion doc page.