Skip to content
On this page

useScreenOrientation

Category
Export Size
1.25 kB
Last Changed
5 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

ts
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:

ts
import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('portrait-primary')
import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('portrait-primary')

and then unlock again, with the following:

ts
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

typescript
/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 */
export declare const useScreenOrientation: (options?: ConfigurableWindow) => {
  isSupported: Ref<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: Ref<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
JunaYa
Jelf
Anthony Fu
Nicolas Hedger

Changelog

v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.4.0 on 5/3/2022
e8c05 - feat: new function (#1526)

Released under the MIT License.