Vue 3 Compatibility - Githubissues

RobHowdle commented 3 years ago

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

http://poddy.test/js/app.js:113398 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 http://poddy.test/js/app.js:113398 http://poddy.test/js/app.js:113400` Above is the error I was receiving. Thank you Rob

pette87 commented 3 years ago

Hi,

simple to migrate:

make a "permission.js" file in same directory of your app.js

Put following:

module.exports = {
    methods: {
        can(value) {
            var permissions = window.Laravel.jsPermissions.permissions;
            var _return = false;
            if (!Array.isArray(permissions)) {
                return false;
            }
            if (value.includes('|')) {
                value.split('|').forEach(function (item) {
                    if (permissions.includes(item.trim())) {
                        _return = true;
                    }
                });
            } else if (value.includes('&')) {
                _return = true;
                value.split('&').forEach(function (item) {
                    if (!permissions.includes(item.trim())) {
                        _return = false;
                    }
                });
            } else {
                _return = permissions.includes(value.trim());
            }
            return _return;
        },
        is(value) {
            var roles = window.Laravel.jsPermissions.roles;
            var _return = false;
            if (!Array.isArray(roles)) {
                return false;
            }
            if (value.includes('|')) {
                value.split('|').forEach(function (item) {
                    if (roles.includes(item.trim())) {
                        _return = true;
                    }
                });
            } else if (value.includes('&')) {
                _return = true;
                value.split('&').forEach(function (item) {
                    if (!roles.includes(item.trim())) {
                        _return = false;
                    }
                });
            } else {
                _return = roles.includes(value.trim());
            }
            return _return;
        }
    }
}

And in your app.js

const app = createApp({ .... ... .mixin(require('./permission')) ...

Now you can use the "if" variants.

ahmedsaoud31 commented 3 years ago

Now the package moved to support Vue 3

ahmedsaoud31 / laravel-permission-to-vuejs

Vue 3 Compatibility #3