Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
multiguard
✓ import multiguard from 'vue-router-multiguard';
✗ import { multiguard } from 'vue-router-multiguard';
The `multiguard` function is a default export. Using named import syntax will result in an undefined value.
multiguard (CommonJS)
✓ const multiguard = require('vue-router-multiguard').default;
✗ const multiguard = require('vue-router-multiguard');
While primarily designed for ES modules, if using CommonJS `require`, access the default export via `.default` due to ESM interop nuances in some environments.
Type definitions
✓ import multiguard, { Multiguard } from 'vue-router-multiguard';
✗ import { Multiguard } from 'vue-router-multiguard/dist/types';
TypeScript types are included since v1.0.3. The main `multiguard` function is a default export, but you can import the `Multiguard` type directly from the package for explicit type hinting.
This quickstart demonstrates how to apply multiple navigation guards to Vue Router routes using `multiguard`. It defines example guards for authentication, role-based access, and logging, then shows how to chain them effectively on `beforeEnter` hooks. The example includes simulated navigation attempts to illustrate how guards execute serially and can redirect early based on conditions, providing clear console output for each step.
import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import multiguard from 'vue-router-multiguard';
Vue.use(VueRouter);
// Example guard functions
const requireAuth = (to, from, next) => {
const isAuthenticated = localStorage.getItem('userToken'); // Simulate auth check
if (to.meta?.requiresAuth && !isAuthenticated) {
console.log(`Guard 'requireAuth' blocked for ${to.path}: User not authenticated.`);
next('/login'); // Redirect to login page
} else {
next(); // Proceed
}
};
const requireAdmin = (to, from, next) => {
const userRole = localStorage.getItem('userRole'); // Simulate role check
if (to.meta?.requiresAdmin && userRole !== 'admin') {
console.log(`Guard 'requireAdmin' blocked for ${to.path}: Not an administrator.`);
next('/access-denied'); // Redirect for insufficient permissions
} else {
next(); // Proceed
}
};
const logRoute = (to, from, next) => {
console.log(`Guard 'logRoute' entered: ${from.path} -> ${to.path}`);
next(); // Always proceed
};
const routes: Array<RouteConfig> = [
{
path: '/',
component: { template: '<div><h1>Home</h1><p>Public access.</p></div>' },
name: 'home'
},
{
path: '/dashboard',
component: { template: '<div><h1>Dashboard</h1><p>Authenticated access.</p></div>' },
name: 'dashboard',
meta: { requiresAuth: true },
beforeEnter: multiguard([logRoute, requireAuth]) // Combined guards
},
{
path: '/admin',
component: { template: '<div><h1>Admin Panel</h1><p>Admin-only access.</p></div>' },
name: 'admin',
meta: { requiresAuth: true, requiresAdmin: true },
beforeEnter: multiguard([logRoute, requireAuth, requireAdmin]) // Multiple combined guards
},
{
path: '/login',
component: { template: '<div><h1>Login</h1><p>Please log in.</p></div>' },
name: 'login'
},
{
path: '/access-denied',
component: { template: '<div><h1>Access Denied</h1><p>You do not have permission to view this page.</p></div>' },
name: 'access-denied'
}
];
const router = new VueRouter({ routes });
// Simulate user state for demonstration
localStorage.setItem('userToken', 'fake-jwt-token-123'); // User is 'logged in'
localStorage.setItem('userRole', 'user'); // User is not 'admin'
console.log('--- Navigating to /dashboard (authenticated user) ---');
router.push('/dashboard').catch(err => console.error('Navigation error:', err.message));
setTimeout(() => {
console.log('\n--- Navigating to /admin (authenticated but not admin) ---');
router.push('/admin').catch(err => console.error('Navigation error:', err.message));
}, 100);
setTimeout(() => {
console.log('\n--- Navigating to /dashboard (unauthenticated user) ---');
localStorage.removeItem('userToken'); // Simulate logout
router.push('/dashboard').catch(err => console.error('Navigation error:', err.message));
}, 200);
// For a real app, you'd mount this to a Vue instance:
// new Vue({ router, el: '#app' });
Errors
Common errors & fixes
TypeError: multiguard is not a function
This error typically occurs when `multiguard` is imported incorrectly, often by using a named import syntax (`import { multiguard } from '...'`) for a module that provides a default export.
fixChange your import statement to `import multiguard from 'vue-router-multiguard';`. If using CommonJS `require`, ensure you access the default export correctly: `const multiguard = require('vue-router-multiguard').default;` NavigationDuplicated: Avoided redundant navigation to current location
This warning (or similar) from Vue Router can appear if a guard redirects to the current route or attempts to push the same route multiple times consecutively. While not directly caused by `multiguard`, it's a common outcome of guard logic.
fixEnsure your guards' redirection logic only fires when necessary. Before calling `next(path)`, you might add a check like `if (to.path !== path) { next(path); } else { next(false); }` to prevent unnecessary navigation calls if already on the target path. Audit
Dependencies
No dependency data recorded yet.