ahmedsaoud31 / laravel-permission-to-vuejs Goto Github PK

Hi,
Please check the case mentioned it this issue title.
Thanks.

Hey,

I use Laravel 8.x and Vue 2.x and have this error after installing:
Call to undefined method App\Models\User::getRoleNames() (View: /resources/views/layouts/default.blade.php)

Code, which causes the error:
<script type="text/javascript"> window.Laravel = { csrfToken: "{{ csrf_token() }}", jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():0 !!} } </script>

Version of spatie:
"spatie/laravel-permission": "^5.4"

Can anyone help me? Thanks!

Regards,
Tyler

Hey,

I have in my .vue file the code for testing:
<div v-if="is('super_admin')"> <p class="font-weight-black">EUR 0,00</p> </div>

When I reload the site, I have this error:
[Vue warn]: Property or method "is" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

My app.js
window.Vue = require('vue').default; import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs'; const app = new Vue({ LaravelPermissionToVueJS, el: '#app', router: new VueRouter(routes) });

Can anyone help me, why I have the error?

Thanks!

Regards,
Tyler

How to update the permissions in a SPA without refreshing the browser? I'm working with a SPA and when I login to the app I got error because the user don't get the permissions, I have to refresh the browser to get the user permissions but that's not the point in a SPA.

its miss declaration of type in typescript.

thanks

so I have the newest laravel-permission but yours is erroring
Problem 1
- Can only install one of: spatie/laravel-permission[v2.x-dev, 3.2.0].
- Can only install one of: spatie/laravel-permission[v2.x-dev, 3.2.0].
- Can only install one of: spatie/laravel-permission[v2.x-dev, 3.2.0].
- ahmedsaoud31/laravel-permission-to-vuejs dev-master requires spatie/laravel-permission ^2.0 -> satisfiable by spatie/laravel-permission[v2.x-dev].
- Installation request for ahmedsaoud31/laravel-permission-to-vuejs dev-master -> satisfiable by ahmedsaoud31/laravel-permission-to-vuejs[dev-master].
- Installation request for spatie/laravel-permission ^3.2 -> satisfiable by spatie/laravel-permission[3.2.0].

Thank you

Hi!

I was wondering: what is the best wat to set this variable you use when I use Laravel only as backend (API)?
window.Laravel

In your docs its coming from Laravel but I use Laravel only as backend.
Ive added 'permissions' => $this->jsPermissions() to my User resource to I have this permissions available in my Vue frontend using {{ this.$auth.user }}

I think I have two options here:

• Im able to set window.Laravel anywhere so I can use your file
• Ill try to create an own version of your file using this $auth contents.

Looking forward to your reply.

Regards,

Raymond

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?

Hi there,

Very sorry but i'm really stuck at this app.js as this is a new project and this what the app.js file looks like:

`
require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
title: (title) => ${title} - ${appName},
resolve: (name) => require(./Pages/${name}.vue),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mixin({ methods: { route } })
.mount(el);
},
});

InertiaProgress.init({ color: '#4B5563' });
`

I don't really know how it should become as I tried many ways to make it work. Just throws errors again and again.

Thanks.

Hello,

I was trying to use this plugin but it seems it is not compatible with Vue 3? I was getting the following error and I couldn't see anywhere that told me it was compatible so I am assuming that may be my problem. Do you have a plans to make this Vue 3 compatible at all?

Uncaught TypeError: Vue.prototype is undefined install http://poddy.test/js/app.js:64452 use http://poddy.test/js/app.js:9570 js http://poddy.test/js/app.js:25907 __webpack_require__ http://poddy.test/js/app.js:113228 checkDeferredModulesImpl http://poddy.test/js/app.js:113378 x http://poddy.test/js/app.js:113391 <anonymous> http://poddy.test/js/app.js:113398 <anonymous> http://poddy.test/js/app.js:113400 app.js:64452:3 install http://poddy.test/js/app.js:64452 use http://poddy.test/js/app.js:9570 js http://poddy.test/js/app.js:25907 __webpack_require__ http://poddy.test/js/app.js:113228 checkDeferredModulesImpl http://poddy.test/js/app.js:113378 x http://poddy.test/js/app.js:113391 <anonymous> http://poddy.test/js/app.js:113398 <anonymous> http://poddy.test/js/app.js:113400

Above is the error I was receiving.

Thank you
Rob

Please add usage examples in the <script setup> and <script> tags.
Perhaps this is obvious, or the check is not used outside the template.
Thanks!

Here I am using this package with VueJs2 but on loading up it is giving me an error for undefined setting can,
@ahmedsaoud31

require('./bootstrap');
import Vue from 'vue';
import VueRouter from "vue-router";
import Toaster from 'v-toaster';
import Swal from 'sweetalert2';

import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs';


window.Vue = Vue;
window.Swal = Swal;
Vue.use(VueRouter);


Vue.use(Toaster, {timeout: 5000});
Vue.use(LaravelPermissionToVueJS);

Does this work in Laravel-Inertia-Vue stack? If works then installation and setup is same? Please help me someone.

This problem arise if developer do not want to put fetch permission inside main.js
So what they need to do is to declare below code inside their main.js

//// Ensure window.Laravel.jsPermissions is defined with a default value
window.Laravel = window.Laravel || {};
window.Laravel.jsPermissions = window.Laravel.jsPermissions || { permissions: 0, roles: 0 };

Hi i use this package in spa app, vue 3 and laravel 8 and sanctum
but i get this error

Uncaught SyntaxError: Unexpected token '}'

As MrEduar pointed, window.jsPermissions will nor get updated with requests when using SPA.
So in my case with Laravel/Vue SPA, I have installed and configured the module and it works, except after first login shows a blank page because of JavaScript error of cannot read permissions of null. So the dashboard have to be reloaded.
And upon every next login it will remember permissions from the login when it was last reloaded.
So a solution to this is to make the dashboard to be reloaded after every login.
But why nothing said about this? Is there a better solution?

To set the permission and rules in the correct manner you should implement them in this way:

window.Laravel = { jsPermissions: JSON.parse(permissionsData.value) };

window.Larave because it is initially undefined and window.Laravel.jsPermissions will throw an error if you don't use the approach described above.

Second JSON.parse ensures data, that is in the object is covered in quotes like "rules" and "permissions", to have correct object keys, so they can be accessed correctly in packages index.js file.

Hi, first of all, thank you so much for this repo, It helped me a lot.

Actually I'm having problems usings on Jetstream/Inertia, have some menu items checking permissions like user.index to show it.

After login, I need to recharge the page to see the menu items associated with the permissions. It would help if you can guide me in any solution.

Thanks
Felipe R

app.js
import './bootstrap';
import '../css/app.css';
import 'flowbite';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
        .use(LaravelPermissionToVueJS)
        .use(plugin)
        .use(ZiggyVue, Ziggy)
        .mount(el);
    },
});



app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title inertia>{{ config('app.name', 'Laravel') }}</title>
        <script type="text/javascript">
            window.Laravel = {
                csrfToken: "{{ csrf_token() }}",
                jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():0 !!}
            }
        </script>
        @routes
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>



AppLayout.vue
<JetNavLink v-if="can('user.index')" :href="route('user.index')" :active="route().current('user.index')">
    Users
</JetNavLink>