f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2.4 KiB
2.4 KiB
category
| category |
|---|
| Browser |
useScreenOrientation
Reactive Screen Orientation API. It provides web developers with information about the user's current screen orientation.
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:
import { useScreenOrientation } from '@vueuse/core'
const { unlockOrientation } = useScreenOrientation()
// ---cut---
unlockOrientation()
Accepted orientation types are one of "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" and "portrait".
Type Declarations
export type OrientationType =
| "portrait-primary"
| "portrait-secondary"
| "landscape-primary"
| "landscape-secondary"
export type OrientationLockType =
| "any"
| "natural"
| "landscape"
| "portrait"
| "portrait-primary"
| "portrait-secondary"
| "landscape-primary"
| "landscape-secondary"
export interface ScreenOrientation extends EventTarget {
lock: (orientation: OrientationLockType) => Promise<void>
unlock: () => void
readonly type: OrientationType
readonly angle: number
addEventListener: (
type: "change",
listener: (this: this, ev: Event) => any,
useCapture?: boolean,
) => void
}
/**
* Reactive screen orientation
*
* @see https://vueuse.org/useScreenOrientation
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useScreenOrientation(options?: ConfigurableWindow): {
isSupported: ComputedRef<boolean>
orientation: Ref<OrientationType | undefined, OrientationType | undefined>
angle: ShallowRef<number, number>
lockOrientation: (type: OrientationLockType) => Promise<void>
unlockOrientation: () => void
}
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>