{"id":15899,"library":"vue-acl","title":"Vue Access Control List (Vue 2)","description":"Vue-acl is a plugin designed for Vue.js 2 applications to manage user access permissions for components and routes. It provides a structured way to define global and local access rules using a fluent API (`AclRule`) with `or` and `and` conditions. The package, currently at version 4.1.10, facilitates integrating an Access Control List (ACL) system by allowing developers to specify initial permissions, handle unauthorized route access, and dynamically update user permissions via middleware. While effective for Vue 2 projects, the broader Vue ecosystem has largely transitioned to Vue 3, making this package primarily relevant for maintaining existing Vue 2 applications, as its development and compatibility are centered around the older Vue version.","status":"maintenance","version":"4.1.10","language":"javascript","source_language":"en","source_url":"https://github.com/leonardovilarinho/vue-acl","tags":["javascript","acl","vuejs","control","user"],"install":[{"cmd":"npm install vue-acl","lang":"bash","label":"npm"},{"cmd":"yarn add vue-acl","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-acl","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for any Vue.js plugin, specifically Vue 2.x.","package":"vue","optional":false},{"reason":"Required for route-level access control and the `router` option in `AclCreate`.","package":"vue-router","optional":false}],"imports":[{"note":"Used with `Vue.use(AclInstaller)` to register the plugin.","wrong":"const AclInstaller = require('vue-acl').AclInstaller","symbol":"AclInstaller","correct":"import { AclInstaller } from 'vue-acl'"},{"note":"The primary class for configuring the ACL instance; named import is required.","wrong":"import AclCreate from 'vue-acl'","symbol":"AclCreate","correct":"import { AclCreate } from 'vue-acl'"},{"note":"Used to construct individual access rules, often chained with `.or()`, `.and()`, and ending with `.generate()`.","wrong":"import { Rule } from 'vue-acl'","symbol":"AclRule","correct":"import { AclRule } from 'vue-acl'"}],"quickstart":{"code":"import Vue from 'vue';\nimport Router from 'vue-router';\nimport App from './App.vue';\nimport { AclInstaller, AclCreate, AclRule } from 'vue-acl';\n\n// 1. Define your Vue Router instance\nVue.use(Router);\nconst router = new Router({\n  routes: [\n    {\n      path: '/',\n      name: 'public',\n      component: { template: '<div>Public Page <button v-if=\"$acl.check(\\'admin\\')\">Admin Button</button></div>' },\n      meta: { rule: 'isPublic' }\n    },\n    {\n      path: '/admin',\n      name: 'admin',\n      component: { template: '<div>Admin Page <button v-if=\"$acl.not.check(\\'public\\')\">Only Admin Button</button></div>' },\n      meta: { rule: new AclRule('admin').generate() }\n    },\n    {\n      path: '/error',\n      name: 'notfound',\n      component: { template: '<div>404 Not Found</div>' },\n      meta: { rule: '*' }\n    }\n  ]\n});\n\n// 2. Install vue-acl plugin\nVue.use(AclInstaller);\n\n// 3. Create your Acl instance\nconst acl = new AclCreate({\n  initial: 'public',\n  notfound: {\n    path: '/error',\n    forwardQueryParams: true\n  },\n  router,\n  acceptLocalRules: true,\n  globalRules: {\n    isAdmin: new AclRule('admin').generate(),\n    isPublic: new AclRule('public').or('admin').generate()\n  },\n  middleware: async acl => {\n    // Simulate API call for user permissions\n    await new Promise(resolve => setTimeout(resolve, 500));\n    // In a real app, you'd fetch user roles from an API\n    const userRole = process.env.VUE_APP_USER_ROLE ?? 'public'; // Example: 'admin' or 'public'\n    acl.change(userRole);\n  }\n});\n\n// 4. Mount your Vue app with router and acl\nVue.config.productionTip = false;\n\nnew Vue({\n  router,\n  acl,\n  render: h => h(App)\n}).$mount('#app');\n\n// App.vue (minimal for demonstration)\n// <template><div><router-link to=\"/\">Public</router-link> | <router-link to=\"/admin\">Admin</router-link><router-view /></div></template>\n// <script>export default { name: 'App' }</script>","lang":"javascript","description":"This quickstart demonstrates the core setup of vue-acl, including installation, defining global rules, integrating with Vue Router for route protection, and passing the ACL instance to the root Vue instance. It also shows a basic `middleware` for dynamic permission changes and how to use `$acl.check()` within a component template."},"warnings":[{"fix":"For Vue 3 projects, consider alternatives like `vue-simple-acl` or `vacl`, or implement ACL logic natively using Vue 3's composition API.","message":"This package is explicitly designed for Vue.js 2.x. It is not compatible with Vue 3.x due to significant changes in Vue's plugin API and reactivity system (e.g., `Vue.use` vs `app.use`). Attempting to use it in a Vue 3 project will result in runtime errors.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Always append `.generate()` when creating a new `AclRule` instance: `new AclRule('permission').generate()`.","message":"Forgetting to call `.generate()` on `AclRule` instances when defining rules (e.g., in `globalRules` or `meta.rule`) will lead to rules not being properly compiled and applied, resulting in unexpected permission checks.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Optimize API calls and data processing within the `middleware` to be as fast as possible. Consider caching results if appropriate.","message":"The `middleware` function in `AclCreate` is an asynchronous method that executes on every route change. Long-running or inefficient operations within this middleware can significantly impact navigation performance.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Ensure `new Vue({ router, acl, ... })` includes your `acl` instance after calling `Vue.use(AclInstaller)` and instantiating `AclCreate`.","message":"The `$acl.check()` and `$acl.not.check()` methods in templates rely on the `acl` instance being correctly injected into the root Vue instance. If `acl` is not passed to `new Vue({})`, these methods will be undefined.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Verify that `acl` is passed to the root Vue instance: `new Vue({ ..., acl, ... }).$mount('#app')`, and that `Vue.use(AclInstaller)` was called.","cause":"The `$acl` instance was not properly injected into the Vue application context.","error":"TypeError: Cannot read properties of undefined (reading 'check')"},{"fix":"For direct `AclRule` instances in `meta.rule`, ensure it's `new AclRule('permission').generate()`. For `globalRules`, ensure the string name matches exactly, e.g., `meta: { rule: 'isAdmin' }`.","cause":"An `AclRule` instance was not correctly created or generated for the route meta, or a `globalRule` name was misspelled.","error":"Rule 'myRule' not found or not applying correctly in route meta."},{"fix":"Check the `notfound` path and `forwardQueryParams` setting. Debug the `middleware` function to ensure `acl.change()` is called with the intended permission only after successful authentication or role determination.","cause":"The `notfound` property in `AclCreate` might be misconfigured, or the `middleware` is prematurely calling `acl.change()` with an incorrect permission.","error":"Navigation fails or redirects unexpectedly when changing routes."}],"ecosystem":"npm"}