Need to reload page to load roles in Laravel-Inertia-Vue stack

[getmizan]

In my page I have a div with " v-if="is('admin')" ". When the page loads with admin role, the div is not visible. But after reloading the page the div is being visible. How to solve this? I tried both the axios, Laravel-route method and Inertia shared-data method. None works. Can someone please help me to fix the issue?

[agares29]

I'm having the same problem, I haven't find a way to solve it 😢

[Nekromio]

The same problem Laravel 11 Vue 3

[zedomel]

I could solve it using the code provided by @flprblr at #4 with some fixes. Here what worked for me:

Add it to AppLayout.vue:

<script setup>

...

const { props } = usePage()

watchEffect(() => {
     window.Laravel = window.Laravel || {}
     if (props.permissions) {  
          window.Laravel.jsPermissions = props.permissions;
     }
})

...
</script>`

Add to App\Http\Middleware\HandleInertiaRequests.php:

 public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'permissions' => json_decode(auth()->check() ? auth()->user()->jsPermissions() : '{}', true),
       ]);
    }

[ahmedsaoud31]

Use @zedomel example

Or Update your package and use reloadRolesAndPermissions() function

// in component
<script>
    import { reloadRolesAndPermissions } from 'laravel-permission-to-vuejs'

    // after your event call reloadRolesAndPermissions() function
    reloadRolesAndPermissions()
</script>

[choper725]

is there a way doing it globally ? not on every component ?

btw: it seems not to work as expected, for example, ive put reloadRolesAndPermissions() after login success, i still get the role div on next screen.