# MotionConfig

The `MotionConfig` component can be used to set configuration options for all child `[motion](/docs/vue-motion-component.md)` [components](/docs/vue-motion-component.md).

```
<script setup>
  import { motion, MotionConfig } from "motion-v"
</script>

<template>
  <MotionConfig :transition="{ duration: 1 }">
    <motion.div
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
      />
  </MotionConfig>
</template>
```

## Props

### `transition`

Define a fallback `transition` to use for all child `motion` components.

### `reducedMotion`

**Default:** `"never"`

`reducedMotion` lets you set a site-wide policy for handling reduced motion. It offers the following options:

*   `"user"`: Respect the user's device setting.
    
*   `"always"`: Enforce reduced motion (useful for debugging).
    
*   `"never"`: Don't respect reduced motion.
    

When reduced motion is on, transform and layout animations will be disabled. Other animations, like `opacity` and `backgroundColor`, will persist.

### `nonce`

If using a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles) with a `nonce` attribute, passing the same attribute through `MotionConfig` will allow any `style` blocks generated by Motion to adhere the the security policy.

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