Quick usage

Let's create a simple middleware for protecting our dashboard.

In main.ts we're goning to register our first dashboard middleware the function receives all the parameters you might think of in the authentication process.

WARNING

Notice that vue-middleware requires vue-router in order to work.

import { createApp, type App } from 'vue'
import vueMiddleware, { type MiddlewareContext } from 'vue-middleware'
import App from './App.vue'

const app: App = createApp(App)

app.use(vueMiddleware, {
  middleware: {
    dashboard: ({ app, router, from, to, redirect, abort, guard }: MiddlewareContext) => {
      //
    },
  },
})

app.mount('#app')

In routes file we need to attach this middleware name in a route or most likely a route with its children, e.g dashboard.

export const routes = [
  {
    name: 'dashboard',
    path: '/dashboard',
    component: () => import('@/layouts/dashboard.vue'),
    meta: {
      // This dashboard and its children are now protected using the dashboard middleware
      middleware: 'dashboard',
    },
    children: [
      {
        name: 'dashboard_home',
        path: '',
        component: () => import('@/pages/dashboard/index.vue'),
      },
      {
        name: 'dashboard_users',
        path: 'users',
        component: () => import('@/pages/dashboard/users.vue'),
      },
    ]
  }
]