⚔️ Vue Router Middleware Comparison

Vue Router provides built-in navigation guards (beforeEach, beforeResolve, afterEach), but as applications grow, managing multiple guards becomes complex. Several Vue Router middleware libraries attempt to solve this — here's how the main alternatives compare to Vue Router Citadel.

📊 Feature Matrix

Feature	Citadel	route-guard	router-shield	easy-route	programic	vite-mw
TypeScript (native)	✅	✅	❌	✅	✅	✅
Return-based API	✅	❌	❌	❌	❌	✅
Dynamic management	✅	❌	❌	❌	❌	❌
Multiple hooks	3	1	1	1	2	1
Global scope	✅	❌	❌	❌	❌	✅
Route scope	✅	✅	✅	✅	✅	✅
Priority ordering	✅	❌	❌	❌	❌	✅
Timeout control	✅	❌	❌	❌	❌	❌
Lazy loading	✅	❌	❌	❌	❌	❌
Type-safe names	✅	❌	❌	❌	❌	✅
Error handling	✅	❌	❌	❌	❌	❌
Vue DevTools	✅	❌	❌	❌	❌	❌
Logging & debug	✅	❌	❌	❌	❌	❌
Bundle size (brotli)	≤3 KB	~3 KB	~1 KB	~3 KB	~1 KB	~1 KB

📦 Alternatives

@this-dot/vue-route-guard

npm — From This Dot Labs. Declarative authentication guard with token management and permission-based access control. Vue Router 4, TypeScript.

setupGuard({
  router,
  token: { name: 'AUTH_TOKEN', storage: StorageType.sessionStorage },
  redirect: { noAuthentication: '/login', noPermission: '/forbidden' },
  options: { fetchAuthentication: () => fetchUser() },
});

// Routes use meta fields:
// { path: '/dashboard', meta: { requiresAuth: true, access: ['admin'] } }

vue-router-shield

npm — Provides BeforeEach, BeforeEnter, and BeforeUpdate guard types within a single beforeEach hook. Guards are defined in route.meta.guard. Plain JavaScript.

const route = {
  path: '/profile',
  meta: {
    guard: [new BeforeEach(authMiddleware), new BeforeUpdate(trackMiddleware)],
  },
};

@warhsn/easy-route-vue

npm — Laravel-inspired middleware system. Supports TypeScript and Vue Router 4.

const route = {
  path: '/admin',
  meta: {
    middleware: ['auth', 'admin'],
  },
};

@programic/vue-router-middleware

npm — Modern middleware abstraction for Vue Router 4. Built with Vite and vitest. Native TypeScript.

const route = {
  path: '/dashboard',
  meta: {
    middleware: [authMiddleware],
  },
};

vite-plugin-vue-middleware

npm — File-based middleware system powered by Vite.

// src/middleware/01.auth.global.ts
export default defineMiddleware((to, from) => {
  if (!isLoggedIn()) return '/login';
});

// src/middleware/admin.ts
export default defineMiddleware((to, from) => {
  if (!isAdmin()) return '/forbidden';
});

// route definition
const route = {
  path: '/admin',
  meta: { middleware: ['admin'] }, // type-checked via generated .d.ts
};

🏰 Why Citadel?

Vue Router Citadel is designed for applications that outgrow simple guard combinations:

• Return-based API — no next() callbacks, clean control flow with verdicts
• Dynamic management — deploy/abandon outposts and assign/revoke to routes at runtime
• Multiple hooks — beforeEach, beforeResolve, and afterEach support
• Two scopes — global outposts for app-wide checks, route outposts for page-specific logic
• Priority ordering — fine-grained control over execution order across all outposts
• Timeout control — global and per-outpost timeout with custom handlers
• Lazy loading — dynamic imports for code splitting heavy handlers
• Type-safe names — declaration merging for compile-time validation and IDE autocomplete
• Error handling — structured onError / onTimeout handlers with context and custom outcomes
• Vue DevTools — custom inspector for viewing and debugging deployed outposts
• Logging & debug — customizable logger, debug breakpoints, runtime log level control
• ≤3 KB — minimal footprint (minified + brotli)

TIP

See the Getting Started guide to set up your first outpost in under 5 minutes.

---

Footnote

Of course, you can always write your own middleware system with router.beforeEach and route.meta — it's only about 20 lines of code. Then add error handling, timeouts, priority sorting, scoping, logging, devtools, types... and before you know it, you've written your own library. We've been there. That's why this one exists.