README

Admin CRUD for spatie/laravel-permission roles & permissions on Laravel + Inertia, with a matching Vue 3 frontend.

The PHP package (givanov95/laravel-roles-permissions-crud) ships the controllers, form requests and a route macro. The npm package (@givanov95/vue-roles-permissions-crud) ships the Vue components you drop into thin page shells inside your own admin layout.

Why thin shells?

Full Inertia pages cannot be resolved from a package (the Inertia resolver only globs the host app's resources/js/pages). So — exactly like @givanov95/vue-data-table — the package ships components; each app keeps a ~10-line page shell that wraps the component in its own layout. The shared logic lives in the package; only the layout stays local.

Install

composer require givanov95/laravel-roles-permissions-crud
npm install @givanov95/vue-roles-permissions-crud

Local development (path / file: link)

Until the packages are published, link them locally.

composer.json:

"repositories": [
    { "type": "path", "url": "../laravel-roles-permissions-crud" }
],
"require": {
    "givanov95/laravel-roles-permissions-crud": "*"
}

package.json:

"dependencies": {
    "@givanov95/vue-roles-permissions-crud": "file:../laravel-roles-permissions-crud"
}

Vite must bundle the package source (it ships .ts/.vue, not a build):

// vite.config.ts — ssr.noExternal
noExternal: ['@givanov95/vue-roles-permissions-crud', '@givanov95/vue-forms']

Backend wiring

(Optional) publish & tune the config:
```
php artisan vendor:publish --tag=roles-permissions-crud-config
```
Keys: guard, authorize_role, protected_roles, prefix, route_name_prefix, middleware, page_prefix. Defaults assume a super-admin admin area (/admin/roles, route names admin.roles.*, Inertia pages Admin/Roles/*).
Register the routes in routes/web.php:
```
Route::rolesPermissionsCrud();
```
This creates admin.roles.* and admin.permissions.* resource routes (minus show) under the configured prefix and middleware.

Frontend wiring

import { RolesPermissionsPlugin, RolesPlugin, PermissionsPlugin } from '@givanov95/vue-roles-permissions-crud';

app.use(RolesPermissionsPlugin, {
    translator: (key, replacements) => (window as any).__(key, replacements),
    route: (...args) => (window as any).route(...args),
    routeNamePrefix: 'admin.', // must match config('roles-permissions-crud.route_name_prefix')
});
// Optional global $hasRole / $can helpers:
app.use(RolesPlugin).use(PermissionsPlugin);

Add thin page shells under resources/js/pages/Admin/:

<!-- Admin/Roles/Index.vue -->
<script setup lang="ts">
import { RolesManager } from '@givanov95/vue-roles-permissions-crud';
import AdminLayout from '@/layouts/AdminLayout.vue';
defineProps<{ roles: any[] }>();
</script>
<template>
    <AdminLayout :title="__('Roles')">
        <template #header><h1 class="text-xl font-semibold text-gray-800">{{ __('Roles') }}</h1></template>
        <RolesManager :roles="roles" />
    </AdminLayout>
</template>

Components & the props each shell forwards:

Page	Component	Props
`Admin/Roles/Index`	`RolesManager`	`roles`
`Admin/Roles/Create`	`RoleForm`	`permissions`
`Admin/Roles/Edit`	`RoleForm`	`role`, `permissions`
`Admin/Permissions/Index`	`PermissionsManager`	`permissions`
`Admin/Permissions/Create`	`PermissionForm`	—
`Admin/Permissions/Edit`	`PermissionForm`	`permission`

givanov95 / laravel-roles-permissions-crud

Maintainers

Package info

Statistics

Security