I have experience with Laravel 5 but i’ve just created a new application with Laravel 11 using Breeze, Inertia & Vue.

I have followed this tutorial at Medium.com.

I’m trying to get the application to display a Create Task button based on if the logged user has the correct permission to view this button.

I have setup the tables as per the tutorial. The logged in user has the correct permissions set in the database.

This code has been added to the HandleInertiaRequest middleware:

/**
 * Define the props that are shared by default.
 *
 * @return array<string, mixed>
 */
public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'auth' => [
            'user' => $request->user(),
            'can' => $request->user()?->loadMissing('roles.permissions')
                ->roles->flatMap(function ($role) {
                    return $role->permissions;
                })->map(function ($permission) {
                    return [$permission['title'] => auth()->user()->can($permission['title'])];
                })->collapse()->all(),
        ],
    ];
}

However, when I try to output the Create Task button for the user, it does not show:

<div class="mb-4" v-if="$page.props.auth.can.task_create">
<Link :href="route('tasks.create')" class="bg-green-500 hover:bg-green-700 text-white border border-transparent font-bold px-4 py-2 text-xs uppercase tracking-widest rounded-md">
    Create
</Link>

The value of $page.props.auth.can.task_create always shows as false.

Does anyone know what I am missing?