Skip to content
πŸ”’ A Vue.js 2 directive for Laravel Permissions
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist πŸ“¦ Compiled files updated Apr 18, 2019
examples 🎨Change double quotes Apr 16, 2019
src ✨ Nuxt.js support added, πŸ”’ Data security improved Apr 18, 2019
.babelrc βž• Babel added Apr 14, 2019
.editorconfig πŸ”§ PHP coding style added Apr 15, 2019
.eslintignore πŸ”§ /examples added to .eslintignore Apr 15, 2019
.gitignore πŸ™ˆ Removed: package-lock.json Apr 15, 2019 πŸ‘₯ Updated: Folder structure Apr 16, 2019
LICENSE Initial commit Apr 14, 2019 πŸ“ Badges fixed Apr 18, 2019
package.json πŸ”– Version 1.3.0 released Apr 18, 2019
rollup.config.js βž• Added: rollup-plugin-node-resolve Apr 16, 2019
yarn.lock πŸ“Œ Added: yarn.lock Apr 16, 2019

Laravel Permissions for Vue.js & Nuxt.js

Codacy Badge Version Vue Downloads License

laravel-permissions is a plugin for Vue.js 2 & Nuxt.js that allows you to use Laravel Permissions 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 Permissions, and EXTRA MORE!.

πŸ’Ώ Installation


yarn add laravel-permissions


npm i laravel-permissions --save


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';


Or in your Nuxt.js project πŸŽ‰:

1. Create plugin:

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


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.



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>


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>

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'" />


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

πŸ”’ License


You can’t perform that action at this time.