Skip to content

usePermission

Category
Export Size
869 B
Last Changed
4 months ago
Related

Reactive Permissions API. The Permissions API provides the tools to allow developers to implement a better user experience as far as permissions are concerned.

Demo

accelerometer: granted
accessibilityEvents: prompt
ambientLightSensor: prompt
backgroundSync: granted
camera: prompt
clipboardRead: prompt
clipboardWrite: granted
geolocation: prompt
gyroscope: granted
magnetometer: granted
microphone: prompt
notifications: prompt
paymentHandler: granted
persistentStorage: prompt
push: prompt
speaker: prompt
localFonts: prompt

Usage

js
import { usePermission } from '@vueuse/core'

const microphoneAccess = usePermission('microphone')

Type Declarations

Show Type Declarations
typescript
type DescriptorNamePolyfill =
  | "accelerometer"
  | "accessibility-events"
  | "ambient-light-sensor"
  | "background-sync"
  | "camera"
  | "clipboard-read"
  | "clipboard-write"
  | "gyroscope"
  | "magnetometer"
  | "microphone"
  | "notifications"
  | "payment-handler"
  | "persistent-storage"
  | "push"
  | "speaker"
  | "local-fonts"
export type GeneralPermissionDescriptor =
  | PermissionDescriptor
  | {
      name: DescriptorNamePolyfill
    }
export interface UsePermissionOptions<Controls extends boolean>
  extends ConfigurableNavigator {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls?: Controls
}
export type UsePermissionReturn = Readonly<
  ShallowRef<PermissionState | undefined>
>
export interface UsePermissionReturnWithControls {
  state: UsePermissionReturn
  isSupported: ComputedRef<boolean>
  query: () => Promise<PermissionStatus | undefined>
}
/**
 * Reactive Permissions API.
 *
 * @see https://vueuse.org/usePermission
 */
export declare function usePermission(
  permissionDesc:
    | GeneralPermissionDescriptor
    | GeneralPermissionDescriptor["name"],
  options?: UsePermissionOptions<false>,
): UsePermissionReturn
export declare function usePermission(
  permissionDesc:
    | GeneralPermissionDescriptor
    | GeneralPermissionDescriptor["name"],
  options: UsePermissionOptions<true>,
): UsePermissionReturnWithControls

Source

SourceDemoDocs

Contributors

Anthony Fu
Fernando Fernández
Antério Vieira
Robin
James Garbutt
IlyaL
Alex Liu
Damon Muma
Anthony Fu
sean
Jelf
Guille
Alex Kozack
Nurettin Kaya

Changelog

v12.4.0 on
dd316 - feat: use passive event handlers everywhere is possible (#4477)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v11.0.2 on
2aaa1 - fix: state setting (#4167)
v11.0.1 on
63a22 - fix: fix memory leak (#4157)
v11.0.0-beta.2 on
5f584 - feat: add local-fonts permission (#4098)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access