vue-permission-status

Vue 2/3 Component and composable to query for Web API permission state.

Example for Vue2: https://codesandbox.io/p/sandbox/vue2-permission-status-example-f67lx5

Example for Vue3: https://codesandbox.io/p/sandbox/vue3-permission-status-example-t8ff49

Setup

import { createVuePermissionStatusPlugin } from 'vue-permission-status'

const VuePermissionStatusPlugin = createVuePermissionStatusPlugin()

createApp(App).use(VuePermissionStatusPlugin).mount('#app')

Component

<vue-permission-status :permissions="['geolocation', 'notifications']">
  <template #granted="{ geolocation, notifications }">
    All permissions granted.
    <p>Status for geolocation is {{ geolocation }}</p>
    <p>Status for notifications is {{ notifications }}</p>
  </template>
  <template #prompt="{ geolocation, notifications }">
    A permission is prompting to the user
    <p>Status for geolocation is {{ geolocation }}</p>
    <p>Status for notifications is {{ notifications }}</p>
  </template>
  <template #denied="{ geolocation, notifications }">
    Any permission was denied
    <p>Status for geolocation is {{ geolocation }}</p>
    <p>Status for notifications is {{ notifications }}</p>
  </template>
</vue-permission-status>

Composable

const permissions = ['geolocation', 'notifications']

const { states, prompt, granted, denied } = usePermissionStatus(permissions)

Development

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint