Skip to content
On this page

useScreenOrientation

Category
Last Changed
2 months ago

Reactive Screen Orientation API. It provides web developers with information about the user's current screen orientation.

Demo

For best results, please use a mobile or tablet device (or use your browser's native inspector to simulate an orientation change)
isSupported: false
Orientation Type:
Orientation Angle: 0

Usage

import { useScreenOrientation } from '@vueuse/core'

const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()
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('primary-portrait')
import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('primary-portrait')

and then unlock again, with the following:

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

Source

SourceDemoDocs

Contributors

Michael J. Roberts
Nicolas Hedger

Changelog

v8.4.0 on 5/3/2022
e8c05 - feat: new function (#1526)
useScreenOrientation has loaded