PHPackages                             ahmedsaoud31/laravel-permission-to-vuejs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Authentication & Authorization](/categories/authentication)
4. /
5. ahmedsaoud31/laravel-permission-to-vuejs

ActivePlugin[Authentication & Authorization](/categories/authentication)

ahmedsaoud31/laravel-permission-to-vuejs
========================================

Laravel Permission Package To Use it in VueJs

122267.1k—6.3%33[2 issues](https://github.com/ahmedsaoud31/laravel-permission-to-vuejs/issues)JavaScript

Since Sep 27Pushed 1y ago7 watchersCompare

[ Source](https://github.com/ahmedsaoud31/laravel-permission-to-vuejs)[ Packagist](https://packagist.org/packages/ahmedsaoud31/laravel-permission-to-vuejs)[ RSS](/packages/ahmedsaoud31-laravel-permission-to-vuejs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel permission to Vuejs
===========================

[](#laravel-permission-to-vuejs)

Update: now support Vue 3
-------------------------

[](#update-now-support-vue-3)

npm package
-----------

[](#npm-package)

[![Total Downloads](https://camo.githubusercontent.com/c2e8a93225598cdd5cad9ebfc7d6e94901ab631384fbb13cb5f05e8fe249204b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6c61726176656c2d7065726d697373696f6e2d746f2d7675656a73)](https://www.npmjs.com/package/laravel-permission-to-vuejs)[![Version](https://camo.githubusercontent.com/8f0627ab995726c97eb541b91bbfc442a8a67bde3279e41db0e583b8912b2792/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6c61726176656c2d7065726d697373696f6e2d746f2d7675656a73)](https://www.npmjs.com/package/laravel-permission-to-vuejs)[![License](https://camo.githubusercontent.com/147136fe559008bed09e870e83a4fefb0588d484c7081e1fef4d1fd484dca62b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6c61726176656c2d7065726d697373696f6e2d746f2d7675656a73)](https://en.wikipedia.org/wiki/MIT_License)

Composer package
----------------

[](#composer-package)

[![Total Downloads](https://camo.githubusercontent.com/d1ffbfaf34ee48a5cca2daeca2fe8d71c4467d4046eb34091e46d0d51ce3e05c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f61686d656473616f756433312f6c61726176656c2d7065726d697373696f6e2d746f2d7675656a73)](https://packagist.org/packages/ahmedsaoud31/laravel-permission-to-vuejs)[![License](https://camo.githubusercontent.com/147136fe559008bed09e870e83a4fefb0588d484c7081e1fef4d1fd484dca62b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6c61726176656c2d7065726d697373696f6e2d746f2d7675656a73)](https://en.wikipedia.org/wiki/MIT_License)

After installed you can do like this in [Vuejs](https://vuejs.org/):

```

```

If you need to use it in <script> or <script setup> tag

```

  import { is, can } from 'laravel-permission-to-vuejs'

  if(is('super-admin')){
    // do admin actions
  }

  if(can('edit post')){
    // do edit post action
  }

```

This package require to use [laravel-permission](https://github.com/spatie/laravel-permission)

Installation
------------

[](#installation)

##### PHP side

[](#php-side)

```
composer require ahmedsaoud31/laravel-permission-to-vuejs=dev-master
```

##### JavaScript side VueJs 3

[](#javascript-side-vuejs-3)

```
npm i laravel-permission-to-vuejs
```

##### JavaScript side VueJs 2

[](#javascript-side-vuejs-2)

```
npm i laravel-permission-to-vuejs@2.0.5
```

Config
------

[](#config)

First, add the `LaravelAndVueJS\Traits\LaravelPermissionToVueJS` trait to your `User` model(s):

```
use LaravelAndVueJS\Traits\LaravelPermissionToVueJS;

// Spatie package
use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use LaravelPermissionToVueJS;

    // Spatie package
    use HasRoles;

    // ...
}
```

Second, add and use the `laravel-permission-to-vuejs` plugin in `app.js` file:

```
import { createApp } from 'vue'
import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs'
import App from './components/App.vue'
const app = createApp(App)
app.use(LaravelPermissionToVueJS)
app.mount('#app')
```

Third, pass permissions from Laravel To Vuejs, in HTML header add this code:

```

    window.Laravel = {
        csrfToken: "{{ csrf_token() }}",
        jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():0 !!}
    }

```

If you need to update roles and permission or reload user authintaction after switch user without reload the application, You can use reloadRolesAndPermissions() function

```
// in component

    import { reloadRolesAndPermissions } from 'laravel-permission-to-vuejs'

    // after your event call reloadRolesAndPermissions() function
    reloadRolesAndPermissions()

```

License
-------

[](#license)

The MIT License (MIT).

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance28

Infrequent updates — may be unmaintained

Popularity52

Moderate usage in the ecosystem

Community18

Small or concentrated contributor base

Maturity17

Early-stage or recently created project

 Bus Factor1

Top contributor holds 88.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d133809f991f1622e82d5440d1b69754dda309fc93123538bf4dbc92baac32d?d=identicon)[ahmedsaoud31](/maintainers/ahmedsaoud31)

---

Top Contributors

[![ahmedsaoud31](https://avatars.githubusercontent.com/u/4484348?v=4)](https://github.com/ahmedsaoud31 "ahmedsaoud31 (52 commits)")[![xlcrr](https://avatars.githubusercontent.com/u/25985241?v=4)](https://github.com/xlcrr "xlcrr (6 commits)")[![Engveloper](https://avatars.githubusercontent.com/u/46981084?v=4)](https://github.com/Engveloper "Engveloper (1 commits)")

### Embed Badge

![Health badge](/badges/ahmedsaoud31-laravel-permission-to-vuejs/health.svg)

```
[![Health](https://phpackages.com/badges/ahmedsaoud31-laravel-permission-to-vuejs/health.svg)](https://phpackages.com/packages/ahmedsaoud31-laravel-permission-to-vuejs)
```

###  Alternatives

[bezhansalleh/filament-shield

Filament support for `spatie/laravel-permission`.

2.8k2.9M88](/packages/bezhansalleh-filament-shield)[gesdinet/jwt-refresh-token-bundle

Implements a refresh token system over Json Web Tokens in Symfony

70516.4M35](/packages/gesdinet-jwt-refresh-token-bundle)[illuminate/auth

The Illuminate Auth package.

9327.3M1.0k](/packages/illuminate-auth)[beatswitch/lock

A flexible, driver based Acl package for PHP 5.4+

870304.7k2](/packages/beatswitch-lock)[amocrm/amocrm-api-library

amoCRM API Client

182728.5k6](/packages/amocrm-amocrm-api-library)[vonage/jwt

A standalone package for creating JWTs for Vonage APIs

424.1M4](/packages/vonage-jwt)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)