People searching “Laravel Pennant Vue” hide a button and let the POST through. A flag is a server check that you also copy into a prop. The stack guide is the app this flag sits on.
TL;DR
- Feature::for($user)->active() becomes a boolean prop.
- The controller checks the same flag before it writes.
- Do not send the flag list to the browser and trust a posted
newEditor: true. - Do not call the provider from the page to “evaluate the flag”.
The fix#
shell
composer require laravel/pennantphp
use Laravel\Pennant\Feature;
Feature::define('new-editor', function (User $user) {
return (bool) $user->is_admin;
});Define that in a service provider, not in the Vue page.
php
$enabled = $request->user()
? Feature::for($request->user())->active('new-editor')
: false;
return Inertia::render('posts/Edit', [
'newEditor' => $enabled,
]);vue
<section v-if="newEditor">New editor</section>The store method checks active('new-editor') again before it writes. Do not send the flag list to the browser and trust a posted newEditor: true. Do not call the provider from the page to “evaluate the flag”.
FAQ#
How do I send a Pennant flag to a Vue page?
Feature::for($user)->active() becomes a boolean prop. The controller checks the same flag before it writes.
What goes wrong with Laravel Pennant Vue?
Many developers hide a button and let the POST through. Do not send the flag list to the browser and trust a posted newEditor: true.
