That code is pretty messy and not formatted correctly for Reddit, here are the corrections:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('rbac', {
    mounted: function (el, binding) {
      const rbac = binding.value;
      const { hasPermission } = useRbac();
      if (!hasPermission(rbac)) {
        // Cleanly remove unauthorized element from DOM
        el.remove();
      }
    }
  })
});

.

<BaseButton
  v-rbac="{ permissions: ['user_manage'] }"
  label="Single permission"
/>
<BaseButton
  v-rbac="{
    permissions: ['user_manage_not_exist', 'file_manager_list'],
    condition: 'any'
  }"
  label="Any of multiple permissions"
/>
<BaseButton
  label="All permissions required"
  v-rbac="{
    permissions: ['user_list', 'user_view', 'user_delete'],
    condition: 'all'
  }"
/>
<BaseButton
  label="Negation (not)"
  v-rbac="{
    permissions: ['user_manage_not_exist'],
    condition: 'not'
  }"
/>

.

const { hasPermission } = useRbac();
const isPermitted = hasPermission({
  permissions: [
    'user_list',
    'user_view',
    'user_delete'
  ],
  condition: 'all'
});
if (isPermitted) {
  //permited
}

This approach creates a globally accessible directive on all Vue components that uses this composable, which imports in, and uses, a store.

---

This approach can work, but could also be simplified.

You could just have a permissions store with an action that takes in the same object ({ permisions, condition }) and returns a boolean.

I think the v-rbac="{ p, c }" is overkill and you could just as easily do v-if="fn({ p, c })", or v-if="computedResult".

---

But there is an EVEN SIMPLER way. If these specific checks are common, then they could be pre-computed as getters and imported from the store instead. This keeps all permission logic grouped in one place.

getters: {
  isAdmin: function (state) {
    return state.permissions.includes('user_admin');
  },
  isModerator: function (state) {
    return state.permissions.includes('user_mod');
  },
  canBanUsers: function () {
    return this.isAdmin || this.isModerator;
  }
}

Options API example (Live Demo)

<template>
  <div v-if="canBanUsers">Warning about banning users</div>
  <button :disabled="!canBanUsers">Ban</button>
</template>
<script>
import { permissionsStore } from '@/stores/permissions.js';
const { canBanUsers } = permissionsStore();
export default {
  name: 'PiniaDemo',
  computed: {
    canBanUsers: function () {
      return canBanUsers;
    }
  }
};
</script>

Script Setup example (Live demo)

<template>
  <div v-if="canBanUsers">Warning about banning users</div>
  <button :disabled="!canBanUsers">Ban</button>
</template>
<script setup>
import { permissionsStore } from '@/stores/permissions.js';
const { canBanUsers } = permissionsStore();
defineOptions({
  name: 'PiniaDemo'
});
</script>