Laravel Vue SPA: Roles and Permissions Example with CASL

In this tutorial, we will show how to add permissions to the Laravel application with Vue.js SPA architecture. For the example, we will take a basic CRUD of posts, create two roles (admin and editor), and the editor role will not be able to delete the posts.

• For the back-end, we will use Laravel Gates
• For the front-end, we will use the CASL Vue package.
• Also, for Vue.js we will use the <script setup> Composition API method with Composables

Let's dive in!

Permissions, Roles, Gates: Back-End

First, we will create the models with migrations for roles and permissions.

php artisan make:model Role -m
php artisan make:model Permission -m

database/migrations/xxxx_create_roles_table.php:

public function up(): void
{
    Schema::create('roles', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

app/Models/Role.php:

class Role extends Model
{
    protected $fillable = ['name'];
}

database/migrations/xxxx_create_permissions_table.php:

public function up(): void
{
    Schema::create('permissions', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

app/Models/Permission.php:

class permissions extends Model
{
    protected $fillable = ['name'];
}

Next, we need to create a pivot table for...