W3cubDocs

/VueUse

useScreenOrientation

Category	Browser
Export Size	704 B
Last Changed	4 weeks ago

Usage

import { useScreenOrientation } from '@vueuse/core'

const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()

To lock the orientation, you can pass an OrientationLockType to the lockOrientation function:

import { useScreenOrientation } from '@vueuse/core'

const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()

lockOrientation('portrait-primary')

and then unlock again, with the following:

unlockOrientation()

Accepted orientation types are one of "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" and "portrait".

Screen Orientation API MDN

Type Declarations

/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 */
export declare function useScreenOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>
  orientation: Ref<OrientationType | undefined>
  angle: Ref<number>
  lockOrientation: (type: OrientationLockType) => Promise<void>
  unlockOrientation: () => void
}
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>

Source

Source • Demo • Docs