nuxt-x-app

Permission

Renderless gate component for role-based conditional rendering.

Permission

The Permission category provides XAPermissionGate, a renderless component that wraps content and controls its visibility based on the authenticated user's roles. It uses the useCurrentUser composable and evaluates role constraints at render time with no extra network requests.

Components

`<XAPermissionGate />`

A <template>-based wrapper that renders its default slot only when the current user satisfies the role condition. A #fallback slot is rendered when access is denied. All three role props are mutually exclusive — use whichever matches the required access model.

<!-- Require a single role -->
<XAPermissionGate role="admin">
  <AdminPanel />
</XAPermissionGate>

<!-- Require any one of several roles (OR) -->
<XAPermissionGate :roles="['editor', 'publisher']">
  <PublishButton />
</XAPermissionGate>

<!-- Require all listed roles (AND) -->
<XAPermissionGate :all-roles="['billing', 'admin']">
  <BillingSettings />
</XAPermissionGate>

<!-- Invert — show to everyone except admins -->
<XAPermissionGate role="admin" invert>
  <UpgradePrompt />
</XAPermissionGate>

<!-- With fallback for denied state -->
<XAPermissionGate role="admin">
  <AdminDashboard />
  <template #fallback>
    <p>You do not have permission to view this content.</p>
  </template>
</XAPermissionGate>

Props

Prop	Type	Default	Description
`role`	`String`	`undefined`	Require this single role
`roles`	`String[]`	`undefined`	Require any one of these roles (OR logic)
`allRoles`	`String[]`	`undefined`	Require all of these roles (AND logic)
`invert`	`Boolean`	`false`	Invert the access check — hide from matching roles

Logic

When no role props are provided, the gate renders for any authenticated user.
When invert is true, the result of the role check is negated.
Role evaluation uses hasRole, hasAnyRole, and isAuthenticated from useCurrentUser.

Slots

Slot	Description
default	Rendered when access is granted
`fallback`	Rendered when access is denied (optional)

AI Context

category: Permission
package: "@xenterprises/nuxt-x-app"
use-when: >
  Wrap any UI element — buttons, navigation links, sections, entire pages —
  in XAPermissionGate to enforce role-based visibility purely in the
  template layer. Use the role prop for a single-role check, roles for OR
  logic, and allRoles for AND logic. Add invert to hide features from
  privileged users (e.g., hide upgrade banners from admins). Always pair
  with server-side authorization; this component controls rendering only.

Edit this pageorReport an issue

Notification

Bell icon with unread badge and a slide-over panel for listing and managing notifications.

Settings

Reusable building blocks for settings pages — toggle preference rows and security feature items.