Vuex Roles and Permissions

A simple Vuex plugin for managing user roles and permissions.

Installation

NPM

npm i vuex-roles

Usage

Usage with Vue 2

// Import Vue and your Vuex store
import Vue from 'vue'; 
import store from './store';
import Roles from 'vuex-roles';

// Register the plugin, passing the store is required
Vue.use(Roles, { store });

// Create our Vue instance
const app = new Vue({
  el: '#app',
  store,
});

// Register some roles and permissions
app.$roles.setRoles(['admin']);
app.$roles.setPermissions(['users.create', 'users.delete']);

Directives

The v-role and v-permission directives can be applied to elements to display or remove it depending on whether the role/permission is set.

Example

<div v-role=''> I'm an admin </div>'

Methods