Laravel Permission for Vue.js & Nuxt.js

laravel-permissions is a plugin for Vue.js 2 & Nuxt.js that allows you to use Laravel Permission in your components.

Being blade-based you only need to specify the directive in your components or DOM elements. The names of the directives are the same as those available in Laravel Permission, and EXTRA MORE!.

💿 Installation

yarn

yarn add laravel-permissions

npm

npm i laravel-permissions --save

CDN

laravel-permissions is also available on these CDNs:

• jsdelivr
• unpkg

When using a CDN via script tag, all the exported modules on LaravelPermissions are available on the LaravelPermissions Object.

🏁 Getting Started

In your script entry point:

import Vue from 'vue';
import LaravelPermissions from 'laravel-permissions';

Vue.use(LaravelPermissions);
// OR
Vue.use(LaravelPermissions, { persistent: true });

Or in your Nuxt.js project 🎉:

1. Create plugin:

// ~/plugins/laravel-permissions.js
import Vue from 'vue';
import LaravelPermissions from 'laravel-permissions';

Vue.use(LaravelPermissions);
// OR
Vue.use(LaravelPermissions, { persistent: true });

2. Then register it:

// nuxt.config.js
export default {
  plugins: ['~/plugins/laravel-permissions']
}

Now you are all setup to use the plugin.

🚀 Usage

Apply the custom directive on your components or DOM elements. Make sure to read the example.

Directives

Permissions

Check for a specific permission:

<button v-permission="'add articles'">Add Article</button>

<!-- Alias -->
<button v-can="'add articles'">Add Article</button>

Check for any permission in a list:

<button v-permission:any="'add articles|edit articles'">Configure</button>

Check for all permissions:

<button v-permission:all="'add articles|edit articles'">Configure</button>

Check for unless permission:

<p v-permission:unless="'add article'">You dont have permission!</p>

Roles

Check for a specific role:

<button v-role="'writer'">Add Article</button>

Check for any role in a list:

<button v-role:any="'writer|admin'">Add Article</button>

Check for all roles:

<button v-role:all="'writer|user'">Add Article</button>

Check for unless role:

<p v-role:unless="'super'">You are not an Super Admin!</p>

Roles & Permissions

Check for role and permission:

<button v-role="'writer'" v-permission="'add articles'">Add Article</button>

<!-- You can use any combination of directives -->

Check for role or permission:

<button v-role-or-permission="'super|add articles'">Add Article</button>

Working with attributes

You can also set True to any attribute of DOM element if the condition is not met. You can set multiple attributes.

<button v-permission:has.disabled="'add articles'">Add Article</button>

<input v-role:any.required.autofocus="'admin|super admin'" />

Methods

Set permissions and roles

This plugin searches the Laravel instance, by default it already creates it but you must define the permissions and roles:

this.$laravel.setPermissions(['add articles', 'edit articles']);
this.$laravel.setRoles(['admin', 'user', 'writer']);

this.$laravel.getPermissions(); // ['add articles', 'edit articles']
this.$laravel.getRoles(); // ['admin', 'user', 'writer']

Directives as functions

You can also use the custom directives as functions.

this.$laravel.hasPermission('add articles'); // True
this.$laravel.unlessPermission('add articles'); // False
this.$laravel.hasAnyPermission('add articles|edit articles'); // True
this.$laravel.hasAllPermissions('add articles|edit articles'); // True

this.$laravel.hasRole('admin'); // True
this.$laravel.unlessRole('admin'); // False
this.$laravel.hasAnyRole('admin|writer'); // True
this.$laravel.hasAllRoles('admin|writer'); // True

✅ Examples

See the examples and instructions with Laravel.

🚸 Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

🙈 Credits

• Inspired by Laravel Permission syntax.

🔒 License

MIT