https://github.com/dystcz/nuxt-permissions
Nuxt module for permission management
https://github.com/dystcz/nuxt-permissions
nuxt nuxt3 permissions roles roles-management roles-permission-management
Last synced: 6 months ago
JSON representation
Nuxt module for permission management
- Host: GitHub
- URL: https://github.com/dystcz/nuxt-permissions
- Owner: dystcz
- License: mit
- Created: 2023-02-16T16:54:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-29T11:30:20.000Z (about 2 years ago)
- Last Synced: 2025-04-12T10:53:14.435Z (6 months ago)
- Topics: nuxt, nuxt3, permissions, roles, roles-management, roles-permission-management
- Language: TypeScript
- Homepage:
- Size: 226 KB
- Stars: 59
- Watchers: 3
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt Permissions
[](https://badge.fury.io/js/nuxt-permissions)
This is a simple package for integrating roles and permissions with a Nuxt application.
It is designed to complement backend permissions, and should not be used as the sole solution.
Please note that this is alpha quality software and **should not be used in production**.
This package is a work in progress and is subject to change.
## Installation
```bash
yarn add nuxt-permissions
# or
npm i nuxt-permissions
```
Introduce the module into the `nuxt.config.[js,ts]`. and set `ssr` to `false`
```js
export default defineNuxtConfig({
ssr: false,
modules: [
'nuxt-permissions'
// ...
]
})
```
## Usage
### Setting user permissions or roles
To set user permissions or roles, you must use a `usePermissions` or `useRoles` composable, that contains an array of strings for permissions or roles.
```ts
const userPermissions = usePermissions()
const userRoles = useRoles()
const user = await login() // your login functionality
userPermissions.value = user.permissions // ['read posts', ..., 'delete posts']
userRoles.value = user.roles // ['admin', 'editor']
```
### Middleware usage
To use the module, you must set `nuxt-permissions` as middleware and add `permissions` or `roles` in `definePageMeta`. For example, for the admin dashboard, you would set `roles` to `['admin']` and/or `permissions` to `['access dashboard']`, depending on your backend settings.
You can use a combination of both, but permissions have higher priority than roles.
If roles or permissions are not set, access to that page is unrestricted.
```ts
// ~/pages/admin/dashboard
definePageMeta({
middleware: [
'auth', // your auth middleware
'nuxt-permissions'
],
roles: ['admin'],
permissions: ['access dashboard']
})
```
### Directives
Directives can be a string or an array of strings. If an array is passed, only one item needs to apply for the condition to be fulfilled.
#### v-can
Works as `v-if` but for permissions
```vue
Edit
View or edit
```
#### v-can:not
Works as negated `v-if` but for permissions
```vue
You do not have permissions to edit this post
You do not have permissions to edit nor view this post
```
#### v-role
Works as `v-if` but for roles
```vue
You are admin
You are admin or editor
```
#### v-role:not
Works as negated `v-if` but for roles
```vue
You are not admin
You are not admin nor editor
```
## Development
- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start playground in development mode.
- Use `npm run test` to run tests.