{"id":17998,"library":"vue-middleware","title":"Vue Middleware Plugin","description":"vue-middleware is a Vue.js plugin designed to simplify the creation and management of custom middleware, particularly for handling roles and permissions within Vue applications. It draws inspiration from Nuxt's middleware system but extends functionality to include robust role and permission management through a driver-based approach, which is highlighted for its ease of integration with backend frameworks like Laravel. The current version, 1.0.0-alpha.7, indicates it is still in active development, suggesting potential API changes before a stable release. It aims to provide a zero-configuration experience for common backend integrations, making it easier to guard routes based on user roles and permissions. Vue.js itself does not have a fixed release cycle; patch releases are made as needed, and minor releases with new features typically occur every 3-6 months.","status":"active","version":"1.0.0-alpha.7","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add vue-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Vue.js library, as this is a Vue plugin. It is expected as a peer dependency.","package":"vue","optional":false},{"reason":"Route management, central to how middleware is applied in Vue applications. It is expected as a peer dependency.","package":"vue-router","optional":false}],"imports":[{"note":"The library primarily uses ESM syntax, consistent with modern Vue 3 development. CommonJS `require` syntax is not supported.","wrong":"const vueMiddleware = require('vue-middleware')","symbol":"vueMiddleware","correct":"import { vueMiddleware } from 'vue-middleware'"},{"note":"While `import type` is explicit for types, the provided example uses a standard named import. Both will work with TypeScript.","wrong":"import type { MiddlewareContext } from 'vue-middleware'","symbol":"MiddlewareContext","correct":"import { MiddlewareContext } from 'vue-middleware'"},{"note":"`createApp` and `App` are named exports from 'vue' itself, not 'vue-middleware'. This is a common mistake when mixing imports.","wrong":"import App from 'vue'","symbol":"App","correct":"import { createApp, App } from 'vue'"}],"quickstart":{"code":"import { createApp, App } from 'vue';\nimport { vueMiddleware, MiddlewareContext } from 'vue-middleware';\nimport { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';\n\n// Assume these components exist for demonstration\nconst AppRoot = { template: '<div><router-view></router-view></div>' };\nconst DashboardLayout = { template: '<div>Dashboard Layout <router-view></router-view></div>' };\nconst DashboardHomePage = { template: '<div>Dashboard Home</div>' };\nconst DashboardUsersPage = { template: '<div>Dashboard Users</div>' };\n\nconst routes: Array<RouteRecordRaw> = [\n  {\n    name: 'dashboard',\n    path: '/dashboard',\n    component: DashboardLayout,\n    meta: {\n      middleware: 'dashboard', // This dashboard and its children are now guarded using the dashboard middleware\n    },\n    children: [\n      {\n        name: 'dashboard_home',\n        path: '',\n        component: DashboardHomePage,\n      },\n      {\n        name: 'dashboard_users',\n        path: 'users',\n        component: DashboardUsersPage,\n      },\n    ]\n  },\n  {\n    path: '/',\n    redirect: '/dashboard'\n  }\n];\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes,\n});\n\nconst app: App = createApp(AppRoot);\n\napp.use(router); // Vue Router must be installed before vue-middleware\n\napp.use(vueMiddleware, {\n  middleware: {\n    dashboard: ({ app, router, from, to, redirect, abort, guard }: MiddlewareContext) => {\n      console.log('Dashboard middleware triggered for:', to.path);\n      // Example: Simulate an authentication check\n      const isAuthenticated = true; // Replace with actual auth logic (e.g., check token, user role)\n      if (!isAuthenticated) {\n        console.log('User not authenticated, redirecting...');\n        redirect('/login'); // Assuming a login route exists\n      }\n      // If authenticated, allow navigation\n      // No explicit `next()` needed as vue-middleware handles the flow if no redirect/abort is called\n    },\n  },\n});\n\napp.mount('#app');\n\nconsole.log('App mounted. Try navigating to /dashboard or /dashboard/users');\n","lang":"typescript","description":"This quickstart demonstrates how to install `vue-middleware`, register a global 'dashboard' middleware, and apply it to specific routes in a Vue 3 application using Vue Router. It shows the basic setup and how the middleware context can be used for conditional navigation (e.g., authentication checks)."},"warnings":[{"fix":"Refer to the official documentation and migration guides for each new release. Pinning exact versions (`~` or `^`) is not recommended for alpha software in production.","message":"As an alpha release (1.0.0-alpha.7), the API for `vue-middleware` is subject to change. Breaking changes are highly likely in future minor or major releases before a stable `1.0.0` version.","severity":"breaking","affected_versions":">=1.0.0-alpha"},{"fix":"Always register `vue-router` first: `app.use(router); app.use(vueMiddleware, ...);`","message":"Ensure `vue-router` is correctly installed and used (`app.use(router)`) *before* `vue-middleware` (`app.use(vueMiddleware)`) in your application setup. `vue-middleware` relies on `vue-router`'s navigation guards and route metadata.","severity":"gotcha","affected_versions":">=1.0.0-alpha"},{"fix":"Test middleware logic thoroughly, especially with conditional redirects. Ensure that a path is always reachable or that `abort()` is called appropriately. Review `vue-middleware` documentation for detailed examples of middleware flow control.","message":"When defining middleware, carefully manage the `redirect`, `abort`, and `guard` functions provided in the `MiddlewareContext`. Incorrect usage can lead to infinite redirect loops, blocked navigation, or unexpected route transitions.","severity":"gotcha","affected_versions":">=1.0.0-alpha"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure you are using a named import: `import { vueMiddleware } from 'vue-middleware'`.","cause":"Attempting to use `vueMiddleware` as a default import or without destructuring when it's a named export.","error":"Error: \"vueMiddleware\" is not a function"},{"fix":"You need to augment the `RouteMeta` interface in a `.d.ts` file or directly in a global type declaration. For example:\n```typescript\ndeclare module 'vue-router' {\n  interface RouteMeta {\n    middleware?: string | string[];\n  }\n}\n```","cause":"TypeScript compiler error indicating that the `meta` property of a Vue Router `RouteRecordRaw` does not recognize the custom `middleware` key. This is common when extending router types.","error":"Property 'middleware' does not exist on type 'RouteMeta'"},{"fix":"Install the required version of Vue in your project: `npm install vue@^3.0.0` or `yarn add vue@^3.0.0`. Ensure your project's Vue version is compatible with the `vue-middleware`'s peer dependency requirement.","cause":"This warning occurs because `vue-middleware` declares `vue` as a peer dependency, meaning your project is expected to provide it, but it's either missing or the version doesn't match the required range.","error":"npm WARN vue-middleware@1.0.0-alpha.7 requires a peer of vue@^3.0.0 but none is installed."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}