index.md

category
Browser

usePreferredReducedMotion

Reactive prefers-reduced-motion media query.

Usage

import { usePreferredReducedMotion } from '@vueuse/core'

const preferredMotion = usePreferredReducedMotion()

Component Usage

<UsePreferredReducedMotion v-slot="{ motion }">
  Preferred Color Scheme: {{ motion }}
<UsePreferredReducedMotion>