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.
vueMiddleware
✓ import { vueMiddleware } from 'vue-middleware'
✗ const vueMiddleware = require('vue-middleware')
The library primarily uses ESM syntax, consistent with modern Vue 3 development. CommonJS `require` syntax is not supported.
MiddlewareContext
✓ import { MiddlewareContext } from 'vue-middleware'
✗ import type { MiddlewareContext } from 'vue-middleware'
While `import type` is explicit for types, the provided example uses a standard named import. Both will work with TypeScript.
App
✓ import { createApp, App } from 'vue'
✗ import App from 'vue'
`createApp` and `App` are named exports from 'vue' itself, not 'vue-middleware'. This is a common mistake when mixing imports.
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).
import { createApp, App } from 'vue';
import { vueMiddleware, MiddlewareContext } from 'vue-middleware';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// Assume these components exist for demonstration
const AppRoot = { template: '<div><router-view></router-view></div>' };
const DashboardLayout = { template: '<div>Dashboard Layout <router-view></router-view></div>' };
const DashboardHomePage = { template: '<div>Dashboard Home</div>' };
const DashboardUsersPage = { template: '<div>Dashboard Users</div>' };
const routes: Array<RouteRecordRaw> = [
{
name: 'dashboard',
path: '/dashboard',
component: DashboardLayout,
meta: {
middleware: 'dashboard', // This dashboard and its children are now guarded using the dashboard middleware
},
children: [
{
name: 'dashboard_home',
path: '',
component: DashboardHomePage,
},
{
name: 'dashboard_users',
path: 'users',
component: DashboardUsersPage,
},
]
},
{
path: '/',
redirect: '/dashboard'
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
const app: App = createApp(AppRoot);
app.use(router); // Vue Router must be installed before vue-middleware
app.use(vueMiddleware, {
middleware: {
dashboard: ({ app, router, from, to, redirect, abort, guard }: MiddlewareContext) => {
console.log('Dashboard middleware triggered for:', to.path);
// Example: Simulate an authentication check
const isAuthenticated = true; // Replace with actual auth logic (e.g., check token, user role)
if (!isAuthenticated) {
console.log('User not authenticated, redirecting...');
redirect('/login'); // Assuming a login route exists
}
// If authenticated, allow navigation
// No explicit `next()` needed as vue-middleware handles the flow if no redirect/abort is called
},
},
});
app.mount('#app');
console.log('App mounted. Try navigating to /dashboard or /dashboard/users');
Errors
Common errors & fixes
Error: "vueMiddleware" is not a function
Attempting to use `vueMiddleware` as a default import or without destructuring when it's a named export.
fixEnsure you are using a named import: `import { vueMiddleware } from 'vue-middleware'`. Property 'middleware' does not exist on type 'RouteMeta'
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.
fixYou need to augment the `RouteMeta` interface in a `.d.ts` file or directly in a global type declaration. For example:
```typescript
declare module 'vue-router' {
interface RouteMeta {
middleware?: string | string[];
}
}
``` npm WARN vue-middleware@1.0.0-alpha.7 requires a peer of vue@^3.0.0 but none is installed.
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.
fixInstall 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.
Upgrade
Version history
1.0.0-alpha.7latest on npm
Audit
Dependencies
vuerequiredCore Vue.js library, as this is a Vue plugin. It is expected as a peer dependency.
vue-routerrequiredRoute management, central to how middleware is applied in Vue applications. It is expected as a peer dependency.