VueUseusePermission
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
{}
Usage
js
import { usePermission } from '@vueuse/core'
const microphoneAccess = usePermission('microphone')
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"
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<Ref<PermissionState | undefined>>
export interface UsePermissionReturnWithControls {
state: UsePermissionReturn
isSupported: Ref<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
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"
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<Ref<PermissionState | undefined>>
export interface UsePermissionReturnWithControls {
state: UsePermissionReturn
isSupported: Ref<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
Contributors
Anthony Fu
Antério Vieira
Jelf
Guille
Alex Kozack
Nurettin Kaya