README
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:
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