# Hide a Vue button with a gate

> Share the gate as a boolean. The controller still calls authorize on the POST.

- URL: https://laravel-vuejs.space/laravel-gate-button-vue
- Author: Anass Ez-zouaine (https://laravel-vuejs.space/author/anass-ez-zouaine)
- Published: 2026-10-11
- Topics: Laravel, VueJs, Permissions

People searching “Laravel gate Vue button” hide the button and stop. The POST still runs. Share a boolean for the button, and keep `authorize` on the write. The [policy guide](https://laravel-vuejs.space/laravel-vue-policies) defines `update`.

> **TL;DR**
>
> -   Share the gate as a boolean.
> -   The controller still calls authorize on the POST.
> -   Do not send the whole gate map, or the user model, so the page can call `can` itself.
> -   Do not hide the button with CSS.
>
> **Who it's for:** Laravel + Vue developers
>
> **Applies to:** Laravel 13 · Vue 3

## The fix

```php
return Inertia::render('posts/Show', [
    'post' => $post->only(['id', 'title']),
    'canUpdate' => $request->user()?->can('update', $post),
]);
```

```vue
<button v-if="canUpdate" type="button" @click="edit">Edit</button>
```

`can` runs the same policy the controller will run. The boolean is a copy from the last response. It goes stale if a teammate changes the owner’s id. The next POST still checks.

## What to avoid

> **Gotcha**
>
> Do not send the whole gate map, or the user model, so the page can call `can` itself. Vue cannot see the policy. Do not hide the button with CSS. `v-if` removes it. A person can still POST, which is why the controller check stays.

## FAQ

**Q: How do I hide a Vue button with a gate?**

Share the gate as a boolean. The controller still calls authorize on the POST.

**Q: What goes wrong with Laravel gate Vue button?**

Many developers hide the button and stop. Do not send the whole gate map, or the user model, so the page can call `can` itself.